WebSocket上手教程大纲
🌐 WebSocket 上手教程：从入门到实战
📚 一、WebSocket 学习大纲（共6周）
🧱 二、WebSocket 核心知识详解
✅2.1 什么是 WebSocket？
WebSocket 是一种全双工通信协议，允许客户端和服务器之间建立一个持久连接，并在任意时刻互相发送数据。
- HTTP：请求/响应模式，只能客户端发起；
- WebSocket：双向通信，服务器可以主动推送消息给客户端；
✅2.2 WebSocket 的优势
🧪 三、WebSocket 客户端使用（浏览器端）
✅3.1 创建 WebSocket 连接
const socket = new WebSocket(\'ws://localhost:8080\');✅3.2 监听事件
// 连接成功socket.addEventListener(\'open\', function (event) { console.log(\'WebSocket 连接已建立\'); socket.send(\'Hello Server!\');});// 接收消息socket.addEventListener(\'message\', function (event) { console.log(\'收到消息:\', event.data);});// 错误处理socket.addEventListener(\'error\', function (event) { console.error(\'发生错误:\', event);});// 连接关闭socket.addEventListener(\'close\', function (event) { console.log(\'连接已关闭\');});✅3.3 发送消息
socket.send(\'这是一条文本消息\');socket.send(JSON.stringify({ type: \'login\', user: \'Alice\' }));⚙️ 四、WebSocket 服务端实现（Node.js 示例）
✅4.1 安装依赖
npm install ws✅4.2 简单的 WebSocket 服务器
const WebSocket = require(\'ws\');const wss = new WebSocket.Server({ port: 8080 });wss.on(\'connection\', function connection(ws) { console.log(\'客户端已连接\'); // 接收消息 ws.on(\'message\', function incoming(message) { console.log(\'收到消息:\', message.toString()); // 回复客户端 ws.send(`服务器回复: ${message}`); }); // 关闭连接 ws.on(\'close\', function () { console.log(\'客户端已断开连接\'); });});✅4.3 启动服务器
node server.js💬 五、实战项目：WebSocket 聊天室
✅5.1 功能描述
- 多用户在线聊天
- 支持广播消息
- 显示在线人数
✅5.2 客户端代码（HTML + JS）
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>WebSocket 聊天室</title></head><body> <input type=\"text\" id=\"messageInput\" placeholder=\"输入消息...\" /> <button onclick=\"sendMessage()\">发送</button> <div id=\"chatBox\"></div> <script> const socket = new WebSocket(\'ws://localhost:8080\'); socket.addEventListener(\'message\', function(event) { const chatBox = document.getElementById(\'chatBox\'); chatBox.innerHTML += `${event.data}`; }); function sendMessage() { const input = document.getElementById(\'messageInput\'); socket.send(input.value); input.value = \'\'; } </script></body></html>✅5.3 服务端广播逻辑增强
wss.on(\'connection\', function connection(ws) { ws.on(\'message\', function incoming(message) { // 广播给所有客户端 wss.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); });});📜 六、WebSocket 协议详解（RFC 6455）
✅6.1 握手过程（HTTP 升级）
-
客户端发送 HTTP 请求：
GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13 -
服务端响应升级协议：
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
✅6.2 数据帧格式（简略）
WebSocket 数据以“帧”为单位传输，包含以下字段：
FIN：是否是最后一个分片Opcode：操作码（如文本帧、二进制帧、关闭帧）Mask：是否加密Payload length：数据长度Masking-key：掩码密钥Payload data：实际数据
🎯 七、10大 WebSocket 高频面试题（含答案）
✅1. WebSocket 和 HTTP 的区别是什么？
✅2. WebSocket 如何实现心跳机制？
通过定时发送 ping 消息保持连接活跃：
setInterval(() => { if (socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: \'ping\' })); }}, 30000);🚨 服务端监听并返回 pong。
✅3. WebSocket 断线重连如何实现？
function connect() { const socket = new WebSocket(\'ws://localhost:8080\'); socket.onclose = () => { setTimeout(connect, 5000); // 5秒后重连 };}connect();✅4. WebSocket 如何传递 JSON 数据？
socket.send(JSON.stringify({ type: \'login\', user: \'Alice\' }));socket.onmessage = function(event) { const data = JSON.parse(event.data); console.log(data.type, data.user);};✅5. WebSocket 如何防止 XSS 或 CSRF？
- 使用 Token 认证；
- 设置 Origin 白名单；
- 不信任客户端传入的数据，做好过滤；
- 使用 HTTPS/WSS 加密传输。
✅6. WebSocket 是否支持跨域？
默认支持跨域，但可以通过服务端设置白名单进行控制：
const wss = new WebSocket.Server({ port: 8080, verifyClient: (info) => { const allowedOrigin = \'http://yourdomain.com\'; return info.origin === allowedOrigin; }});✅7. WebSocket 如何处理二进制数据？
socket.binaryType = \'arraybuffer\';socket.onmessage = function(event) { if (event.data instanceof ArrayBuffer) { const buffer = event.data; console.log(\'收到二进制数据:\', buffer); }};✅8. WebSocket 支持哪些数据类型？
- 文本（字符串）
- 二进制（ArrayBuffer）
- Blob（用于文件传输）
✅9. WebSocket 的性能瓶颈有哪些？
- 连接数上限（受系统资源限制）
- 消息频率过高导致内存溢出
- 编解码效率影响性能
- 大量并发连接需要负载均衡
✅10. WebSocket 是否适用于移动端？
- 移动网络不稳定，需做断线重连；
- 节省电量，避免频繁发送小包；
- 使用 WSS（WebSocket Secure）确保安全；
- 控制连接生命周期，避免后台长连接耗电。
