在前端开发中，实时通信是一个非常重要的需求。为了满足这个需求，WebSockets 是一个非常流行的方案。但是 WebSockets 有些缺点，例如需要协商连接等，而这些协商过程是一些轻量级的通信场景所不需要的，因此需要一些更轻量级的解决方案来解决这个问题。
SSE（Server-Sent Events，服务器推送事件）是一个轻量级的通信协议，用来实现服务器向客户端推送数据的功能。SSE 的优点在于它使用了 HTTP 协议，可以保持和 HTTP 的兼容性，避免了像 WebSockets 那样需要进行通信协商的过程。这使得 SSE 能够更加简单地实现实时通信。
在本文中，我们将介绍如何使用 SSE 实现客户端与服务端的实时通信。我们将从如何创建 SSE 服务器开始，一步步介绍 SSE 的相关知识，并提供一些示例代码，帮助您了解 SSE 在实际场景中的应用。
创建 SSE 服务器
首先，我们需要创建一个 SSE 服务器。这个服务器会监听一个端口，并在接收到客户端的请求后，向客户端推送数据。下面是一个简单的 SSE 服务器的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- --------------- -
---------------- -----
- ---- -
-------------------
----------
-
---
-------- ---------------- ---- -
-- ----
------------------------------ ------------
----------------------------- ---------------------
--------------------------- --------------
-------------------
-- -------
---------------------
-- --------------
-------------- -- -
----- ------- - - ----- --- --------------------- --
----------------- -----------
---------------- ---------------------------------
-- ------
-
--------------------在代码中，我们创建了一个 HTTP 服务器，并在 /eventstream 路由下监听客户端的请求。当收到请求后，我们调用 generateSSE 函数生成 SSE 数据流。在 generateSSE 函数中，我们首先设置一些 HTTP 头，包括响应的 MIME 类型和连接类型。
接着，我们向客户端发送一条初始化响应。需要注意的是，这条响应的内容是 :ok，并且响应头和内容之间有一个空行。这是因为 SSE 数据流中，每条消息之间必须有一个空行，而初始化响应属于第一条消息。
最后，我们使用 setInterval 函数每隔一秒向客户端发送一条消息。这条消息的格式采用了 SSE 协议规定的格式，包括事件名称、数据等。
现在，我们已经成功创建了一个 SSE 服务器，可以向客户端推送数据了。
SSE 基本概念
在继续介绍 SSE 的使用方法之前，让我们来了解一下 SSE 的基本概念。
SSE 数据流
SSE 数据流是一组 SSE 消息的集合。它采用了纯文本的格式，每条消息之间由一个空行分隔。
SSE 消息
SSE 消息是 SSE 数据流中的最小单位。一个 SSE 消息由多个字段组成，包括：
- 事件名称
- 数据
- ID
其中，事件名称和数据是必须的字段。事件名称用于描述这个消息的类型，数据则是消息的内容。ID 字段是可选的，用于标识这条消息。
事件流
客户端通过一个名为“事件流”的接口与 SSE 服务器进行通信。服务器推送的 SSE 消息将通过这个接口传送给客户端。
事件源
一个 SSE 服务器可以同时向多个客户端推送数据。每个客户端都是一个事件源，在事件源关闭前，服务器会为这个事件源保持连接状态。
SSE 客户端
现在我们已经成功创建了一个 SSE 服务器，接下来，让我们在客户端中接收这个 SSE 数据流。
在客户端中，我们可以使用 JavaScript 的 EventSource 对象与 SSE 服务器进行交互，代码如下：
-- -------------------- ---- ------- ----- ----------- - --- ---------------------------- -------------------------------------- ------- -- - ------------------------------------ --- ------------------------------------- ------- -- - ------------------ ------ ----------- ---
在代码中，我们创建了一个 EventSource 对象，并将 /eventstream 作为其参数，表示我们要接收的 SSE 数据流的来源。接着，我们使用 addEventListener 方法监听了 update 事件，当 SSE 服务器推送消息时，我们将在控制台中打印出这条消息的内容。我们还监听了 error 事件，并在发生错误时将错误信息打印在控制台中。
现在，我们已经成功在客户端中接收 SSE 数据流了。
SSE 实际应用
SSE 的实际应用非常广泛，例如聊天室应用、股票行情等实时场景都可以使用 SSE 来实现。
下面是一个简单的 SSE 聊天室应用的例子，代码如下：
-- -------------------- ---- -------
-- --- ---
----- ---- - ----------------
----- -- - --------------
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
----- -------- - ----------------------------------
-- --------- --- --------------- -
----- ------------ - ------------------------- - --------- ------- ---
------------------ - --------------- ----------- ---
------------------------
----------
- ---- -- --------- --- --------- -
----- ---- - ------------------ ------------
--------------- ----- ---------- -------- ------------ ---
-------------- - ----
------------------------- ---------------
----------
- ---- -- --------- --- --------------- -
---------------- -----
- ---- -
-------------------
----------
-
---
----- -------- - ---
-------- ---------------- ---- -
------------------------------ ------------
----------------------------- ---------------------
--------------------------- --------------
-------------------
---------------------
-------------- -- -
-- ---------------- - -- -
----- ------- - -----------------
----------------- ------------
---------------- ---------------------------------
-
-- ------
-
--------------------
-- --- ---
----- ----------- - --- ----------------------------
--------------------------------------- ------- -- -
----- ---- - -----------------------
----- ----------- - ---------------
----- ---------- - --------------------- ------------------------
-------------------------------
---
---------------------- -- -- -
----- ---- - -----------------
----- ------- - --------------------
--------
---- --------
----- - ----- ------- --
---
---在这个例子中，我们创建了一个简单的 SSE 聊天室应用。在服务端，我们首先定义了一个数组 messages，用于存储用户发送的消息。当用户通过 /send 路由发送消息时，我们将这个消息存储到 messages 数组中。当有客户端连接到 /eventstream 路由时，我们会为这个客户端保持连接状态，并在 messages 数组中有新的消息时，向客户端发送一条 message 事件，携带消息的内容。
在客户端中，我们首先创建了一个 EventSource 对象，并接收服务器推送的 message 事件。当有新的消息时，我们将消息内容显示在页面上。同时，我们还使用 AJAX 将用户输入的消息发送给服务器。
现在，我们已经成功创建了一个简单的 SSE 聊天室应用。这个例子中，我们使用了 SSE 在客户端和服务端之间实现了实时通信。
总结
在本文中，我们介绍了 SSE 协议，并使用 SSE 实现了客户端与服务端的实时通信。我们从如何创建 SSE 服务器开始，介绍了 SSE 的基本概念，并提供了一些实际应用的示例代码。
SSE 是一种非常轻量级的通信协议，可以实现非常简单、高效的实时通信功能。如果您需要实现实时通信功能，不妨考虑一下使用 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471ac62968c7c53b0f8f811