Server-Sent Events 是什么?

在前端开发中,我们经常需要实时推送数据和消息,比如新闻推送、股票行情等。这时候,传统的方式使用 Ajax 请求和轮询是不太合适的,因为它们都需要客户端发起请求,相对较为消耗资源,且不方便服务端主动推送数据。而 Server-Sent Events (SSE) 可以解决这个问题,是一种服务器主动推送技术。

SSE 可以让服务器向客户端发送事件,而客户端通过 EventSource API 来接收这些事件。相比 Ajax 请求和轮询,SSE 有以下优势:

  • 实时性好:当有新的数据或消息需要推送时,服务端可以立刻推送给客户端,客户端不需要频繁地向服务端发送请求。
  • 节省带宽:SSE 使用 HTTP 长连接,可以避免客户端和服务端频繁地建立和断开连接,从而节省带宽。

SSE 应用场景比较广泛,例如:

  • 实时股票行情
  • 游戏实时推送消息
  • 实时新闻推送

如何使用 Server-Sent Events

服务端

服务端实现 SSE 十分简单。服务端只需要向客户端发送带有事件类型和数据的消息即可,关键是要设置正确的 HTTP 头,例如:

其中 Content-Type 指定响应内容类型为 text/event-stream,表示服务端会像一个数据流一样不断发送数据。Cache-Control 设为 no-cache 表示不缓存响应。

服务端发送数据的格式为:

其中,event 行指定事件类型,data 行指定事件数据,可以有多个事件类型和数据。

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

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

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

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

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

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

上面的示例代码使用 Express 实现了一个 SSE 服务端,通过访问 http://localhost:3000/sse 可以获取 SSE 事件流。服务端定时发送一个 data 为 'ping' 的事件。

客户端

客户端使用 EventSource API 来接收从服务端推送来的事件。创建 EventSource 对象时需要指定 SSE 服务端的地址,如:

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

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

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

上面的示例代码创建了一个 EventSource 对象,通过 addEventListener 方法监听名为 greeting 的事件,每当服务端推送 greeting 事件时,就会触发回调函数。同时,通过 onmessage 属性设置一个默认的消息事件处理函数,以接收 ping 消息。这样,当服务端推送数据时,就会在客户端的控制台中输出相应的日志。

总结

Server-Sent Events 是一种服务器主动推送数据和消息的技术,相对于传统的 Ajax 和轮询方式,在实时性和资源消耗上有明显提升。在实际开发过程中,我们可以考虑使用 SSE 来实现实时推送功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/664f0945d3423812e4fefdfe


纠错
反馈