SSE 推送的正确姿势-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE？

SSE，即 Server-Sent Events，是一种基于 HTTP 协议的服务器向客户端推送数据的技术。它允许服务器单向向客户端发送数据流，而不需要客户端发出请求。SSE 可以在 Web 应用程序中实现实时更新，如聊天应用、股票报价等。

如何使用 SSE？

服务器端代码

在服务器端，我们需要设置 HTTP 响应的 MIME 类型为 "text/event-stream"，这样浏览器就能识别这个响应是 SSE 格式的。

response.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  "Connection": "keep-alive"
})

然后，我们就可以在 HTTP 响应中不断地发送数据流，每个数据流都带着一个标识符和一个消息体。标识符可以用来区分不同类型的消息，消息体可以是任意格式的数据。比如：

response.write("event: message\n");
response.write("data: hello world\n\n");

上面的代码就是一个简单的消息流，标识符是 "message"，消息体是 "hello world"。注意每个数据流以一个空行结束。

客户端代码

在客户端，我们需要创建一个接收 SSE 数据流的 EventSource 对象。

const source = new EventSource('/sse')

这里的 '/sse' 是服务器端设置的 SSE 接口路径。

然后，我们就可以监听 EventSource 对象的 "message" 事件来接收数据流。

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

上面的代码就是在控制台输出接收到的消息体。如果有多个类型的消息，我们可以监听不同的事件类型来区分。

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

source.addEventListener('error', function(event) {
  console.error(event)
})

注意事项

跨域问题

由于 SSE 是基于 HTTP 协议的，所以同样受到同源策略的限制。如果服务器和客户端不在同一个域名下，需要在服务器端设置 CORS 头部。

response.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  "Connection": "keep-alive",
  "Access-Control-Allow-Origin": "http://example.com"
})

断开连接

SSE 会自动保持连接，直到客户端关闭连接或者服务器断开连接。如果服务器端主动断开连接，客户端会触发 "error" 事件。

response.on("close", function() {
  console.log("connection closed")
})

重新连接

如果客户端希望在连接断开之后自动重新连接，可以监听 "error" 事件并在一定时间后重新连接。

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

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

---------

上面的代码每隔 5 秒重新连接一次。如果需要停止自动连接，可以调用 source.close() 方法关闭连接。

参考示例

下面是一个简单的 SSE 示例，包含服务器端代码和客户端代码。

服务器端代码

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

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

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

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

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

客户端代码

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

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

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

总结

SSE 是前端实时更新技术中非常重要的一环。通过服务器向客户端推送数据流，可以实现实时展示以及更好的用户体验。本文介绍了 SSE 的基本使用方法以及注意事项，希望对大家在实际开发中有所帮助。

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