在 Web 应用中，推送消息是一项非常重要的功能。例如，在在线聊天应用中，需要实时将消息推送给用户；在股票行情网站中，需要实时地推送股价等变化信息。在过去，实现这样的功能需要使用一些比较复杂的技术，如长轮询、WebSocket 等。而现在，我们可以使用一种简单而高效的技术——Server-Sent Events（SSE）。
Server-Sent Events 简介
Server-Sent Events 是一种传输文本数据的技术，允许服务器推送数据给客户端。与 WebSocket 相比，SSE 更加轻量级，适用于单向数据传输的场景。与长轮询相比，SSE 更加高效，因为它使用了HTTP/2 协议的多路复用功能。
使用 SSE，服务器会创建一个 HTTP 连接，把数据推送给客户端。客户端需要实现一个 EventSource 对象来接收推送的消息，当有新的数据到达时，EventSource 会自动将其传递给回调函数。
SSE 的优点
- 易于实现：与 WebSocket 相比，SSE 的实现更加简单。只需要使用 JavaScript 中的 EventSource 对象即可。
- 轻量级：SSE 只传输文本数据，不像 WebSocket 那样需要传输二进制数据，因此更加轻量级。
- 支持重连：如果连接断开了，EventSource 会自动尝试重新建立连接。
- 高效：SSE 使用了 HTTP/2 协议的多路复用功能，可以在单一连接上传输多个数据，从而提高传输效率。
SSE 的开发指南
1. 服务端代码
使用 SSE，在服务端需要设置 HTTP 头信息的 Content-Type 为 text/event-stream，以表明传输的数据是 SSE 格式的。在 Node.js 中，可以使用以下代码实现：
-- -------------------- ---- ------- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -- ------ ---------------------- - ----------------- ------------ ---------------- ------ ------------- -- ------
上述代码中，使用 setInterval 模拟每隔一秒发送一条消息给客户端。
2. 客户端代码
在客户端，需要使用 JavaScript 的 EventSource 对象接收服务端推送的数据。以下是一个示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- ------------------ - --------------- - --------------------- - ------------------- - --------------- - --------------------- ------- - --------------------------------------- --------------- - ------------------------ -- -------
在上述代码中，首先创建了一个 EventSource 对象，向 /sse 请求数据。当连接成功建立时，会调用 onopen 回调函数。当连接出现错误时，会调用 onerror 回调函数。最后，使用 addEventListener 方法添加消息回调函数，当有新的消息到达时，会调用此函数打印出消息内容。
总结
Server-Sent Events 是一种非常高效而又易于实现的数据推送技术，可以满足 Web 应用中大多数推送消息的需求。使用 SSE，不仅可以实时更新网页内容，还可以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b2154968c7c53b0a8dad8