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