95. 服务器推送入门（WebSocket 与 SSE）

本节目标：理解 WebSocket 和 SSE 各自的用途，学会创建基本连接，知道什么场景选哪个。

传统 HTTP 的问题

HTTP 是”一问一答”模式。客户端不发请求，服务器就不能主动推送消息。实时聊天、股票行情这种场景，只能靠轮询（定时发请求），又浪费又慢。

WebSocket 和 SSE 就是来打破这个限制的。

WebSocket：双向通信

WebSocket 建立后，客户端和服务器都能随时发消息，不需要请求-响应模式。

最小示例（客户端）

// 连接服务器（注意 ws:// 或 wss://）
const socket = new WebSocket("wss://echo.websocket.org");

// 连接建立
socket.onopen = function () {
  console.log("连接成功");
  socket.send("你好服务器");
};

// 收到消息
socket.onmessage = function (e) {
  console.log("收到：", e.data);
};

// 连接出错
socket.onerror = function (e) {
  console.error("连接出错", e);
};

// 连接关闭
socket.onclose = function () {
  console.log("连接已关闭");
};

完整 HTML 示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input id="msg" placeholder="输入消息">
  <button onclick="send()">发送</button>
  <ul id="log"></ul>

  <script>
    const socket = new WebSocket("wss://echo.websocket.org");
    const log = document.getElementById("log");

    socket.onmessage = function (e) {
      const li = document.createElement("li");
      li.textContent = "收到：" + e.data;
      log.appendChild(li);
    };

    function send() {
      const text = document.getElementById("msg").value;
      socket.send(text);
      document.getElementById("msg").value = "";
    }
  </script>
</body>
</html>

Note

wss://echo.websocket.org 是公共测试服务器。收到什么回什么，方便测试。实际开发换成你自己的服务器地址。

WebSocket 事件一览

事件	说明
`onopen`	连接建立成功
`onmessage`	收到服务器消息
`onerror`	连接出错
`onclose`	连接关闭

SSE：服务器单向推送

Server-Sent Events（SSE）更简单：只能服务器往客户端推，客户端不能通过这个通道发消息。

最小示例（客户端）

const source = new EventSource("/api/events");

source.onmessage = function (e) {
  console.log("收到推送：", e.data);
};

source.onerror = function () {
  console.error("连接出错");
};

服务器端需要返回 text/event-stream 类型的响应：

data: 第一条消息

data: 第二条消息

两者对比

特性	WebSocket	SSE
通信方向	双向	单向（服务器到客户端）
协议	ws:// / wss://	HTTP
复杂性	较复杂	非常简单
重连	需要自己实现	浏览器自动重连
适合场景	聊天、协作、游戏	股票行情、新闻推送、日志流
服务器支持	需要 WebSocket 服务器	普通 HTTP 服务器即可

Tip

如果你只是需要服务器主动推送，SSE 就够了。它基于 HTTP，配置简单，浏览器自动重连。双向通信才需要 WebSocket。

选型建议

需要服务器主动通知客户端？
├── 需要双向通信（客户端也要随时发）？
│   └── 是 → WebSocket
│   └── 否 → SSE 足够
└── 不需要 → 普通 HTTP 请求

生产环境注意

生产环境必须用 wss://（加密的 WebSocket）
连接可能断开，需要有重连机制
WebSocket 需要专门的服务器支持（Node.js 的 ws 库、Go 的 gorilla/websocket 等）
SSE 用普通 HTTP 服务器就行，但要注意连接数限制

Warning

本节只是入门了解。WebSocket 服务端开发、消息协议设计、大规模连接管理等是独立的大课题，超出 HTML5 教程范围。