从 WebSocket 到 SSE，实时通信的轻量化趋势

在实时 Web 的世界里，WebSocket 长期以来一直被视为“黄金标准”。每当我们需要构建聊天应用、在线游戏或协同编辑工具时，它强大的全双工通信能力都使其成为不二之选。

然而，在许多场景下，我们真的需要如此“重型”的武器吗？

想象一下这些常见的需求：

• 一个实时更新的数据大屏，展示最新的业务指标。
• 一个新闻网站，向用户推送突发新闻。
• 一个后台系统，当耗时任务完成后给用户发送通知。

在这些场景中，数据流是单向的：从服务器到客户端。客户端只是一个被动的接收者。如果这时我们依然选择 WebSocket，就好像为了寄一封信而专门建立了一条双向的私人高速公路——功能强大，但过于复杂且成本高昂。

是时候认识一下 WebSocket 的轻量级表亲了：Server-Sent Events (SSE)。它用一种极其优雅和简单的方式，完美解决了单向数据推送的难题。

SSE 是什么？它为何如此轻量？

Server-Sent Events (SSE) 是一种允许服务器通过单个、持久的 HTTP 连接向客户端推送更新的技术。它的魅力在于它的极简主义。

1. 它就是 HTTP，别无其他

与 WebSocket 需要通过 ws:// 协议进行复杂的“升级握手”不同，SSE 完全运行在标准的 HTTP/HTTPS 之上。这意味着：

• 无需特殊的服务器：任何支持 HTTP 长连接的后端框架（Node.js, Python, Go, Java…）都能轻松实现。
• 无缝兼容现有网络：代理、防火墙、负载均衡器都能自然地处理 SSE，因为对它们来说，这只是一个尚未结束的 HTTP 请求。
• 更少的协议开销：没有复杂的帧封装，消息就是纯文本，简单直接。

2. 客户端简单到令人惊喜

在前端，你不需要引入任何第三方库。浏览器原生提供了 EventSource API，使用起来极其简单：

// 连接到服务器的事件流端点
const sse = new EventSource('/sse');
// 监听服务器发来的消息
sse.onmessage = (event) => {
    console.log('新消息:', event.data);
}
// 监听错误
sse.onerror = (err) => {
    console.error('SSE 发生错误:, err);
    // 最棒的是:浏览器会自动处理重连!
};

就是这么简单！没有复杂的连接状态管理，没有心跳检测，更没有手动重连逻辑。浏览器为你搞定了一切。

直观对比：SSE vs. WebSocket

一言以蔽之： 当你需要双向对话时，用 WebSocket。当你只需要听服务器“广播”时，SSE 是更聪明、更轻量的选择。

实战演示：一个简单的实时时钟

让我们看看用 Node.js (Express) 实现一个 SSE 服务有多简单。

后端 (server.js):

const express = require('express');
const app = express();
app.get('/sse', (reg，res)=>{
    // 设置 SSE 必需的头部信息
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
    });
    // 每秒向客户端发送一次当前时间
    const intervalId = setInterval(() => {
        // SSE 格式:`data:[你的数据]\n\n`
        res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
     }, 1000);
    // 当客户端关闭连接时，停止发送，避免资源浪费
    req.on('close', () => {
        clearInterval(intervalId);
        res.end();
    });
});
// 提供一个简单的 HTML 页面
app.get('/', (req, res) => {
    res.send(`
      <h1>SSE 实时时钟</h1>
      <div id="clock"></div>
      <script>
        const clock=document.getElementById('clock');
        const sse =new EventSource('/sse');
        sse.onmessage = (event) => {
          clock.textContent = event.data;
        };
      </script>
     `);
});
app.listen(3000, () =>{
    console.log('服务器运行在 http://lcalhost:3000');
});

后端代码清晰明了：设置头部，然后在一个循环里用 res.write() 发送格式化的数据即可。

前端代码更是嵌入在 HTML 中，只有短短几行。

结论：拥抱简单，选择合适的工具

技术的世界里没有银弹，只有最适合的工具。WebSocket 无疑是强大的，但它的强大也带来了相应的复杂性。对于大量存在的单向数据推送场景，我们完全可以放下手中的“重锤”，拾起 SSE 这把轻巧而锋利的“刻刀”。

下次当你需要实现一个实时数据看板或消息通知系统时，请问自己一个问题：“我真的需要客户端回话吗？”

如果答案是否定的，那么恭喜你，SSE 将以其无与伦比的轻量级魅力，为你节省大量的开发时间和维护成本，让你的应用更加简洁、高效和稳健。

以上关于从 WebSocket 到 SSE，实时通信的轻量化趋势的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。