如何使用 SSE 实现服务端对客户端通知的自定义消息？-JavaScript中文网-JavaScript教程资源分享门户

前言

当我们的 Web 应用需要实时更新数据时，有多种方式可以实现，如 Ajax 轮询、WebSockets、Comet 等。不过，它们均不是基于标准协议的，或是需要依赖于复杂的其他服务器组件，比如转发器或消息队列。而另一种实现 Web 实时通信的方式是基于 Server-Sent Events （简称 SSE，又称服务器推送），这是一个标准化的浏览器和服务器的交互技术，而且能够用简单的 JavaScript 代码实现。

本文将讲解的内容:

理解 SSE
如何在服务端启动 SSE
如何在客户端接收 SSE

理解 SSE

SSE 是一种单向通信协议，它允许服务器向客户端推送数据。与 Ajax 轮询不同的是，SSE 是服务器将数据推送到客户端，而不是客户端主动向服务器寻求数据。这样可以减少服务器不必要的负载，不需要频繁的 HTTP 请求和响应。

SSE 的优点

实现简单：相比于其他实现实时更新的技术， SSE 的实现比较简单，只需要几行代码即可。
基于 HTTP 协议：SSE 请求和响应都是 HTTP，即使在高度安全的环境中，也比 WebSocket 更容易实施。
可靠性高：SSE 充分考虑了在浏览器和服务器之间的稳定性和可靠性，支持自动重连，保证了数据的可靠传输。

SSE 如何工作

SSE 是基于 HTTP 协议的，它定义了一种格式，服务器将数据以这种格式推送给客户端。SSE 的格式如下：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

event: update    #事件类型
data: Hello SSE   #事件数据

各字段的含义：

HTTP/1.1 200 OK ：HTTP 响应码和响应头。
Content-Type: text/event-stream：告诉浏览器返回的是一条 SSE。
Cache-Control: no-cache：告诉浏览器不要缓存 SSE。
Connection: keep-alive：告诉浏览器保持连接状态，保证 SSE 实时性。
event: update ：事件类型，可以自定义。
data: Hello SSE：事件数据。

如何在服务端启动 SSE

我们可以使用 Node.js 来启动 SSE。Node.js 提供了 http 模块，可以用来创建一个 HTTP 服务器。我们需要监听客户端的请求，当有请求时，向客户端推送数据，以达到实时更新数据的目的。

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

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

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

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

如何在客户端接收 SSE

要接收 SSE，我们可以使用 EventSource 对象。EventSource 是一个 API，它是浏览器内置的接收 SSE 的对象。在客户端代码中，我们只需要向服务端发送 SSE 请求，然后接收 SSE 数据，并进行相应的处理。

const eventSource = new EventSource("/sse");
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log(`${data.event}: ${data.message}`);
};

代码示例

服务端代码：

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

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

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

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

客户端代码：

const eventSource = new EventSource("/sse");
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log(`${data.event}: ${data.message}`);
};

总结

SSE 是实现 Web 实时通信的一种简单的方式，它能够简化我们的代码，并且在可靠性和性能方面都有所提升。SSE 在实时数据更新和在线监控等场景中，有着广泛的应用，值得我们去研究和使用。

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