websocket - 技术栈

‌1、含义

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议‌，允许客户端与服务器之间建立持久连接，实现低延迟、高效率的双向数据传输。解决了传统 HTTP 只能客户端主动请求的问题

2、核心特点

‌全双工通信‌：客户端和服务器可同时主动发送数据，无需等待对方响应

‌持久连接‌：握手成功后连接保持打开，避免频繁建立/断开 TCP 连接的开销

‌轻量级头部‌：相比 HTTP 每次请求携带完整头部，WebSocket 数据帧头部很小仅 2--10 字节（客户端到服务器额外加 4 字节掩码）‌

基于 TCP，兼容 HTTP‌：使用 ws://（明文）或 wss://（加密，推荐生产环境）协议，默认复用 HTTP 的 80/443 端口，便于穿透防火墙

广泛浏览器支持‌：所有主流现代浏览器均原生支持 ‌

3、与HTTP的区别

|--------|----------------|------------------|
| 特性 | HTTP | WebSocket |
| 连接方式 | 短连接，请求 - 响应即断开 | 长连接，一直保持 |
| 通信方向 | 只能客户端主动请求 | 双向随时推送 |
| 实时性 | 差（轮询 / 长轮询） | 高 |
| 开销 | 每次请求带大量头信息 | 仅握手时 HTTP 头，后续极小 |
| 适用场景 | 页面、接口、数据查询 | 聊天、直播、通知、大屏、游戏等 |

4、如何使用websocket

javascript 复制代码

// 1. 创建连接
const ws = new WebSocket('ws://localhost:8080'); // 或 wss://... 用于生产环境

// 2. 监听事件
ws.onopen = () => {
  console.log('连接已建立');
  ws.send('Hello Server!'); // 发送消息
};

ws.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 若服务端发送 JSON，需解析：JSON.parse(event.data)
};

ws.onclose = (event) => {
  console.log('连接关闭，代码:', event.code, '原因:', event.reason);
};

ws.onerror = (error) => {
  console.error('连接异常:', error);
};

// 3. 发送数据（必须为字符串）
ws.send(JSON.stringify({ type: 'login', user: 'alice' }));

// 4. 关闭连接（如页面卸载时）
window.addEventListener('beforeunload', () => {
  ws.close();
});

关键注意事项‌：

send() 只能传 ‌字符串‌，对象需用 JSON.stringify() 转换

发送前应检查 ws.readyState === WebSocket.OPEN（值为 1），避免在非开放状态发送报错 ‌

页面离开前务必调用 close() 防止连接泄漏 ‌