SSE（Server-Sent Events）API，即服务器推送事件，是一种轻量级实时通信协议。通过 SSE，可以实现服务器向客户端推送消息的功能，以及客户端可以在连接断开后自动重新建立连接的功能。
在前端开发中，SSE API 可以用来实现类似于聊天室、实时监控等功能。下面详细介绍 SSE API 的使用方法，包括事件的创建、连接的建立和断开，以及消息的推送和接收等方面。
SSE 事件的创建
在服务端，可以使用 EventSource 对象来创建 SSE 事件。EventSource 对象的构造函数如下：
--- ----------- - --- ---------------- --------
其中，url 是 SSE 事件的 URL 地址，config 是一个字典对象，用来配置连接的相关参数。
在创建 EventSource 对象时，可以传递一个可选的 event 和 id 参数。其中，event 参数用于指定需要监听的事件类型，id 参数用于指定事件的 ID。例如：
--- ----------- - --- ------------------- - ------ ---------- --- ------ ---
这样，服务端发送的消息会被标记为 ID 为 1234，类型为 'message' 的事件。
SSE 连接的建立和断开
当客户端请求 SSE 事件时，服务端应该返回一个正确的 MIME 类型。在大多数情况下，应该是 text/event-stream。例如：
-------- --- -- ------------- -----------------
在建立连接后，服务端可以通过 write() 方法向客户端发送消息。例如：
--------------------- ------ -------------
在客户端，可以通过 EventSource 对象的 onopen 属性来监听连接建立事件。如下所示：
------------------ - ---------- - ---------------- ---------- ---------- --
在客户端，可以通过 EventSource 对象的 onerror 属性来监听连接断开事件。如下所示：
------------------- - ---------- - ---------------- ---------- ---------- --
SSE 消息的推送和接收
在服务端，推送消息时要满足一定的格式要求。每一个事件应该以以下格式进行发送：
------ ------------ --- ---------- ----- ------------
其中， 表示事件类型， 表示事件 ID， 表示事件数据。注意，每个字段的值必须以冒号+空格的形式与字段名分隔开来，并且每个字段之间必须用一个空行隔开。
在客户端，可以通过 EventSource 对象的 onmessage 属性来监听消息事件。如下所示：
--------------------- - --------------- - --------------------- ---------- ------------ --
这里的 event.data 表示消息内容。
SSE 的使用示例
下面是一个简单的 SSE 使用示例。服务端代码如下所示：
----- ---- - ----------------
----- -- - --------------
----- ------ - --------------------------- --------- -- -
----------------------- -
--------------- -------------------
---
-------------- -- -
----- ------- - ------ ----- ---------------------------
------------------------
-- ------
---
--------------------这里使用 setInterval() 方法每隔 1 秒推送一个消息，消息内容是当前时间的 ISO 格式。
客户端代码如下所示：
----- ----------- - --- -------------------------------------- --------------------- - --------------- - --------------------- ---------- ------------ --
这里使用 EventSource 对象连接服务端，并监听消息事件。每次接收到消息后，会将消息内容打印出来。
总结
本文介绍了 SSE API 的使用方法，包括事件的创建、连接的建立和断开，以及消息的推送和接收等方面。通过学习 SSE API 的使用，我们可以实现类似于聊天室、实时监控等功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6531d4e27d4982a6eb3cc0db