WHAT - 学习 WebSocket 实时 Web 开发

学习 WebSocket 是掌握实时 Web 开发的重要一步。下面是一个从 0 到 1 学习 WebSocket 的路线图，帮助你系统性入门：

一、基础知识了解

1. WebSocket 是什么？

• WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。
• 相比 HTTP，WebSocket 不需要反复建立连接，适合实时性强的场景，比如：聊天室、在线游戏、实时通知等。

2. 它的优势：

• 持久连接（只建立一次 TCP 连接）
• 双向通信（服务器可以主动推送消息）
• 低延迟、低开销

二、基本工作流程

1. 客户端发起连接请求
   浏览器发起 WebSocket 握手请求。
2. 服务器响应
   如果服务器支持，会返回 101 状态码，表示协议切换成功。
3. 双向通信开始
   双方可以互发消息。
4. 关闭连接
   一方发起关闭，另一方确认，连接结束。

三、快速体验：使用原生 WebSocket

客户端（浏览器端 JS）：

const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
  console.log('连接已建立');
  socket.send('你好，服务器');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

socket.onclose = () => {
  console.log('连接已关闭');
};

socket.onerror = (error) => {
  console.error('发生错误:', error);
};

服务端（Node.js 示例，使用 ws 库）

npm install ws

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  console.log('客户端已连接');

  ws.on('message', (message) => {
    console.log('收到消息:', message);
    ws.send(`你说的是：${message}`);
  });

  ws.on('close', () => {
    console.log('客户端已断开');
  });
});

四、深入学习建议

五、常见问题

• 如何做断线重连？
• 如何心跳保活？
• 如何做消息可靠传输？
• 如何做多用户/房间管理？

六、进阶推荐

• Socket.IO（Node.js）：封装了 WebSocket 和长轮询，使用简单功能强大。
• NestJS + WebSocket Gateway：适合在企业级 Node 应用中集成。
• 前端封装 WebSocket hook：如 useWebSocket Hook 在 React 项目中使用。

七、学习资料推荐

1. MDN WebSocket 文档
2. ws 官方文档
3. Socket.IO 官网
4. B站搜索：WebSocket 实时聊天室项目