WebSocket是浏览器与服务器间建立持久化、全双工通信通道的标准协议，一次HTTP握手后保持长连接，双方可随时主动收发消息，适用于聊天、实时通知等低延迟场景。
WebSocket 是浏览器与服务器之间建立持久化、全双工通信通道的标准方案，适合需要低延迟、双向实时交互的场景（比如聊天、实时通知、协同编辑、行情推送等）。它不是 HTTP 请求-响应模型，而是一次握手后长期保持连接，双方可随时主动发消息。
1. 前端：创建 WebSocket 连接并监听事件
使用 new WebSocket(url) 初始化连接，注意协议为 ws://（开发）或 wss://（生产，需 HTTPS）。关键事件有四个：
- onopen：连接成功建立，此时可发送首次消息
- onmessage：收到服务器推送的数据（event.data 是字符串或 Blob）
- onerror：连接异常（如网络中断、跨域失败），但不触发重连
- onclose：连接关闭（可能是服务端断开、主动 close() 或网络故障）
示例代码：
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('已连接');
ws.send(JSON.stringify({ type: 'auth', token: 'xxx' })); // 登录鉴权
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('收到消息:', data);
if (data.type === 'notify') {
showNotification(data.content);
}
};
ws.onerror = (err) => {
console.error('WebSocket 错误:', err);
};
ws.onclose = (e) => {
console.log('连接已关闭', e.code, e.reason);
};
2. 后端：用 Node.js（ws 库）搭建简单服务端
以轻量级 ws 库为例（npm install ws），它比 Socket.IO 更底层、更贴近原生协议，适合自定义协议和高性能场景：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 每个连接对应一个 WebSocket 实例，通过 send() 向该客户端发消息
- 用 clients 集合（如 Set）管理在线连接，便于广播或定向推送
- 建议在 message 事件中解析 JSON，并做基础校验（如 type 字段）
- 连接断开时记得从 clients 中删除，避免内存泄漏
服务端示例（Express 共存）：
const WebSocket = require('ws');
const express = require('express');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
wss.clients = new Set(); // 存储所有活跃连接
wss.on('connection', (ws, req) => {
console.log('新客户端接入');
wss.clients.add(ws);
ws.on('message', (data) => {
try {
const msg = JSON.parse(data);
if (msg.type === 'broadcast') {
// 向所有客户端广播（除自己）
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ type: 'echo', text: msg.text }));
}
});
}
} catch (e) {
ws.send(JSON.stringify({ error: '无效 JSON' }));
}
});
ws.on('close', () => {
console.log('客户端断开');
wss.clients.delete(ws);
});
ws.on('error', (err) => {
console.error('WS 错误:', err);
});
});
3. 关键细节与常见问题处理
WebSocket 看似简单，但实际落地时几个点容易踩坑：
-
连接前先检查支持性：
if ('WebSocket' in window) { ... }，老版 IE 不支持（IE10+ 才行） - 自动重连机制要自己实现：onclose 后可延时调用 new WebSocket()，建议加退避策略（如 1s → 2s → 4s）
- 心跳保活不能少：服务端常设 30–60 秒超时，前端应定时 send('ping')，服务端 reply('pong')，否则连接可能被代理或防火墙静默断开
- 消息粘包/分片不用管：WebSocket 协议层已处理帧边界，每次 onmessage 对应一个完整 message（除非显式用 blob/binaryType）
-
跨域限制由服务端控制：WebSocket 不受同源策略限制，但服务端需校验 Origin 或放行（
ws.createServer({ verifyClient })）
4. 进阶建议：协议设计与安全加固
真实项目中，不建议裸传原始数据。推荐约定轻量通信协议：
- 每条消息含 id（用于前端去重或应答）、type（如 login / data / ack）、payload（业务数据）
- 敏感操作（如下单、改密码）必须走 HTTPS + WSS，并在 WebSocket 握手阶段完成身份校验（如传 token 到 URL 或 upgradeReq.headers）
- 服务端对高频发送做限流（如单连接每秒最多 10 条），防恶意刷消息
- 大文件传输建议改用 HTTP 分片上传 + WebSocket 仅推状态，避免阻塞信道
不复杂但容易忽略。WebSocket 的核心价值在于“连接即通道”，把思维从“请求一次拿结果”切换到“连接常驻、按需收发”。
