Server-Sent Events 实现服务器到客户端的持续推送通知-JavaScript中文网-JavaScript教程资源分享门户

在 Web 应用中，服务器和客户端之间的通信是非常重要的一个环节。WebSocket 和 Webhook 都是常见的解决方案，但也有一些情形不需要实时双向通信。这时候，服务端推送事件（Server-Sent Events, SSE）就是一个很好的解决方案了。

SSE 是一种基于 HTTP 的服务器到客户端的单向实时通信技术，它可以让服务器向客户端推送更新后的数据，而无需客户端拉取。客户端通过一个 EventSource 对象监听服务端发送过来的事件，从而实现实时通知。

实现 SSE 的基本步骤

以下是实现 SSE 的基本步骤：

在服务端设置 MIME 类型为 text/event-stream，并以 Content-Type: text/event-stream 形式发送响应；
在服务端发送格式正确的数据，每个数据块必须遵循以下格式：

event: {event name}
data: {data}

在客户端监听服务端发送过来的事件，并以 onmessage() 方法处理数据。

值得注意的是，在每一个数据块的最后面都需要加上一个空行，以表示该数据块发送完成。这个空行非常重要，否则客户端将不会收到任何数据。

一个基本的 SSE 示例

以下是一个基本的 SSE 示例，它展示了如何在服务器和客户端之间发送 SSE 数据：

服务端代码：

-- -------------------- ---- -------
----- ---- - ----------------

----- ------ - ----------------------- ---- -- -
  ------------------ -
    --------------- --------------------
    ---------------- -----------
  ---

  ----- ---------- - -- -- -
    ----- ---- - ------ -------------------
    ----------------
  --

  ----------------------- ------
---

--------------------

以上代码启动一个 HTTP 服务器，并设置响应头信息为 text/event-stream。在每 1 秒钟的时间里，该服务器向客户端发送当前时间。Cache-Control: no-cache 表示响应不能被客户端缓存。

客户端代码：

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

以上代码监听服务器发送过来的事件，并在控制台输出数据。

SSE 的兼容性

SSE 的兼容性非常好，主流的浏览器（Chrome、Firefox、IE、Edge、Safari）都支持 SSE。在兼容性方面，SSE 要比 WebSocket 好一些。

总结

SSE 技术可以使服务器向客户端实时推送数据，可以有效地减少客户端的网络请求。它可以应用于一些不需要实时双向通信的场景，如在线聊天、数据监控、股票交易等。

值得注意的是，在实际应用中，需要考虑到 SSE 的安全性和可靠性，并为其添加重连机制。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6496b77148841e98943f2df3