WebSocket通过HTTP握手升级协议实现全双工通信，支持客户端与服务器实时双向交互；JavaScript使用WebSocket API监听open、message、error、close事件，可发送字符串或二进制数据，并需实现重连机制保障连接稳定。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 能够实现更高效、低延迟的双向通信，特别适用于聊天应用、实时通知、在线游戏等场景。
WebSocket 协议基本原理
WebSocket 协议通过一次 HTTP 握手建立连接，之后升级为 WebSocket 协议通信。这个过程称为“协议切换”：
- 客户端发送一个带有 Upgrade: websocket 头的 HTTP 请求
- 服务器响应 101 Switching Protocols，表示同意升级
- 此后双方使用 WebSocket 帧格式进行数据传输，不再遵循 HTTP 模式
一旦连接建立，客户端和服务器都可以主动向对方发送数据，无需等待请求。
JavaScript 中使用 WebSocket API
现代浏览器提供了原生的 WebSocket 对象，使用非常简单：
立即学习“Java免费学习笔记（深入）”；
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function(event) {
console.log('连接已建立');
ws.send('Hello Server!');
};
ws.onmessage = function(event) {
console.log('收到消息:', event.data);
};
ws.onerror = function(event) {
console.error('发生错误', event);
};
ws.onclose = function(event) {
console.log('连接关闭', event.code, event.reason);
};
你也可以使用 addEventListener 方式绑定事件。关键事件包括 open、message、error 和 close。
WebSocket 数据帧与通信格式
WebSocket 传输的数据可以是字符串或二进制（ArrayBuffer 或 Blob）。API 自动处理帧的封装与解析：
- send() 方法可发送字符串、ArrayBuffer 或 Blob
- 接收时通过 onmessage 的 event.data 判断类型并处理
- 协议支持 ping/pong 心跳机制（由底层自动处理）
例如处理二进制数据：
ws.binaryType = 'arraybuffer'; // 设置接收类型
ws.onmessage = function(event) {
if (event.data instanceof ArrayBuffer) {
const bytes = new Uint8Array(event.data);
console.log('收到二进制数据:', bytes);
}
};
连接管理与重连策略
WebSocket 连接可能因网络问题中断，需要手动管理重连：
- 监听 onclose 事件，在其中尝试重新连接
- 加入指数退避机制避免频繁重试
- 设置最大重试次数防止无限循环
示例重连逻辑：
function connect() {
const ws = new WebSocket('ws://localhost:8080');
ws.onclose = function() {
setTimeout(connect, 3000); // 3秒后重连
};
ws.onmessage = function(event) {
console.log('消息:', event.data);
};
return ws;
}
基本上就这些。掌握 WebSocket 的握手机制、事件模型和数据处理方式，就能在前端实现高效的实时通信功能。注意处理异常和连接状态，确保用户体验稳定。不复杂但容易忽略细节。
