告别“刷新”：一文搞懂 WebSocket、SSE 与轮询机制

深度解析 WebSocket 和 Server-Sent Events：技术细节与应用场景

在现代 Web 开发中，实时交互已成为衡量用户体验的重要因素。无论是股票行情、AI 对话还是在线协作编辑，都需要服务器能够主动向客户端推送更新数据。为了实现这一目标，开发者经历了从“笨拙”的轮询到“优雅”的长连接技术的演进过程。

本文将深入探讨短轮询、长轮询、WebSocket 和 Server-Sent Events (SSE) 这四种常见的实时通信机制，并对比它们的技术细节和应用场景，帮助读者选择最适合自身需求的技术方案。

基础概念解析

短轮询

客户端每隔固定的时间（如 1 秒）向服务器发送一次 HTTP 请求。服务器无论是否有新数据都会立即返回响应，客户端处理后等待下一次请求。

原理：

• 客户端定时发请求
• 服务器立即响应（有数据返数据，无数据返空）
• 客户端处理响应并发起新的请求

缺点：

• 极其浪费带宽和服务器资源。大部分请求可能是无效的。
• 实时性受限于轮询间隔。

长轮询

客户端发送请求后，如果服务器没有新数据，则不会立即关闭连接而是将请求挂起，直到有数据更新或达到超时时间才返回响应。客户端收到响应后立即发起下一次请求。

原理：

• 客户端发请求
• 服务器挂起连接（等待数据）
• 数据更新 -> 服务器响应
• 客户端立即发送新请求

优点：

• 减少了无效请求，实时性比短轮询好。

缺点：

• 高并发下对服务器资源消耗大。

WebSocket

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。通过 HTTP 协议发起握手请求后，协商升级为 WebSocket 协议，建立持久连接，客户端和服务器可以随时互相发送数据。

原理：

• 客户端发起握手请求（Upgrade: websocket)
• 一旦握手成功，底层 TCP 连接保持打开
• 可以随时收发文本或二进制数据

特点：

• 真正的双向通信，低延迟。
• 支持发送二进制数据。

SSE (Server-Sent Events)

SSE 是一种基于 HTTP 的单向推送技术。客户端通过 EventSource API 建立长连接后，服务器可以随时将更新推送到客户端。

原理：

• 客户端建立 HTTP 长连接
• 服务器保持连接打开直到有新数据或超时
• 数据可用 -> 直接推送至客户端

特点：

• 单向推送（服务端到客户端）
• 原生支持断线重连机制。

核心区别对比表

深度解析：WebSocket vs SSE

协议与连接

• WebSocket: 使用 HTTP 进行握手后，升级为独立的 TCP 协议。
• SSE: 始终运行在 HTTP 上，并利用 Connection: keep-alive 特性保持长连接。

通信模式

• WebSocket: 双向数据传输（全双工）。
• SSE: 单向推送，仅服务端到客户端的数据传递。

健壮性和重连机制

• SSE: 内置自动重连机制，无需开发者手动处理复杂逻辑。
• WebSocket: 无原生自动重连，需要开发人员实现复杂的连接管理和心跳检测逻辑。

数据格式与传输能力

• WebSocket: 支持文本和二进制数据传输。
• SSE: 只能发送 UTF-8 编码的文本数据。

技术选型指南

选择 SSE 的场景

1. 服务器单向推送：如实时通知、股票行情等。
2. 数据量小且为文本类型。
3. 追求开发效率，不需要复杂的连接管理和心跳检测。
4. 移动端兼容性需求较高。

选择 WebSocket 的场景

1. 双向高频交互：如在线聊天、视频会议信令。
2. 高实时性和低延迟要求极高的应用。
3. 需要传输二进制数据的场景。

轮询方案

• 短轮询: 在不支持 SSE/WebSocket 的老旧浏览器或实时性要求较低的应用中适用。
• 长轮询: 作为 WebSocket/SSE 的降级方案，在网络环境恶劣时使用。

实现细节对比

SSE 事件源监听代码示例（前端）

const eventSource = new EventSource('/api/stream');

// 监听消息
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log('收到推送:', data);
};

// 监听自定义事件
eventSource.addEventListener('systemAlert', function(event) {
    console.log('系统警报:', event.data);
});

// 错误处理 (浏览器会自动尝试重连)
eventSource.onerror = function(err) {
    console.error("SSE 连接出错", err);
};

在以上代码中，EventSource 对象用于建立服务器发送事件（Server-Sent Events 或 SSE）的连接。每当服务器向客户端推送数据时，会触发 onmessage 事件，并将推送的消息作为参数传递给该事件处理函数。此外，还可以通过 addEventListener 方法来监听特定类型的自定义事件。当发生网络错误或意外断开连接时，浏览器会自动尝试重新建立与服务器的连接，并且会在控制台中记录错误信息。

WebSocket 实现代码示例（前端）

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

ws.onopen = () => {
    console.log('连接已建立');
    ws.send('Hello Server');
};

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

ws.onclose = () => {
    console.log('连接已关闭，需要手动实现重连逻辑...');
    // reconnect();
};

在 WebSocket 实现中，前端代码通过 new WebSocket 创建与服务器的 WebSocket 连接。当建立成功时，触发 onopen 事件并发送消息给服务端。每个收到的消息都会触发 onmessage 回调函数，并打印出收到的数据内容。此外，如果连接关闭（无论是正常关闭还是意外断开），则会引发 onclose 事件，此时需要手动实现重连逻辑来确保实时性。

总结

在现代 Web 开发中，短轮询和长轮询 已经逐渐被更高效的技术所取代。它们主要应用于需要兼容旧浏览器或作为 WebSocket 和 SSE 的备份方案的场景下。相比之下，SSE（Server-Sent Events） 由于其轻量级特性以及原生支持重连功能，在实现服务端向客户端单向推送数据的应用中非常受欢迎，如 AI 流式输出、实时通知系统等。

而 WebSocket 则适用于需要双向通信的场景，比如在线游戏和即时通讯应用。虽然 WebSocket 提供了更强的功能性，但由于其复杂的实现逻辑及维护成本较高，因此在选择时需权衡具体需求与技术复杂度之间的关系。

通过以上对比可知，在构建实时交互的应用中，开发者可以根据实际业务需求灵活选用合适的技术方案来满足不同场景下的功能和技术要求。