概述
WebSocket 是一种在 Web 应用程序中实现双向通信的协议，但是它需要在服务端和客户端都支持才能使用。而 Server-Sent Events (SSE) 是一种单向通信协议，它允许服务器向客户端推送数据。SSE 是基于 HTTP 协议的，它使用长连接来实现数据的推送，因此不需要像 WebSocket 那样在服务端和客户端都支持。
SSE 具有以下特点：
- 单向通信，只能由服务器向客户端推送数据。
- 基于 HTTP 协议，使用长连接实现数据的推送。
- 不需要在服务端和客户端都支持，只需要客户端支持即可。
- 可以使用 EventSource API 来实现 SSE 的客户端。
详细介绍
SSE 的协议
SSE 的协议是基于 HTTP 协议的，客户端向服务器发送一个 HTTP 请求，服务器会保持连接打开，并在有新数据时向客户端发送一个带有特殊格式的 HTTP 响应。客户端接收到响应后，可以使用 EventSource API 来处理数据。
SSE 的响应格式如下：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive data: Hello World!\n\n
响应头中的 Content-Type 必须是 text/event-stream，这告诉客户端这是一个 SSE 的响应。Cache-Control 必须是 no-cache，这告诉客户端不要缓存响应。Connection 必须是 keep-alive，这告诉客户端保持连接打开。
响应体中的每一行是一个数据项，以“data: ”开头。每个数据项必须以两个换行符“\n\n”结尾。
SSE 的客户端
SSE 的客户端可以使用 EventSource API 来实现。以下是一个简单的 SSE 客户端示例：
-- -------------------- ---- ------- --- ------ - --- ----------------------- ---------------------------------- --------------- - --------------------- ------- ------------ --- -------------------------------- --------------- - --------------------- ------- ---展开代码
上面的代码创建了一个 EventSource 对象，指定了 SSE 的地址为“/events”。然后通过 addEventListener 方法来监听 message 事件和 error 事件。当收到数据时，会触发 message 事件，我们可以通过 event.data 属性来获取数据。当出现错误时，会触发 error 事件，我们可以通过 event 属性来获取错误信息。
SSE 的服务端
SSE 的服务端可以使用任何支持 HTTP 的服务器来实现。以下是一个简单的 SSE 服务端示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ---------------- - - --- --------------------------- - -------- -- ------ --- ------------------- -- -- - ---------------- ------ --------- -- ---- ------- ---展开代码
上面的代码创建了一个 HTTP 服务器，每隔一秒钟向客户端发送一条数据。注意响应头中的 Content-Type、Cache-Control 和 Connection 属性的设置。
指导意义
SSE 是一种非常简单易用的实现服务器向客户端推送数据的方式。它不需要客户端支持复杂的协议，只需要支持 EventSource API 即可。SSE 的协议基于 HTTP，使用长连接实现数据的推送，因此不需要像 WebSocket 那样在服务端和客户端都支持。SSE 可以用于实时通知、实时数据更新等场景。
结论
Server-Sent Events 通过长连接转化 HTTP 为 WebSocket 通信，它是一种非常简单易用的实现服务器向客户端推送数据的方式。它不需要客户端支持复杂的协议，只需要支持 EventSource API 即可。SSE 可以用于实时通知、实时数据更新等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6778ae4ec1c5215e3cc82edb
