在 Web 应用程序中，经常需要实时更新数据或推送通知给用户。为了实现这个功能，过去我们通常使用轮询或者 WebSocket 技术。但是，这些技术都有一些缺点，例如轮询会浪费大量的带宽和服务器资源，而 WebSocket 需要额外的协议支持，增加了开发的复杂性。Server-sent Events（SSE）则是一种新的技术，旨在解决这些问题。
什么是 Server-sent Events
Server-sent Events 是一种使用 HTTP 协议的服务器推送技术。它允许服务器向客户端发送事件流，从而实现实时通知和数据更新。与 WebSocket 不同，SSE 使用标准的 HTTP 协议，不需要额外的协议支持，也不需要建立复杂的连接。客户端可以使用普通的 XMLHttpRequest 对象或者 Fetch API 来接收事件流。
SSE 的优势
相较于传统的轮询和 WebSocket 技术，SSE 有以下优势：
节省带宽和服务器资源
SSE 使用长连接，服务器只需要在有新事件时发送数据，而客户端则保持连接不断开。这样就避免了轮询时频繁的请求和响应，节省了带宽和服务器资源。
简单易用
SSE 使用标准的 HTTP 协议，不需要额外的协议支持，也不需要建立复杂的连接。客户端可以使用普通的 XMLHttpRequest 对象或者 Fetch API 来接收事件流，这样就非常简单易用。
实时更新数据
SSE 可以实现实时更新数据，当服务器有新的数据时，可以立即将数据推送给客户端，从而实现实时通知和数据更新。
SSE 的适用场景
SSE 适用于需要实时通知和数据更新的场景，例如：
股票行情
股票行情需要实时更新，SSE 可以实现实时推送股票价格和涨跌幅等数据给客户端。
即时聊天
即时聊天需要实时通知用户有新的消息，SSE 可以实现实时推送消息给客户端。
实时监控
实时监控需要实时更新数据，SSE 可以实现实时推送监控数据给客户端。
如何使用 SSE
使用 SSE 需要分为服务器端和客户端两部分。
服务器端
服务器端需要使用特定的响应头 Content-Type: text/event-stream 来表示这个响应是 SSE 事件流。然后在响应正文中，需要按照一定的格式发送事件。例如：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache data: Hello World\n\n
这个响应表示发送了一个名为 message 的事件，事件的数据为 Hello World。
客户端
客户端可以使用普通的 XMLHttpRequest 对象或者 Fetch API 来接收事件流。例如：
const eventSource = new EventSource('/sse');
eventSource.onmessage = event => {
console.log(event.data);
};这个代码片段创建了一个 SSE 连接，连接的 URL 为 /sse，当接收到新的事件时，会打印事件的数据。
总结
Server-sent Events 是一种使用 HTTP 协议的服务器推送技术，它可以实现实时通知和数据更新，优点是节省带宽和服务器资源，简单易用，实时更新数据。SSE 适用于需要实时通知和数据更新的场景，例如股票行情、即时聊天、实时监控等。使用 SSE 需要分为服务器端和客户端两部分，服务器端需要按照一定的格式发送事件，客户端可以使用普通的 XMLHttpRequest 对象或者 Fetch API 来接收事件流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a0d00d10417a2228dbec0