在现代 Web 应用程序中，实时数据更新是非常重要的。例如，社交媒体网站需要实时更新新消息，股票交易网站需要实时更新股票价格。在过去，为了实现实时数据更新，开发人员通常使用轮询技术，这种技术会导致服务器和客户端之间的大量通信，从而导致性能问题。现在，我们有一种更好的解决方案，那就是 Server-Sent Events。
什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种用于实现服务器到客户端的单向通信的技术。它允许服务器向客户端推送数据，而不是客户端不断地向服务器发出请求。SSE 是基于 HTTP 协议的，因此它可以通过标准的 Web 服务器进行部署。
SSE 与 WebSocket 不同，WebSocket 是一种双向通信协议，而 SSE 是一种单向通信协议。WebSocket 可以实现实时数据更新和实时交互，但是它需要客户端和服务器之间的握手，而 SSE 只需要简单的 HTTP 连接。
如何使用 Server-Sent Events？
使用 SSE 的第一步是在客户端创建一个 EventSource 对象。这个对象用于向服务器发出请求，并接收服务器推送的数据。下面是一个简单的示例：
const eventSource = new EventSource('/stream');
eventSource.onmessage = function(event) {
console.log(event.data);
};在这个示例中，我们创建了一个 EventSource 对象，并指定了一个 URL（/stream）。这个 URL 是服务器向客户端推送数据的入口点。当服务器有新的数据时，它会将数据发送到客户端，并触发 EventSource 对象的 onmessage 回调函数。在这个回调函数中，我们可以处理服务器发送的数据。
在服务器端，我们需要设置一个路由，用于处理 SSE 请求。下面是一个示例代码：
-- -------------------- ---- -------
------------------ ------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
---------------- - - --- ------ - --------
-- ------
---在这个示例中，我们使用 Express.js 框架创建了一个路由。当客户端请求 /stream URL 时，服务器会返回一个 Content-Type 为 text/event-stream 的响应。这是 SSE 协议的标准响应格式。在响应头中，我们还设置了 Cache-Control 和 Connection 标头，这些标头用于确保 SSE 连接保持活动状态。
在 setInterval 函数中，我们每秒钟向客户端推送一条数据。在这个例子中，我们只是简单地发送了当前时间，但是在实际应用中，我们可以发送任何类型的数据。
优点和缺点
使用 SSE 有很多优点。首先，它可以减少服务器和客户端之间的通信量，因为服务器只需要向客户端发送数据，而不需要接收来自客户端的请求。其次，SSE 协议是基于 HTTP 的，因此它可以通过标准的 Web 服务器进行部署。最后，SSE 协议非常简单，容易实现和使用。
当然，SSE 也有一些缺点。首先，它只能实现单向通信，不能实现双向通信。这意味着客户端无法向服务器发送数据。其次，SSE 协议在某些浏览器中可能无法正常工作。最后，SSE 协议可能会导致服务器上的资源泄漏，因为 SSE 连接需要保持活动状态，这可能会导致服务器上的资源耗尽。
总结
Server-Sent Events 是一种用于实现服务器到客户端的单向通信的技术。它可以减少服务器和客户端之间的通信量，因为服务器只需要向客户端发送数据，而不需要接收来自客户端的请求。SSE 协议是基于 HTTP 的，因此它可以通过标准的 Web 服务器进行部署。虽然 SSE 也有一些缺点，但是它仍然是一种非常有用的技术，可以帮助开发人员实现实时数据更新功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb282badd4f0e0ff4e6fb1