什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种 HTML5 技术，用于在客户端和服务器之间实现实时数据传输。与 WebSocket 不同，SSE 是基于 HTTP 协议的，因此可以在大多数浏览器中使用。
SSE 允许服务器向客户端推送数据，而无需客户端发起请求。这使得 SSE 成为一种非常适合实时通信的选择，例如实时聊天应用程序、股票报价、新闻更新等。
如何使用 Server-Sent Events？
服务器端
在服务器端，我们需要创建一个 HTTP 端点来向客户端发送 SSE 事件。以下是一个使用 Node.js 和 Express 框架的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
-- -- --- --
-------------- -- -
----- ---- - -
-------- ------- --------
---------- --- ----------------
--
---------------- ------------------------------
-- ------
---
-----------------在上面的代码中，我们创建了一个名为 /events 的 HTTP 端点，使用 res.write() 方法向客户端发送 SSE 事件。每秒钟发送一次事件，事件的数据包含一个消息和时间戳。
客户端
在客户端，我们可以使用 JavaScript 来接收 SSE 事件。以下是一个简单的示例：
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data.message);
};在上面的代码中，我们使用 EventSource 对象来创建一个 SSE 连接。当我们收到一个 SSE 事件时，onmessage 回调函数将被调用。我们可以使用 JSON.parse() 方法来解析事件的数据，并在控制台中打印出消息。
Server-Sent Events 的注意事项
事件类型
在 SSE 中，事件类型是可选的。如果您希望为事件指定类型，请使用 event: 前缀。例如：
res.write(`event: myevent\ndata: ${JSON.stringify(data)}\n\n`);在客户端，我们可以使用 eventSource.addEventListener('myevent', callback) 方法来监听特定类型的事件。
重连
如果 SSE 连接中断，客户端将尝试自动重新连接。您可以使用 retry: 前缀指定重新连接的时间间隔（以毫秒为单位）。例如：
res.write(`retry: 5000\ndata: ${JSON.stringify(data)}\n\n`);在上面的代码中，我们指定了 5 秒的重连时间间隔。
浏览器兼容性
大多数现代浏览器都支持 SSE，但是在某些旧版本的浏览器中可能会出现问题。您可以使用 EventSource polyfill 来解决这个问题。
结论
Server-Sent Events 是一种强大的技术，可以帮助我们实现实时通信。使用 SSE，我们可以轻松地向客户端推送数据，而无需客户端发起请求。虽然 SSE 不如 WebSocket 强大，但它是一种更简单、更易于使用的选择，可以在大多数浏览器中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67466f4c56a8046993c82d8a