在前端开发中，我们经常会需要实现长连接服务。传统的 HTTP 协议是无法实现长连接的，因为它是一种请求-响应模型的协议，每次请求都需要重新建立 TCP 连接。当我们需要实现实时更新数据、聊天室、直播等场景时，长连接服务就显得尤为重要。而实现长连接的方式有很多，比如 WebSocket、XHR 2.0、Server-Sent Events（以下简称 SSE）等。
本文将介绍 SSE 的实现方式，以及如何在前端代码中使用 SSE 实现长连接服务。同时，我们将提供一个完整的示例代码，以便读者更好地理解 SSE 的使用方式。
SSE 的实现方式
SSE 是一种基于 HTTP 协议的长连接服务，它允许从服务器推送数据到客户端。SSE 建立在 HTTP 连接的基础之上，通过 HTTP 协议的不断发送数据，实现了长连接服务。具体实现方式如下：
客户端向服务器发送一个普通的 HTTP 请求，请求头中包含一个
Accept: text/event-stream字段，这表示客户端希望接收服务器返回的 SSE 数据流。服务器接收到请求后，创建一个 SSE 数据流，并在头部添加
text/event-stream的 MIME 类型和Cache-Control: no-cache的缓存控制字段，然后将 SSE 数据流通过 HTTP 响应发送给客户端。服务器不断地向 SSE 数据流中添加数据，直到连接被断开。客户端不需要重新建立连接，就能够不断地接收到服务器推送的数据。
SSE 的使用方式
通过上述实现方式，我们已经成功地建立了一个 SSE 连接。接下来，我们需要在前端代码中使用 SSE 实现长连接服务。
在浏览器中建立 SSE 连接
在浏览器中，我们可以通过 JavaScript 的 EventSource 对象来建立 SSE 连接。可以通过以下代码进行创建：
const eventSource = new EventSource('http://localhost:3000/sse');上述代码中，我们创建了一个 EventSource 对象，并传入了需要建立 SSE 连接的 URL。在本示例中，URL 为 http://localhost:3000/sse。
监听 SSE 事件
建立 SSE 连接后，我们需要监听服务器向客户端推送的数据。可以通过以下代码进行监听：
eventSource.onmessage = (event) => {
console.log(event.data);
};上述代码中，我们通过 onmessage 事件监听服务器推送的数据。当服务器向客户端发送数据时，会触发 onmessage 事件。在本示例中，我们将接收到的数据输出到控制台上。
关闭 SSE 连接
当我们不需要使用 SSE 连接时，可以通过以下代码来关闭连接：
eventSource.close();
上述代码中，我们调用了 close 方法来关闭 SSE 连接。
示例代码
下面是一个完整的 SSE 示例代码，以便读者更好地理解 SSE 的使用方式。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
---
-------------- -- -
----- ---- - -
----- --- ----------------------
--
---------------- ------------------------------
-- ------
- ---- -
-------------------
----------
-
----------------
------------------- ------- -- ---- -------上述代码中，我们创建了一个基于 Node.js 的 HTTP 服务器，并在地址 http://localhost:3000/sse 上监听 SSE 连接。当客户端请求 SSE 连接时，服务器会每隔 1 秒钟向客户端推送一次时间数据。
浏览器端代码
-- -------------------- ---- ------- ----- ----------- - --- ----------------------------------------- --------------------- - ------- -- - ------------------------ -- ------------- -- - -------------------- -- -------
上述代码中，我们在浏览器中建立 SSE 连接，并监听服务器推送的数据。连接建立后，当服务器推送数据时，我们将数据输出到浏览器控制台。
同时，我们设置了一个 10 秒钟的计时器，当计时结束后，将关闭 SSE 连接。
总结
通过本文的介绍，我们了解了 SSE 的实现方式以及在前端代码中的使用方式。相对于传统的 HTTP 协议，SSE 更加适用于实时更新数据、聊天室、直播等场景，具有很高的实用性。希望本文对于读者对 SSE 的了解有所帮助，能够在实际开发中灵活运用 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d4bb5968c7c53b081ac1c