Server-sent Events（SSE）是一种基于 HTTP 的推送技术，它允许服务器向客户端发送自定义的事件数据，而无需客户端发起请求。SSE 可以用于实时通信、实时数据更新、消息推送等场景。本文将详细介绍 SSE 中支持的数据类型，以及如何在前端中使用 SSE。
SSE 支持的数据类型
SSE 中支持的数据类型包括文本数据和二进制数据。文本数据是指普通的字符串，可以使用 UTF-8 编码；而二进制数据则是指任意的字节流。在 SSE 中，可以通过设置 Content-Type 头部来指定数据类型。例如，如果要发送一条文本消息，可以使用以下代码：
----- ---- - ------- -------- ----- ----- - --- ----------------------- ------------ - -- -- ----------------------- --------- --------------- - --- -- --------------------- ---------- -------- ------------- - -- -- ----------------------- --------
在这个例子中，EventSource 对象会向 /events 发送一个请求，服务器会不断地向客户端发送消息。当客户端收到消息时，会触发 onmessage 事件。
如果要发送一条二进制消息，可以使用以下代码：
----- ---- - --- ----------------- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ------- ----- ----- - --- ----------------------- ------------ - -- -- ----------------------- --------- --------------- - --- -- --------------------- ---------- -------- ------------- - -- -- ----------------------- -------- -------------------------------------- ----------------------------
在这个例子中，我们使用 Uint8Array 类型来表示二进制数据，然后通过 setRequestHeader 方法设置 Content-Type 头部为 application/octet-stream。
在前端中使用 SSE
在前端中使用 SSE 非常简单，只需要创建一个 EventSource 对象，然后监听 onmessage 事件即可。当服务器向客户端发送消息时，onmessage 事件会被触发，并且可以通过 event.data 属性获取消息内容。如果连接出现错误，可以监听 onerror 事件。
在 SSE 中，服务器会不断地向客户端发送消息，直到连接断开。因此，需要在适当的时候关闭连接，以避免浪费资源。可以通过调用 close 方法来关闭连接。例如：
----- ----- - --- ----------------------- ------------ - -- -- ----------------------- --------- --------------- - --- -- --------------------- ---------- -------- ------------- - -- -- ----------------------- -------- ------------- -- -------------- -------
在这个例子中，我们在连接打开后 10 秒钟后关闭连接。
总结
本文介绍了 SSE 中支持的数据类型，以及如何在前端中使用 SSE。SSE 可以用于实时通信、实时数据更新、消息推送等场景，具有广泛的应用价值。如果你需要在项目中使用 SSE，希望本文可以为你提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660b7bf9d10417a222ba500a