WebSocket 入门指南：实现网页和服务器之间的实时通信

在你开发网页或 App 的过程中，可能会遇到这样的需求：

• 聊天室消息要“秒级”刷新
• 实时推送系统通知给用户
• 股票、天气、游戏数据要“实时更新”
• 后台想知道客户端有没有掉线

这些功能，如果用普通的 HTTP 请求来实现，要么得不停轮询，要么会有延迟和浪费资源。这时候，就需要 WebSocket 这种“实时通信技术”。

---

一、什么是 WebSocket？

WebSocket 是一种在客户端（浏览器）和服务器之间建立的持久连接通道**，它允许双方随时互相发送消息，而不需要重复建立连接。

一句话概括就是：

WebSocket = 浏览器和服务器之间的“实时双向通道”

---

二、WebSocket 和 HTTP 有什么区别？

项目	HTTP	WebSocket
连接方式	每次请求都重新连接	一次连接后保持不断开
通信方向	客户端主动请求，服务端只能响应	双向通信，服务端也能主动发消息
实时性	差，要靠轮询或长轮询模拟实时	好，消息可实时推送
资源消耗	频繁请求、重复建立连接	长连接、低开销

打个比方：

• HTTP 是“一问一答”：你问一句，我答一句，完了就挂电话。
• WebSocket 是“打电话”：你们之间的通话不会断，随时都能说话。

---

三、WebSocket 的工作流程是怎样的？

1. 建立连接
   浏览器通过 HTTP 向服务器发起“升级请求”，想把普通连接变成 WebSocket。

2. 服务器响应升级
   服务器同意并切换协议，建立 WebSocket 连接。

3. 开始通信
   双方通过这个连接可以随时发送/接收消息。

4. 关闭连接
   一方断开连接后，通信结束。

连接示意图：

浏览器 ——建立连接——→ 服务器
浏览器 ←——推送消息———→ 服务器

---

四、使用 WebSocket 有多简单？

来看一个简单的示例（前端 + 后端）：

🌐 前端代码（HTML + JS）

<script>
  const ws = new WebSocket("ws://localhost:8000/ws");

  ws.onopen = () => {
    console.log("连接成功");
    ws.send("你好，服务器！");
  };

  ws.onmessage = (event) => {
    console.log("收到消息：" + event.data);
  };

  ws.onclose = () => {
    console.log("连接已关闭");
  };
</script>

🖥️ 后端代码（Python + FastAPI）

from fastapi import FastAPI, WebSocket
app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"你说：{data}")

运行后，前端发送消息，后端马上能“推回消息”，非常流畅！

---

五、WebSocket 常见应用场景

场景	示例
实时聊天	微信、QQ群聊、客服系统
实时推送	通知提醒、系统广播
实时监控	服务器日志、数据看板
实时游戏	玩家状态同步、对战交互
金融系统	股票、币价行情、交易撮合
物联网设备	远程指令下发、设备状态上报

---

六、WebSocket 使用中的注意事项

• ✅ 连接管理：客户端掉线、断网、刷新页面后，服务端要能检测到断开。
• ✅ 心跳机制：为了防止连接断了不自知，通常定期发送“ping/pong”消息。
• ✅ 权限认证：WebSocket 连接不能像普通接口一样加 token，需要在“连接建立时”就认证好身份。
• ✅ 连接数量限制：每个服务器支持的 WebSocket 连接数有限，需合理分布或用中间件（如 Nginx）。

---

七、常用工具与库

• 前端原生支持：WebSocket 类（无需引入额外库）

• 后端框架支持：

  • FastAPI：原生支持 WebSocket
  • Django Channels：为 Django 提供异步通信能力
  • Socket.IO：更强大的“带有重连、事件机制”的 WebSocket 封装库
  • Node.js + ws：轻量级 WebSocket 实现

---

八、适合初学者的学习路线

1. ✅ 学会用浏览器原生 WebSocket 类
2. ✅ 使用 Python（FastAPI）或 Node 写一个简单服务端
3. ✅ 实现发送、接收、断开监听等功能
4. ✅ 加入心跳包、重连逻辑
5. ✅ 思考如何接入用户身份、聊天记录存储

---

那我们总结一下吧

关键词	描述
WebSocket 是什么	一种支持“客户端和服务端双向实时通信”的协议
有什么用	替代轮询，构建实时推送功能
怎么用	浏览器直接调用 WebSocket 接口，后端监听并响应
对比 HTTP	实时性更强、双向、节省资源
适合谁学	所有希望做“实时功能”的前端/后端开发者

WebSocket 就是“浏览器和服务器之间的实时通道”，让你写出的系统能“听得到、秒响应”。