使用 Server-sent Events 推动单页应用的新时代-JavaScript中文网-JavaScript教程资源分享门户

什么是 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.headers['Content-Type'] = 'text/event-stream'
response.headers['Cache-Control'] = 'no-cache'

在 Response 对象的 body 中写入需要推送的消息流。每个消息流由消息的类型和消息内容组成，使用“data:”和“event:”前缀来标记。如下所示：

response.stream.write "data: #{message}\n\n"

其中，message 为需要推送的消息内容。

在每个消息流之间加入一个空行。这个空行是必须的，用来告诉客户端这个消息已经结束。如下所示：

response.stream.write "data: #{message}\n\n"

客户端接收 SSE 推送

客户端需要通过 JavaScript 来接收 SSE 推送：

创建一个新的 EventSource 对象，将其参数设置为服务端 SSE 推送的 URL。如下所示：

let source = new EventSource('/stream')

其中，/stream 是服务端 SSE 推送的 URL。

监听 EventSource 对象的 message 事件，接收推送的消息。如下所示：

source.addEventListener('message', function(event) {
  console.log(event.data)
})

其中，event.data 即为服务器推送的消息内容。

示例代码

服务端代码实现

-- -------------------- ---- -------
----- ---------------- - ----------------------
  ------- ----------------------

  --- -----
    -------------------------------- - -------------------
    --------------------------------- - ----------

    -------- -- ---
      --------------------- ------ ---------
      ----- -
    ---

    ---------------------
  ---
---

客户端代码实现

let source = new EventSource('/stream')

source.addEventListener('message', function(event) {
  console.log(event.data)
})

总结

SSE 技术可以帮助我们实现单页应用中的实时通信，有着极大的优势和应用价值。在使用 SSE 技术时，需要根据上述步骤来实现服务端 SSE 推送和客户端 SSE 接收，同时注意 SSE 推送的消息格式和 SSE 连接的保持稳定。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64585519968c7c53b0ab98a3