JS WebSocket
学习WebSocket · 难度：高级 · +15XP
JavaScript WebSocket 实时通信详解
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，客户端和服务器之间可以保持长连接、实时双向传输数据，广泛用于聊天室、实时通知、在线游戏等场景。
WebSocket vs HTTP
| 特性 | HTTP | WebSocket |
|---|---|---|
| 通信方式 | 请求-响应（单向） | 全双工（双向） |
| 连接方式 | 短连接或长轮询 | 持久连接 |
| 协议标识 | http:// / https:// | ws:// / wss:// |
| 消息开销 | 每次请求都带完整请求头 | 仅需少量帧头信息 |
| 推送能力 | 需要轮询模拟推送 | 原生支持服务器推送 |
创建 WebSocket 连接
- 使用
new WebSocket(url)构造函数 - 通过事件监听器处理连接生命周期
- 使用
send()发送消息 - 使用
onmessage接收消息
// 创建 WebSocket 连接（wss 表示加密连接）
const ws = new WebSocket("wss://echo.websocket.org");
// 连接打开时触发
ws.onopen = () => {
console.log("连接已建立");
ws.send("Hello Server!");
};
// 接收到消息时触发
ws.onmessage = (event) => {
console.log("收到消息:", event.data);
};
// 连接关闭时触发
ws.onclose = (event) => {
console.log("连接已关闭，代码:", event.code);
};
// 发生错误时触发
ws.onerror = (error) => {
console.error("WebSocket 错误:", error);
};WebSocket 状态管理
| readyState | 值 | 含义 |
|---|---|---|
CONNECTING | 0 | 正在连接中 |
OPEN | 1 | 已连接，可通信 |
CLOSING | 2 | 正在关闭中 |
CLOSED | 3 | 已关闭 |
// 安全发送：只在连接打开时发送
function safeSend(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn("WebSocket 未连接，发送失败");
}
}
// 主动关闭连接
ws.close(1000, "客户端主动关闭"); // 1000 即正常关闭