简介
随着实时互动应用不断增多，Websockets 已成为今天最被广泛应用的客户端-服务器之间通信标准。Websockets 通过提供一个持久的双向通信管道（从客户端到服务器的通信以及从服务器到客户端的通信）来优化现有的 HTTP 请求-响应模型。但是，Websockets 作为一种通信技术，还有一些潜在的缺点，例如，需要特殊处理心跳等情况，并且需要专用的协议。与 Websockets 相比，Server-Sent Events（简称 SSE）是一种更为轻量级的实时通信技术，旨在扩展 HTTP 协议，使其能够实现某些易于实现和使用的 Websockets 功能。SSE 优雅地解决了多种现有通信技术的常见问题。通过使用服务器推送技术，SSE 可以使服务器将数据推送到客户端，并实现 HTTP 的长轮询。本文将阐述 SSE 的内部机制，以及如何在前端中轻松使用该技术。
SSE 如何工作
SSE 使用简单的 HTTP 协议，来获取实时的单向服务器推送，它的目标是扩展 HTTP 协议以更好地处理服务器推送。它使用一个好的 Proxy 服务器，结合持久性连接、事件流和流式处理的概念来实现。与 Websockets 不同，它只能以单向流的形式向客户端提供数据（也就是说，数据从服务器流向客户端），但这并不意味着它的功能受到了限制。
SSE 的请求遵循标准的 HTTP 协议，但在请求头中使用了特殊的 text/event-stream 格式。这告诉服务器要发送一个单向的流式消息（即事件流）到客户端。客户端请求头包含以下属性：
Accept: text/event-stream Cache-Control: no-cache
服务器设置响应头，将消息发送到客户端。响应包括事件流数据，以及每个消息都需要放在一个事件类型名称下，如下所示：
data:Some message data\n\n event:eventName\n retry: milliseconds\n\n
data:：消息内容event:：事件名称retry:：几秒钟后重新连接
每个事件用一个空行分隔，最后的空行表明消息的结束。客户端接收事件后，可以执行适当的操作。
如何在前端中使用 SSE
在前端中使用 SSE 可以为应用程序的实时通信提供一个简化的解决方案。
首先，创建一个 EventSource 对象：
const eventSource = new EventSource('/sse-api');我们在客户端创建一个 EventSource 对象，连接到 /sse-api 路径，将监听来自服务器的事件流。
接下来，我们需要处理所接收的事件：
eventSource.addEventListener('customEvent', function(event) {
console.log('Received data!', event.data);
});通过 addEventListener 方法为事件流的每个消息类型添加一个监听器。在上述代码中，“customEvent”是自定义的事件名称。
使用 SSE 可以让我们在简化的且易于使用的方式下，实现实时通信，而不必使用 Websockets 的特殊处理方式以及协议。例如，我们可以使用 SSE 在 Web 应用程序中实现即时消息通知，而无需强制 用户进行手动更新页面。
总结
SSE 提供了一种可靠且简单的方法来处理服务器到客户端的实时通信。它通过扩展 HTTP 协议，将其与历史记录和缓存功能集成，以实现持久性连接和事件流。使用 SSE 能够极大地简化实时通信的开发，而不必过分依赖其他方案，例如 Websockets。在 SSE 中，服务器负责发送数据，客户端负责接收和处理数据。通过使用 EventSource 对象，可以在前端轻松实现服务器到客户端的实时通信，并创建各种实时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b714948841e989483c919