WebSocket 是 JavaScript 实现实时通信最常用方式，基于单个 TCP 连接实现全双工、低延迟双向通信；需监听 onopen、onmessage、onerror、onclose 事件，用 JSON 收发结构化数据，并手动实现带重试限制的自动重连，注意 wss:// 与 HTTPS 匹配及跨域服务端校验。
JavaScript 实现实时通信，最常用、最直接的方式就是使用 WebSocket。它是一种在单个 TCP 连接上进行全双工通信的协议，能让 浏览器 与服务器之间建立持久连接，实现低延迟、双向、实时的数据交换。
WebSocket 的基本使用流程
创建 WebSocket 连接非常简单，核心是实例化 WebSocket 对象，并监听关键事件：
- 连接建立：监听
onopen，连接成功后可立即发送数据 - 接收消息：监听
onmessage，服务端推送的数据会在这里触发 - 连接异常：监听
onerror，处理网络中断或协议错误 - 连接关闭：监听
onclose，可在此做清理或重连逻辑
示例代码：
const ws = new WebSocket('wss://example.com/chat'); ws.onopen = () => {console.log('已连接'); ws.send(JSON.stringify({ type: 'join', user: 'Alice'})); }; ws.onmessage = (event) => {const data = JSON.parse(event.data); console.log('收到消息：', data); }; ws.onerror = (error) => {console.error('WebSocket 错误：', error); }; ws.onclose = () => {console.log('连接已关闭'); };
发送与接收结构化数据
WebSocket 本身只收发字符串或 ArrayBuffer，实际项目中建议统一用 JSON 格式通信，便于前 后端 解析：
立即学习“Java 免费学习笔记（深入）”；
- 发送前用
JSON.stringify()序列化对象 - 接收后用
JSON.parse()解析字符串 - 可在消息体中加入
type字段区分业务类型（如'message'、'typing'、'online-list'）
处理断线与自动重连
WebSocket 并不自带重连机制，需手动实现。常见做法是：
- 在
onclose或onerror中设置延时重试（避免频繁请求） - 限制最大重试次数，防止无限循环
- 每次重连前检查
ws.readyState，避免重复连接（0=CONNECTING,1=OPEN,2=CLOSING,3=CLOSED）
注意同源与安全限制
WebSocket 协议不受同源策略限制，但浏览器仍要求页面协议与 WebSocket 协议匹配：
