Server-Sent Events 基础教程-JavaScript中文网-JavaScript教程资源分享门户

Server-Sent Events（SSE）是一种基于 HTTP 的服务器向客户端推送事件的技术。它允许服务器实时地向客户端发送数据，而无需客户端定期轮询服务器。SSE 是一种轻量级的通信协议，适用于实时应用程序，如聊天应用程序、实时数据可视化和实时通知等。

SSE 的工作原理

SSE 基于 HTTP 协议，使用长连接（long polling）来保持客户端和服务器之间的持久连接。当客户端向服务器发送一个 SSE 请求时，服务器会保持连接打开，直到有新的事件可以发送给客户端。当服务器有新事件时，它会使用 HTTP 响应将事件发送给客户端。事件以文本格式发送，并使用特殊的 MIME 类型 text/event-stream。

与 WebSocket 的区别

与 WebSocket 相比，SSE 的实现更加简单，因为它只需要使用标准的 HTTP 协议和长连接。WebSocket 需要使用 WebSocket 协议和自定义的通信协议。另外，SSE 适用于单向通信，即服务器向客户端发送数据，而客户端不能向服务器发送数据。WebSocket 可以实现双向通信，即客户端和服务器之间可以相互发送数据。

SSE 的 API

SSE 的 API 非常简单，只有一个构造函数 EventSource，用于创建 SSE 对象。创建 SSE 对象时，需要指定服务器的 URL，如下所示：

const eventSource = new EventSource('http://example.com/sse');

创建 SSE 对象后，可以使用 onmessage 事件监听服务器发送的事件，如下所示：

eventSource.onmessage = function(event) {
  console.log(event.data);
};

在服务器端，可以使用类似以下的代码来发送事件：

// javascriptcn.com 代码示例
res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Connection': 'keep-alive'
});

setInterval(function() {
  res.write('data: ' + new Date() + '\n\n');
}, 1000);

上面的代码每隔一秒钟向客户端发送一个事件，事件的数据是当前时间。注意，在发送事件时，需要在数据前面添加 data: 和一个换行符，然后在数据后面添加两个换行符，以便客户端正确解析事件。

SSE 的浏览器兼容性

SSE 的浏览器兼容性非常好，支持 SSE 的浏览器包括 Chrome、Firefox、Safari、Edge 和 Opera。

总结

本文介绍了 SSE 的基本原理、与 WebSocket 的区别、API 和浏览器兼容性。SSE 是一种非常有用的技术，可以用于实现实时应用程序。如果您想学习更多关于 SSE 的内容，请查阅相关文档和示例代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6566d725d2f5e1655dfca10c