什么是 Server-sent Events？
Server-sent Events (SSE) 是一种服务器向客户端推送数据的技术，它允许服务器端主动向客户端发送有序的实时消息流。与 WebSocket 相比，SSE 的优势在于它可以在浏览器和服务器之间建立一种单向连接，使得服务器可以实时向客户端提供新的消息，而客户端则无需发起请求。SSE 可以在单页应用中被广泛使用，例如在实现即时聊天、实时提交表单、实时通知等场景中。
SSE 的优点
- SSE 与 Ajax 相比，可以极大地减少客户端和服务器之间的请求通信，从而减轻客户端和服务器的压力。
- SSE 提供了比 Ajax 更加实时、稳定的消息传输方式，同时保证消息的有序性和完整性。
- SSE 的实现方式与常用的 HTTP 协议相同，使得 SSE 的应用和部署都非常容易。
如何使用 SSE
服务端实现 SSE 推送
服务端需要实现以下步骤来支持 SSE 推送：
- 创建一个 HTTP 响应流，设置 Content-Type 为 text/event-stream，并设置 Cache-Control 为 no-cache。如下所示：
-------------------------------- - ------------------- --------------------------------- - ----------
- 在 Response 对象的 body 中写入需要推送的消息流。每个消息流由消息的类型和消息内容组成，使用“data:”和“event:”前缀来标记。如下所示：
--------------------- ------ ---------------
其中，message 为需要推送的消息内容。
- 在每个消息流之间加入一个空行。这个空行是必须的，用来告诉客户端这个消息已经结束。如下所示：
--------------------- ------ ---------------
客户端接收 SSE 推送
客户端需要通过 JavaScript 来接收 SSE 推送：
- 创建一个新的 EventSource 对象，将其参数设置为服务端 SSE 推送的 URL。如下所示：
--- ------ - --- ----------------------
其中，/stream 是服务端 SSE 推送的 URL。
- 监听 EventSource 对象的 message 事件，接收推送的消息。如下所示：
---------------------------------- --------------- - ----------------------- --
其中，event.data 即为服务器推送的消息内容。
示例代码
- 服务端代码实现
----- ---------------- - ----------------------
------- ----------------------
--- -----
-------------------------------- - -------------------
--------------------------------- - ----------
-------- -- ---
--------------------- ------ ---------
----- -
---
---------------------
---
---- 客户端代码实现
--- ------ - --- ---------------------- ---------------------------------- --------------- - ----------------------- --
总结
SSE 技术可以帮助我们实现单页应用中的实时通信，有着极大的优势和应用价值。在使用 SSE 技术时，需要根据上述步骤来实现服务端 SSE 推送和客户端 SSE 接收，同时注意 SSE 推送的消息格式和 SSE 连接的保持稳定。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64585519968c7c53b0ab98a3