一、为什么需要 WebSocket

在日常 App 开发中，绝大多数场景都在使用 REST 协议。其工作流程很直白：客户端发起一次请求，服务器返回响应后立即断开连接。

只是当你需要实现聊天、实时行情或是像滴滴那样在地图上实时跟踪司机轨迹时“请求-响应”模式显得格外笨重。服务器必须主动把变化推送给 App，而 REST 却只能让客户端不断地去询问服务器是否有新消息。这种做法被称为POLLING。

• 流量浪费：频繁的空请求占用带宽，导致使用者数据消耗暴增。
• 高能耗：每次网络请求都会唤醒设备，严重影响电池续航。
• 即使网络已断线。客户端也可能误认为连接正常，无法及时恢复。

痛点一：不想让使用者因频繁轮询而产生额外流量和电量消耗！

二、原理与生命周期

很多同学可能会问，“WebSocket 是一个新的协议吗？”其实它是通过 HTTP 升级而来的，并非全新协议。

握手过程

WebSocket 的建立过程就是一次普通的 HTTP GET 请求。

1. 客户端发送一个带有特殊请求头的 GET /chat HTTP/1.1 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: …Sec-WebSocket-Version: 13
   ,头信息里包含 Upgrade: websocket .

2. 如果服务器支持。会返回一个状态码 101 Switching Protocols .

3. 从这一刻起，这个连接就变成了 WebSocket，双方可以随时随地互发消息，再也不用先问后答了。

细节提示：因为它是从 HTTP 升级来的。所以它直接复用相同端口，如80/443。生产环境务必使用加密版 wss://，否则数据易被监听。怎么说呢，

连接生命周期

理解 WebSocket 的状态转换对处理异常非常关键。它主要经历以下几个阶段：

• connecting : 正在尝试建立连接，正在进行握手。说起来，
• open : 连接成功。现在双方可以自由收发消息了。
• message : 收到消息或发送消息。是最频繁的状态，
• close / error : 连接结束。如果是正常关闭，会带上状态码。例如 Normal Closure ;话说回来，如果是网络突然断了通常会报错误码 Abnormal Closure .

    记住：   “如果遇到错误代码 1006 或其他异常断开时就需要处理重连逻辑！”

三、实战中的稳定性保障  

在真实的网络环境下连接掉线几乎是常态。要让 WebSocket 足够稳固。需要做两件事：“心跳检测”&“指数退避重连”.

“心跳机制 ”

“有时候虽然你的 WebSocket 对象显示还在 open 状态，但网络已经“死”，比如手机进电梯里。为了防止这种假死现象，我们会定期发送一个小包。如果对方没有在规定时间内回 pong，就认为连线已断，需要立刻重连。

“指数退避重连 ”

“if 网络真的断了我们肯定要尝试重连。但千万不要用 while 那种死循环疯狂重连，否则如果服务器宕机。 你的 App 会像轰炸一样去请求服务器，还会加重负担。比较优雅的做法是采用指数退避：次等4秒…，直到上限。这样既能保证快速恢复，又不会过度消耗资源。说起来，

四、Flutter 中的落地实践  

“在 Flutter 中我们一般使用 web_socket_channel 包。它把 WebSocket 封装成 Stream，与 Dart 的异步编程非常匹配。下面给出一个完整示例，包括监听、发送、心跳与退避机制重连：

import 'dart:async';import 'package:web_socket_channel/web_socket_channel.dart';其实，class SocketService {
WebSocketChannel?_channel，StreamSubscription?_sub，Timer?_heartbeat，int _retryDelay = 1;// 起始重连间隔
void connect {
// 使用 wss:// 保证安全
_channel = WebSocketChannel.connect);<pre>
<code>_sub = _channel!.stream.listen(
_onMessage,onError: => _reconnect。onDone: => _reconnect,// 当连接被服务器关闭时触发
);_startHeartbeat;_retryDelay = 1;// 成功后复位
</code></pre>
<p>
}</p>
<p>
void _onMessage {
if return;// 忽略心跳回包
print;}</p>
<p>
void send => _channel?.sink.add，</p>
<p>
void _startHeartbeat {
// 每30秒发一次心跳
_heartbeat = Timer.periodic,{
if {
try {
_channel?怎么说呢，.sink.add;} catch {}
}
});}</p>
<p>
void <em>reconnect {
print;
Future.delayed,connect);
// 指数退避：doubling 并限制最大值
const int maxRetry =32;final int nextDelay=</em>retryDelay *2;if{
this.<em>retryDelay =nextDelay;}else{
this.</em>retryDelay=maxRetry;}
}</p>
<p>
void dispose =>_cleanUp;</p>
<p>
void _cleanUp{
_heartbeat?.cancel，_sub?.cancel，_channel?.sink.close，}
}
<xmp>




🔔 防止内存泄漏：
在 Flutter 的 State.dispose 方法里一定要调用 socketService.dispose;否则页面关闭后 Stream 与 Timer 会继续跑，占用资源并导致意外行为.

💬 onDone 回调不可忽视：
它捕捉到服务端主动断开的情况。为后续自动重连提供入口.

📄 单订阅 VS 广播订阅：
web_socket_channel 的 stream 是单订阅的；若多处 listen，需要转为 broadcastStream.


🙂 五、面试锦囊