WHAT - 学习 WebSocket 实时 Web 开发

文章目录

• 一、基础知识了解
• • [1. WebSocket 是什么？](#1. WebSocket 是什么？)
  • [2. 它的优势：](#2. 它的优势：)
• 二、基本工作流程
• [三、快速体验：使用原生 WebSocket](#三、快速体验：使用原生 WebSocket)
• • [客户端（浏览器端 JS）：](#客户端（浏览器端 JS）：)
  • [服务端（Node.js 示例，使用 ws 库）](#服务端（Node.js 示例，使用 ws 库）)
• 四、深入学习建议
• 五、常见问题
• 六、进阶推荐
• 七、学习资料推荐

学习 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('客户端已断开');
  });
});

---

四、深入学习建议

内容	学习重点
WebSocket 协议	握手过程、协议头、状态码
安全性	wss:// 加密连接，身份验证、心跳保活机制
高级应用	聊天系统、实时协作、在线游戏
与 HTTP 的关系	了解 HTTP 和 WebSocket 如何配合使用
框架集成	使用 Socket.IO（封装更高级功能）或在 React/Vue 中使用 WebSocket hooks

---

五、常见问题

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

---

六、进阶推荐

• 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 实时聊天室项目