在 JavaScript 中使用 Server-Sent Events 构建实时通信应用-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，实时通信已经成为了许多 Web 应用的必备功能。而在前端开发中，我们通常使用 WebSocket 或者 Ajax 长轮询等技术来实现实时通信。但是，这些技术都有各自的缺点，比如 WebSocket 需要建立长连接，而 Ajax 长轮询则会带来较大的服务器压力。那么，有没有一种更优秀的实时通信技术呢？答案是肯定的，那就是 Server-Sent Events（简称 SSE）。

Server-Sent Events 简介

Server-Sent Events 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流（event stream），客户端通过监听这些事件流来实现实时通信。相比于 WebSocket 和 Ajax 长轮询，SSE 具有以下优点：

不需要建立长连接，只需要普通的 HTTP 连接即可。
服务器可以主动向客户端推送数据，减少了客户端请求的次数和服务器的压力。
SSE 支持自定义事件类型和数据格式，具有更高的灵活性。

SSE 的使用

在 JavaScript 中使用 SSE 构建实时通信应用，主要分为以下两个步骤：

1. 建立 SSE 连接

要建立 SSE 连接，我们需要使用 EventSource 对象。EventSource 对象是 HTML5 中新增的一个 API，它用于接收服务器推送的事件流。使用 EventSource 对象建立 SSE 连接的代码如下：

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

上面的代码中，我们将 EventSource 对象实例化，并将 SSE 的地址设置为 /sse。这里的地址可以是任意一个 HTTP 地址，只要服务器能够正确地处理 SSE 请求即可。

2. 监听事件流

建立 SSE 连接后，我们需要监听服务器推送的事件流。服务器推送的事件流包含一个或多个事件，每个事件都由一个事件类型和一个数据组成。我们可以通过 EventSource 对象的 onmessage 和 onerror 事件来监听事件流的到达和错误信息。代码如下：

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理事件数据
};

eventSource.onerror = (event) => {
  // 处理错误信息
};

上面的代码中，我们通过 onmessage 事件监听事件流的到达，并使用 JSON.parse 方法将事件数据转换为 JavaScript 对象。在实际应用中，我们可以根据事件类型来处理不同的事件数据。

示例代码

下面是一个使用 SSE 实现实时消息推送的示例代码：

服务器端代码（使用 Node.js 和 Express 框架）

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

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

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

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

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

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

客户端代码

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

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

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

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

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

上面的代码中，我们使用 Express 框架搭建了一个 SSE 服务器，每隔一秒钟向客户端推送一条消息。客户端使用 EventSource 对象建立 SSE 连接，并监听服务器推送的消息，将消息显示在页面上。

总结

本文介绍了在 JavaScript 中使用 Server-Sent Events 构建实时通信应用的方法和示例代码。相比于 WebSocket 和 Ajax 长轮询，SSE 具有更优秀的性能和灵活性，可以满足大部分实时通信场景的需求。在实际应用中，我们可以根据具体的业务需求来选择合适的实时通信技术。

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

在 JavaScript 中使用 Server-Sent Events 构建实时通信应用