什么是 Server-sent Events？
Server-sent Events（SSE）是一种 HTML5 的 API，它允许服务器向客户端推送数据。相比于传统的轮询方式，SSE 可以实现实时的、双向的通信，而且不会导致过多的网络流量。
如何使用 Server-sent Events？
在客户端，我们可以使用 Javascript 的 EventSource 对象来接收来自服务器的 SSE 数据。下面是一个简单的例子：
----- ----------- - --- ----------------------- --------------------------------------- ----- -- - ------------------------ --- ------------------------------------- -- -- - ---------------- ---------- -------- ---
在服务器端，我们需要设置 SSE 的响应头和发送数据。下面是一个 Node.js 的例子：
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
---
--------------------在这个例子中，我们创建了一个 HTTP 服务器，并设置了响应头。然后，我们使用 setInterval 定时向客户端发送数据。
Server-sent Events 的最佳实践
1. 使用正确的 MIME 类型
在设置 SSE 的响应头时，我们应该使用正确的 MIME 类型 text/event-stream。这个 MIME 类型告诉浏览器，这个响应是 SSE 数据流。
2. 发送正确的响应头
在 SSE 的响应头中，我们应该设置 Cache-Control: no-cache 和 Connection: keep-alive。这样可以确保数据能够实时地推送到客户端，而且不会占用过多的网络带宽。
3. 发送正确的数据格式
在 SSE 中，每条消息都应该以 data: 开头，并以两个换行符 \n\n 结尾。这样可以确保浏览器能够正确地解析数据。
4. 处理 SSE 连接错误
在客户端，我们应该监听 error 事件，并在事件处理函数中处理 SSE 连接错误。这样可以确保 SSE 连接出现错误时，我们能够及时地处理。
示例代码
下面是一个完整的示例代码，它可以实现每秒钟向客户端推送当前时间：
-- ----
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
---
--------------------
-- ---
----- ----------- - --- -----------------------
--------------------------------------- ----- -- -
------------------------
---
------------------------------------- -- -- -
---------------- ---------- --------
---总结
Server-sent Events 是一种非常有用的技术，它可以实现实时的、双向的通信。在使用 SSE 时，我们应该遵循一些最佳实践，比如使用正确的 MIME 类型、发送正确的响应头、发送正确的数据格式、处理 SSE 连接错误等。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d44047add4f0e0ffc4627a