好的，我们来系统性地了解 WebSocket 及其使用方法。
一、WebSocket 是什么？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端（如浏览器）和服务器之间建立持久连接，实现数据的实时双向传输，解决了传统 HTTP 轮询（Polling）或长轮询（Long Polling）的低效问题。
核心特点：
二、WebSocket 工作原理
握手阶段
客户端通过 HTTP 发起升级请求，头部包含：
GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
服务器返回 101 Switching Protocols 确认升级：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
数据传输阶段
握手成功后，双方通过数据帧（Data Frames） 传输数据，格式为二进制或文本。
三、WebSocket 使用方法
1. 客户端（浏览器）示例
使用 JavaScript 原生 API：
// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/chat');
// 监听连接打开事件
socket.onopen = () => {
console.log('连接已建立');
socket.send('Hello Server!'); // 发送数据
};
// 监听接收消息事件
socket.onmessage = (event) => {
console.log('收到消息:', event.data);
};
// 监听错误事件
socket.onerror = (error) => {
console.error('连接错误:', error);
};
// 监听连接关闭事件
socket.onclose = () => {
console.log('连接已关闭');
};
2. 服务端示例（Node.js）
使用 ws 库（需安装 npm install ws）：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 接收客户端消息
ws.on('message', (message) => {
console.log('收到消息:', message);
ws.send(`服务器回复: ${message}`); // 回复客户端
});
// 连接关闭
ws.on('close', () => {
console.log('客户端断开连接');
});
});
四、进阶技巧
心跳检测
定期发送 ping/pong 帧维持连接：
// 客户端
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'ping' }));
}
}, 30000);
重连机制
连接断开后自动重连：
function connect() {
const socket = new WebSocket('ws://example.com/chat');
socket.onclose = () => setTimeout(connect, 1000); // 1秒后重连
}
数据格式
建议使用 JSON 结构化数据：
// 发送
socket.send(JSON.stringify({ action: 'join', room: 'tech' }));
// 接收
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data.action);
};
五、应用场景
六、注意事项
安全性
- 生产环境使用 wss://（基于 TLS 加密）。
- 验证来源（Origin 头）防止跨站劫持。
兼容性
现代浏览器均支持 WebSocket，但需考虑降级方案（如 SSE 或轮询）。
资源管理
及时关闭闲置连接，避免服务器资源耗尽。
七、替代方案对比
| WebSocket | 双向、低延迟、持久连接 | 高频双向交互（如游戏） |
| Server-Sent Events (SSE) | 单向（服务器→客户端） | 新闻推送、实时监控 |
| HTTP Long Polling | 模拟实时，高延迟 | 兼容旧系统 |
总结
WebSocket 是实现实时通信的高效协议，通过简单的 API 和轻量级的数据交换，极大提升了 Web 应用的交互体验。结合心跳检测、重连机制和结构化数据，可构建稳定可靠的实时系统。
如需快速开发，可使用成熟库如：
- 客户端：Socket.IO、SockJS
- 服务端：ws（Node.js）、Spring WebSocket（Java）、Django Channels（Python）
希望这篇教程助你掌握 WebSocket 的核心用法！
