Server-sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流 (Event Stream)，并且客户端可以通过 EventSource API 来监听这些事件流。SSE 可以用于实时通信、消息推送、日志监控等场景。
SSE 的基本使用
SSE 的核心是一个 HTTP 端点，客户端通过该端点建立一个长连接，服务器会不断地向客户端发送事件流，直到连接被关闭。下面是一个简单的 SSE 端点的实现：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------上面的代码创建了一个 HTTP 服务器，当客户端访问该服务器时，会返回一个 text/event-stream 类型的响应，客户端可以通过 EventSource API 来监听这个响应。服务器每隔一秒钟会向客户端发送一个事件流，事件的类型是 message，数据是当前的时间戳。
下面是一个使用 EventSource API 的示例：
----- ------ - --- ------------------------------------- ---------------------------------- ------- -- - ------------------------ ---
上面的代码创建了一个 EventSource 实例，通过该实例可以监听服务器发送的事件流。当服务器发送一个事件流时，message 事件会被触发，可以通过 event.data 来获取事件流的数据。
SSE 的扩展
SSE 不仅支持基本的文本数据，还支持二进制数据、事件类型、重试机制等扩展功能。
二进制数据
SSE 支持发送二进制数据，只需要将事件流的数据类型设置为 application/octet-stream，并将数据转换成 Uint8Array 类型即可。下面是一个发送二进制数据的示例：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- ---------------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- -------------- -- -- -- ----
---------------- --------------
-- ------
----------------客户端可以通过 response.arrayBuffer() 方法来获取二进制数据。下面是一个获取二进制数据的示例：
----- ------ - --- ------------------------------------- ---------------------------------- ------- -- - ----- ---- - --- ----------------------- ------------------ ---
事件类型
SSE 支持自定义事件类型，只需要在事件流的数据前面加上 event: 前缀即可。下面是一个自定义事件类型的示例：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----------------- ------------------- ----- ----------------------------
-- ------
----------------客户端可以通过 source.addEventListener('custom-event', callback) 方法来监听自定义事件类型。
重试机制
SSE 支持重试机制，当服务器发送的事件流无法到达客户端时，客户端可以通过 retry: 前缀来告知服务器需要在多长时间后重试。下面是一个重试机制的示例：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------- -----------
-- ------
----------------上面的代码在事件流的末尾添加了一个 retry: 1000 的前缀，表示在 1000 毫秒后重新尝试发送事件流。
总结
本文介绍了 SSE 的基本使用和扩展功能，包括二进制数据、事件类型、重试机制等。SSE 是一种非常实用的服务器推送技术，可以用于实时通信、消息推送、日志监控等场景。开发者可以根据自己的需求来选择使用 SSE 还是其他的服务器推送技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660fd248d10417a222080ee8