前言
Server-sent Events(SSE)是一种用于客户端与服务器之间实时通信的技术。相较于WebSocket，SSE更加轻量级且易于实现。它可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。
本文将介绍SSE的事件机制及应用，并通过示例代码进行说明。
SSE的事件机制
SSE是基于HTTP协议的。客户端通过向服务器发送HTTP请求，建立起一条持久连接。服务器会在连接建立后，不断地向客户端发送事件数据，直到连接关闭。客户端可以通过监听事件来获取服务器推送的数据。
事件由服务器通过HTTP响应的Content-Type头部指定为text/event-stream类型，并以一定格式发送。下面是一个简单的SSE事件示例：
-------- --- -- ------------- ----------------- ------ ------- ----- ----- -----
其中，event字段表示事件名称，data字段表示事件数据。客户端可以通过event字段来区分不同的事件类型，从而进行不同的处理。
除了data和event字段，SSE事件还支持retry字段。该字段用于指定在服务器端发送数据失败后，客户端重新发起连接的时间间隔。例如：
-------- --- -- ------------- ----------------- ------ ------- ----- ----- ----- ------ ----
上面的示例中，retry字段指定了客户端在连接失败后，每隔5秒重新发起连接。这样可以保证连接不会因为网络问题而中断。
SSE的应用
SSE可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。下面我们通过一个简单的实例来说明SSE的应用。
假设我们有一个在线聊天室，需要实现实时推送新消息给客户端。我们可以使用SSE来实现。
服务器端代码如下：
----- ---- - ----------------
----- ------ - -------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
---------------------- -
----- ---- - ------ ----- ------------------------------
----------------
-- ------
---
--------------------在上面的代码中，我们创建了一个HTTP服务器，并通过设置Content-Type为text/event-stream，使得服务器可以向客户端发送SSE事件。
在setInterval中，我们每隔一秒钟向客户端发送一条事件，事件数据为当前时间。客户端可以通过监听message事件来获取这些事件数据。
客户端代码如下：
----- ------ - --- ------------------------------------- ---------------------------------- --------------- - ------------------------ ---
在客户端中，我们通过创建一个EventSource对象并指定服务器地址，来建立起与服务器的连接。然后通过监听message事件来获取服务器推送的事件数据。
总结
本文介绍了SSE的事件机制及应用，并通过示例代码进行了说明。SSE可以用于实现实时推送、聊天室、股票行情等需要实时更新数据的应用场景。相较于WebSocket，SSE更加轻量级且易于实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66123325d10417a2222cb790