HTML5 WebSocket

1. 引言

HTML5 引入了 WebSocket 技术，为 Web 应用提供了全双工通信能力。与传统的 HTTP 请求-响应模式不同，WebSocket 允许客户端和服务器实时双向通信，广泛应用于聊天、游戏和实时数据更新等场景。本文将系统介绍 WebSocket 的原理和用法，并通过实例展示其应用。

---

2. 什么是 HTML5 WebSocket？

2.1 定义

• WebSocket：一种基于 TCP 的协议，通过单个持久连接实现客户端与服务器间的双向通信。
• 标准：HTML5 的一部分，由 W3C 和 IETF 制定（RFC 6455）。
• 协议标识：ws://（未加密）或 wss://（加密，基于 TLS）。

2.2 与 HTTP 的区别

特性	HTTP	WebSocket
通信模式	请求-响应（单向）	全双工（双向）
连接	短连接（每次请求新建）	长连接（持久保持）
开销	高（头部信息多）	低（仅握手时有头部）
实时性	较差（需轮询）	优异（即时推送）

---

3. WebSocket 的工作原理

3.1 连接过程

1. 握手：

• 客户端发送 HTTP 请求（带有 Upgrade: websocket 头部）。
• 服务器响应 101 Switching Protocols，建立 WebSocket 连接。
• 示例请求头：
  GET /chat HTTP/1.1 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

1. 连接建立：握手完成后，切换为 WebSocket 协议。

3.2 通信机制

• 数据帧：通过轻量级帧传输数据，支持文本和二进制格式。
• 双向性：客户端和服务器可随时发送消息，无需等待响应。
• 关闭：任一方可发起关闭（通过关闭帧）。

---

4. WebSocket 的核心 API

4.1 创建连接

• 语法：const socket = new WebSocket(url);
• 参数：url（如 ws://example.com 或 wss://example.com）。

4.2 事件处理

事件	描述	示例
onopen	连接建立时触发	socket.onopen = () => console.log("连接成功");
onmessage	接收消息时触发	socket.onmessage = (e) => console.log(e.data);
onerror	发生错误时触发	socket.onerror = () => console.log("错误");
onclose	连接关闭时触发	socket.onclose = () => console.log("关闭");

4.3 发送和接收数据

• 发送：socket.send(data);（支持字符串、ArrayBuffer 等）。
• 接收：通过 onmessage 事件获取 event.data。
• 关闭：socket.close([code, reason]);。

---

5. WebSocket 的使用

5.1 客户端示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

const socket = new WebSocket("ws://localhost:8080"); socket.onopen = () => {   console.log("WebSocket 连接已建立");   socket.send("你好，服务器！"); }; socket.onmessage = (event) => {   console.log("收到消息:", event.data); }; socket.onerror = (error) => {   console.error("WebSocket 错误:", error); }; socket.onclose = () => {   console.log("WebSocket 连接已关闭"); };

5.2 服务端示例（Node.js + ws 库）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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("客户端断开");   }); }); console.log("WebSocket 服务器运行在 ws://localhost:8080");

• 运行方法：安装 Node.js 和 ws（npm install ws），保存为 server.js，运行 node server.js。

---

6. 实例：实时聊天应用

以下是一个简单的实时聊天示例：

客户端代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

实时聊天         发送

• 运行方法：保存为 chat.html，需配合服务端运行。

服务端代码（Node.js）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

const WebSocket = require("ws"); const wss = new WebSocket.Server({ port: 8080 }); wss.on("connection", (ws) => {   console.log("新用户已连接");   ws.on("message", (message) => {     // 广播消息给所有客户端     wss.clients.forEach((client) => {       if (client.readyState === WebSocket.OPEN) {         client.send(message);       }     });   });   ws.on("close", () => console.log("用户已断开")); });

• 运行方法：保存为 server.js，运行 node server.js。

效果

• 打开多个浏览器窗口访问 chat.html，输入消息后，所有窗口实时显示。

---

7. 最佳实践与注意事项

• 安全性：
• 使用 wss://（TLS 加密）保护数据传输。
• 验证客户端身份（如 Token）。
• 错误处理：
• 在 onerror 中记录问题。
• 提供连接断开后的重连机制。
• 性能：
• 限制消息频率，避免服务器过载。
• 使用二进制数据传输大文件。
• 兼容性：
• 现代浏览器广泛支持 WebSocket。
• 检查 Can I Use（caniuse.com）确认支持。
• 后备方案：对于不支持 WebSocket 的环境，可使用轮询。

---

8. 结论

HTML5 WebSocket 通过持久连接和双向通信，彻底改变了 Web 应用的实时性。本文介绍了其原理、API 和用法，并通过聊天实例展示了实际应用。如需更多 HTML5 技术，可参考 HTML5 简介 或访问 W3C 文档（w3.org）。

---

回答特点

• 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
• 实用性：从理论到实践，覆盖 WebSocket 核心知识。
• 内部链接：通过  跳转，如 WebSocket 的使用。
• 出站链接：嵌入正文，指向权威资源。

如何运行示例

1. 安装 Node.js 和 ws 库（npm install ws）。
2. 运行服务端（node server.js）。
3. 将客户端代码保存为 .html，在浏览器中打开。

资料来源:HTML5 WebSocket – 52kanjuqing-开发者社区,学的不仅是技术，更是梦想