一、WebSocket 核心认知(必懂,理解了用法才通透)
1. WebSocket 是什么?
WebSocket 是 HTML5 新增的一种「全双工、持久化」的网络通信协议,协议标识是 ws://(明文)和 wss://(加密,推荐生产环境用),是 HTTP 协议的补充和升级。
2. 为什么需要 WebSocket?HTTP 协议的痛点
HTTP 协议是 「单工 / 半双工」、「短连接」、「无状态」 的通信模式,有 2 个致命痛点:
- ✘ 通信方向:只能由客户端主动发起请求 → 服务端被动响应,服务端永远不能主动给客户端发消息;
- ✘ 连接状态:每次请求响应完成后,TCP 连接就断开,下次通信需要重新建立连接,开销大;
这就导致 HTTP 无法实现「实时通信」场景(比如聊天、股票行情、扫码登录、消息推送),之前只能用「轮询 / 长轮询」曲线救国,但效率极低、资源浪费严重。
3. WebSocket 核心优势(对比 HTTP 碾压级)
✅ 全双工通信:连接建立后,客户端 ↔ 服务端 双向平等通信,双方都可以主动向对方发送消息,无需谁请求谁; ✅ 持久连接:一次握手成功后,TCP 连接会一直保持,直到主动断开,没有频繁的连接建立 / 销毁开销; ✅ 轻量级数据传输:通信头信息极小,数据传输效率高; ✅ 无同源限制:客户端和服务端建立连接时,不受浏览器同源策略的限制; ✅ 基于 TCP:底层复用 TCP 协议,稳定性高、传输可靠。
4. WebSocket 与 HTTP 的关系(重点,易混淆)
WebSocket 不是替代 HTTP,而是 基于 HTTP 完成握手,之后脱离 HTTP 独立通信,二者关系:
- 客户端发起 WebSocket 连接时,发送的是 HTTP 协议的请求(叫「握手请求」);
- 服务端收到请求后,返回 HTTP 101 状态码(协议切换),完成「握手」;
- 握手成功后,双方的通信就不再走 HTTP 协议,而是走纯 WebSocket 协议,全双工传输数据。
二、WebSocket 完整通信流程(极简版,先建立全局认知)
不管前端用原生 JS、Vue/React,后端用 Java/Node/PHP/Python,所有 WebSocket 的通信流程完全一致,只有3 个核心步骤,记住这个流程,所有用法都围绕它展开:
✅ 核心三步流程(通用,重中之重)
- 建立连接(握手):客户端主动发起连接请求,服务端同意,双方建立持久的 TCP 连接;
- 数据通信(双工):连接成功后,客户端 ↔ 服务端,双方都能主动发消息、收消息,互相通信;
- 断开连接(销毁):任意一方主动关闭连接,或网络异常导致连接断开,释放资源。
三、前端 WebSocket 用法(原生 JS,最全 API,无框架依赖,通用所有前端项目)
前端是 WebSocket 最核心的使用端,浏览器原生内置了 WebSocket 对象,无需引入任何依赖,直接使用,语法完全标准化,Vue/React/ 小程序里的用法和原生 JS 一致,只是把代码放到对应的生命周期即可。
✅ 1. 前端完整代码(可直接复制运行,含所有核心功能)
// 1. 创建 WebSocket 实例,建立连接(核心) // 语法:new WebSocket(协议地址) // 本地测试:ws://localhost:8080 生产加密:wss://你的域名:端口
ws = ();
ws. = () {
.();
ws.();
};
ws. = () {
.(, event.);
};
ws. = () {
.(, event., event.);
};
ws. = () {
.(, error);
};
userInfo = { : , : };
ws.(.(userInfo));
.(, {
ws.();
.();
});
.(, ws.);
(ws. === ) {
ws.();
}

