Server-sent Events(SSE) 的事件机制及应用-JavaScript中文网-JavaScript教程资源分享门户

前言

Server-sent Events(SSE)是一种用于客户端与服务器之间实时通信的技术。相较于WebSocket，SSE更加轻量级且易于实现。它可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。

本文将介绍SSE的事件机制及应用，并通过示例代码进行说明。

SSE的事件机制

SSE是基于HTTP协议的。客户端通过向服务器发送HTTP请求，建立起一条持久连接。服务器会在连接建立后，不断地向客户端发送事件数据，直到连接关闭。客户端可以通过监听事件来获取服务器推送的数据。

事件由服务器通过HTTP响应的Content-Type头部指定为text/event-stream类型，并以一定格式发送。下面是一个简单的SSE事件示例：

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: hello world

其中，event字段表示事件名称，data字段表示事件数据。客户端可以通过event字段来区分不同的事件类型，从而进行不同的处理。

除了data和event字段，SSE事件还支持retry字段。该字段用于指定在服务器端发送数据失败后，客户端重新发起连接的时间间隔。例如：

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: hello world
retry: 5000

上面的示例中，retry字段指定了客户端在连接失败后，每隔5秒重新发起连接。这样可以保证连接不会因为网络问题而中断。

SSE的应用

SSE可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。下面我们通过一个简单的实例来说明SSE的应用。

假设我们有一个在线聊天室，需要实现实时推送新消息给客户端。我们可以使用SSE来实现。

服务器端代码如下：

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

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

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

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

在上面的代码中，我们创建了一个HTTP服务器，并通过设置Content-Type为text/event-stream，使得服务器可以向客户端发送SSE事件。

在setInterval中，我们每隔一秒钟向客户端发送一条事件，事件数据为当前时间。客户端可以通过监听message事件来获取这些事件数据。

客户端代码如下：

const source = new EventSource('http://localhost:3000');

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

在客户端中，我们通过创建一个EventSource对象并指定服务器地址，来建立起与服务器的连接。然后通过监听message事件来获取服务器推送的事件数据。

总结

本文介绍了SSE的事件机制及应用，并通过示例代码进行了说明。SSE可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。相较于WebSocket，SSE更加轻量级且易于实现。

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