简介
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术,它可以让服务器向客户端发送实时事件。SSE 可以用于实现实时通知、聊天室、在线游戏等实时应用场景。
SSE 的优点是它使用了标准的 HTTP 协议,不需要使用额外的插件或库,支持跨域请求,同时也比 WebSocket 更简单易用。
实现方法
服务端
在服务端,我们需要创建一个 SSE 的连接点,通过这个连接点向客户端发送事件。下面是一个使用 Node.js 和 Express 框架实现 SSE 的示例代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------- -- - ----- ---- - - -------- ------ ------- -- ---------------- ------------------------------ -- ------ --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中,我们创建了一个路由 /sse
,当客户端请求这个路由时,我们设置响应头 Content-Type
为 text/event-stream
,这样浏览器就知道这是一个 SSE 连接。同时,我们设置响应头 Cache-Control
为 no-cache
,这样浏览器不会缓存 SSE 的响应。最后,我们设置响应头 Connection
为 keep-alive
,这样连接会一直保持开启,直到客户端关闭连接。
在路由处理函数中,我们使用 setInterval
定时向客户端发送事件,事件的格式为:
event: <event-name> data: <event-data>
其中,event
表示事件名,可以省略。data
表示事件数据,必须以两个换行符结尾。
客户端
在客户端,我们需要创建一个 SSE 的连接,通过这个连接接收服务端发送的事件。下面是一个使用 JavaScript 实现 SSE 的示例代码:
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------- - ------- -- - ----- ---- - ----------------------- -------------------------- -- ------------------- - ------- -- - ------------------ -------- ------- --
在上面的代码中,我们创建了一个 EventSource
对象,指定了 SSE 的连接点 /sse
。当服务端发送事件时,onmessage
回调函数会被触发,我们可以在这个回调函数中处理事件数据。同时,我们还可以监听 onerror
事件,处理连接错误。
指导意义
SSE 是实现实时通知、聊天室、在线游戏等实时应用场景的一种有效技术方案。通过 SSE,我们可以实现服务端向客户端的实时推送,减少客户端的轮询请求,提高应用的性能和用户体验。
同时,SSE 也有一些限制,比如不支持双向通信、不支持二进制数据等。在选择使用 SSE 还是 WebSocket 时,需要根据具体的应用场景进行考虑。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术,可以用于实现实时通知、聊天室、在线游戏等实时应用场景。在服务端,我们需要创建一个 SSE 的连接点,通过这个连接点向客户端发送事件;在客户端,我们需要创建一个 SSE 的连接,通过这个连接接收服务端发送的事件。SSE 与 WebSocket 相比,更简单易用,但也有一些限制。在选择使用 SSE 还是 WebSocket 时,需要根据具体的应用场景进行考虑。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/658cd13eeb4cecbf2d298a0d