在前端开发中，实现实时数据传输往往是必须的。常见的方式包括 WebSocket、长轮询和 Server-sent Events（以下简称 SSE）。本文将重点介绍 SSE 技术及其完整实现方法，同时提供示例代码以方便学习和参考。
什么是 Server-sent Events
SSE 是基于 HTTP 的、单向消息推送技术。它允许服务器向客户端发送自定义的事件和数据，而无需客户端向服务器发出请求。SSE 通过长连接（长轮询）建立通信，从而实现实时信息传输。
SSE 的用途很广泛。比如，在社交网络中，当有人评论或点赞时，即可使用 SSE 将消息推送到其他在线用户的浏览器中。
实现 SSE 的步骤
下面，我们将介绍如何实现 SSE。步骤如下：
1. 设置服务器端代码
在服务器端，需要设置 URL 和事件响应器：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- --- ------- -------
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --- ----- --- ----
-------------- -- -
----------------- ------------
---------------- ----- -----------------------------------
-- ------
--------------- -- -- -
------------------- -- ------- -- ---- --------
---以上代码定义了响应用户请求的 URL 和事件响应器。在 http.createServer() 函数中，我们向 res 对象添加了 Content-Type、Cache-Control 和 Connection 请求头。接着，我们使用 setInterval() 函数每秒钟将当前时间推送给客户端。event 属性表示传递给客户端的事件名称，data 属性表示传递的数据内容，"\n\n" 表示信息结束。
2. 设置客户端代码
在客户端，需要调用 EventSource API 来接收服务器发送的消息。代码如下：
const evtSource = new EventSource('http://localhost:3000');
evtSource.addEventListener('message', (event) => {
console.log(event.data);
});以上代码监听 message 事件，并在控制台中打印传递的数据内容。当服务器向 res 写入数据时，客户端会收到该数据，并回调 message 事件。
3. 运行应用程序
现在，启动服务器和客户端代码，并在浏览器中打开客户端代码链接。你应该可以在控制台中看到类似以下结果：
14:24:08 14:24:09 14:24:10
使用 SSE 的注意事项
与其他实时数据传输技术相比，SSE 在某些方面具有一些优势。例如，它不需要手动管理连接。但使用 SSE 时，必须遵循以下注意事项：
- SSE 只能在 HTTPS 协议下使用。否则，安全问题可能会成为潜在的风险。
- 在服务器端，需要显式地设置消息响应头。这些头文件中包括
Content-Type、Cache-Control和Connection。 - SSE 主要用于单向消息传输，因此无法向服务器发送信息。如果需要双向通信，应考虑使用 WebSocket。
结论
本文探讨了 SSE 技术的用法和应用，并提供了实现步骤和示例代码。通过学习本文，你将能够更好地了解 SSE 的工作原理，进而在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771f6736d66e0f9aad333f0