WebSocket详解含图解：协议特性、握手流程

文章目录

- 一、HTTP 为什么不适合实时？
- 二、WebSocket 是什么？
- 三、WebSocket 建立连接的过程：握手
- 四、WebSocket 和 HTTP 的核心区别
- 五、前端使用 WebSocket 最简示例
- 六、后端常见实现
- 七、心跳重连：保证连接稳定
- 八、典型应用场景
- 九、WebSocket 常见误区
- 总结

最近在复习计网相关的，故总结本文，如有错误，请评论区指出
在 Web 开发里，我们最熟悉的是 HTTP 请求：客户端问一次，服务器答一次。但很多场景------比如聊天消息、实时通知、大屏数据、游戏同步 ------需要服务器主动把消息推给前端，HTTP 就很吃力。
于是 WebSocket 出现了。它是一种全双工、长连接、实时通信 的协议，也是现在前端实时功能的标配。

一、HTTP 为什么不适合实时？

HTTP 是单向、短连接的：

只能客户端主动发请求，服务器不能主动推送
想实现实时，只能用轮询：前端每隔几秒问一次"有新消息吗"

如下图，左边为http轮询，右边为websocket

轮询的问题很明显：

大量无效请求，浪费服务器资源
延迟高，消息不及时
高并发下压力巨大

而 WebSocket 只建立一次连接，之后双方随时互发消息，真正实时。

二、WebSocket 是什么？

WebSocket 是一种基于 TCP 的应用层协议，默认端口：

ws:// → 80（类似 HTTP）
wss:// → 443（类似 HTTPS，加密更安全）

特点：

全双工：客户端和服务器可同时发送消息
长连接：一次握手，持续通信
服务端主动推送：不用前端轮询
开销小：协议头很轻，比 HTTP 高效
跨域支持：可跨域通信

WebSocket 是基于 TCP 实现的应用层协议，对外提供 ws（明文）和 wss（加密）两种访问方式，分别对应 HTTP 和 HTTPS 的安全模型

最底层：TCP

TCP 是整个 WebSocket 的基础传输层协议，负责可靠的端到端数据传输。
WebSocket 是基于 TCP 实现的应用层协议，所有数据最终都通过 TCP 连接发送和接收。

中间层：WebSocket Protocol

这是 WebSocket 核心协议层，定义了数据帧格式、握手规则、消息分片、心跳等标准。
它向上层提供了全双工、长连接的通信能力，向下依赖 TCP 保证传输可靠性。

最上层：ws /wss（对应 HTTP / HTTPS）

ws (http)：未加密的 WebSocket 连接，默认端口 80，和 HTTP 走同一端口。
wss (https)：加密的 WebSocket 连接，基于 TLS/SSL 加密，默认端口 443，和 HTTPS 走同一端口，更安全，生产环境必须使用。

三、WebSocket 建立连接的过程：握手

WebSocket 不是凭空建立的，它复用 HTTP 来完成握手。

前端发一个 HTTP 请求，携带几个关键请求头：

复制代码

Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: xxx

服务器识别后，返回 101 状态码，表示协议切换成功：

复制代码

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: xxx

握手完成后，连接升级为 WebSocket 长连接，不再使用 HTTP 规则 。

四、WebSocket 和 HTTP 的核心区别

对比项	HTTP	WebSocket
连接方式	短连接，请求完就断	长连接，一次连接持续通信
通信方向	单向（客户端→服务器）	全双工（双向随意发）
服务器推送	不能，只能轮询	支持主动推送
开销	头信息大	数据帧轻量，开销小
适用场景	页面、接口、数据获取	聊天、实时通知、大屏、游戏

五、前端使用 WebSocket 最简示例

浏览器原生支持 WebSocket 对象，开箱即用。

js 复制代码

// 1. 创建连接
const ws = new WebSocket('ws://localhost:8080/ws')

// 2. 连接成功
ws.onopen = () => {
  console.log('WebSocket 连接成功')
  ws.send('Hello Server')
}

// 3. 收到服务器消息
ws.onmessage = (evt) => {
  console.log('收到消息：', evt.data)
}

// 4. 连接关闭
ws.onclose = () => {
  console.log('连接断开')
}

// 5. 异常
ws.onerror = (err) => {
  console.log('异常：', err)
}

六、后端常见实现

WebSocket 是标准协议，所有语言都能实现：

Java：Spring Boot WebSocket、Netty
Node.js：ws、Socket.IO
Go、Python、PHP 等均支持

以 Spring Boot 为例：

引入 spring-boot-starter-websocket
编写 @ServerEndpoint
实现 onOpen、onClose、onMessage、onError

本质就是：维护长连接，根据标识推送消息。

七、心跳重连：保证连接稳定

WebSocket 可能因为网络波动断开，所以实际项目必须做：

心跳包 ：前端每隔几秒发一个 ping
服务器回复 pong
一段时间收不到回复，认为断开
前端自动重连

这是生产环境必备，避免掉线

八、典型应用场景

在线聊天系统：微信网页版、客服聊天
实时消息通知：后台来单、告警推送
数据大屏/监控：实时指标刷新
多人协作/游戏：操作实时同步
直播弹幕：消息即时显示

九、WebSocket 常见误区

Socket.IO = WebSocket？

不完全是。Socket.IO 是封装库，兼容低版本浏览器，自带心跳、重连、房间，但不是标准 WebSocket。
wss 比 ws 更安全

生产环境必须用 wss，否则容易被劫持、断开。
连接不是越多越好

长连接占用服务器文件描述符，高并发要做集群、分布式推送。

总结

WebSocket 是全双工长连接协议，解决 HTTP 无法主动推送的问题
一次握手，永久通信，开销小、延迟低
前端原生支持，后端多语言通用
必备：心跳、重连、异常处理
适合所有实时性需求的业务场景