在 Web 应用程序中，我们希望能够及时更新实时数据，例如股票行情等。传统的做法是使用轮询技术，即不断向服务器发送请求来获取最新数据。这种方法会大量占用带宽和服务器资源，因此不是最好的选择。还有一种更好的方法，那就是使用 Server-Sent Events（SSE）。
Server-Sent Events 是一种服务器推送技术，通过 HTTP 连接在服务器和客户端之间建立持久性连接。服务器可以随时向客户端发送数据，这样客户端就可以实时更新数据，而无需不断发送请求。
SSE 的使用方法
在客户端，我们可以使用 JavaScript API 来订阅 SSE 连接并接收数据。以下是一个使用 SSE 的简单示例：
const source = new EventSource('/sse');
source.addEventListener('message', function(event) {
console.log(event.data);
});上面的代码创建了一个 EventSource 对象，它与服务器建立了一个 SSE 连接，并订阅了一个名为 /sse 的事件流。当服务器向事件流发送消息时，客户端会通过 message 事件接收到消息，并将消息内容打印到控制台。
在服务器端，我们必须设置正确的响应头并发送 SSE 事件。以下是一个使用 Node.js 和 Express 的例子：
-- -------------------- ---- -------
--------------- ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- - - --- -------------------- - --------
-- ------
---上面的代码创建了一个 GET 路由，它返回一个 SSE 事件流。我们设置了正确的响应头，包括 MIME 类型为 text/event-stream，不缓存响应，并且保持连接。然后，在每个 1 秒钟，服务器向事件流发送一个包含当前时间戳的消息。在客户端，我们可以看到每秒钟都会打印出一个新的时间戳。
SSE 的优点和缺点
相对于传统的轮询和长轮询技术，SSE 有以下优点：
- 占用更少的带宽和服务器资源。
- 实现了真正的即时更新，没有额外的延迟。
- 可以方便地实现事件通知，例如用户登录、订单完成等。
但是 SSE 也有一些限制和缺点：
- SSE 只能向客户端推送数据，而不能从客户端发送数据。
- SSE 对于某些浏览器和服务器可能存在兼容性问题。
- SSE 不支持跨域请求，必须在相同的域名下使用。
总结
Server-Sent Events 是一种非常有用的服务器推送技术，可以帮助我们实现即时更新数据和事件通知。通过 SSE，我们可以减少带宽和服务器资源的占用，同时提高用户体验。虽然 SSE 存在一些限制和缺点，但是对于实时数据更新和事件通知场景来说，它仍然是一种非常好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502c4d495b1f8cacdffd2fe