在前端开发中,经常有需要将数据实时推送到客户端的情况,这时我们通常会使用 WebSocket 或者轮询来实现。但是,这两种方式存在一些问题,比如 WebSocket 会受到防火墙的限制,轮询会消耗服务器资源等。Server-sent Events (SSE) 就是一种解决这些问题的技术方案。
SSE 是什么?
SSE 是 HTML5 引入的一种协议,它允许服务器向客户端主动推送数据,而不需要客户端不停地向服务器发送请求。SSE 利用了 HTTP/1.1 的持久连接来实现,所以它比轮询更高效,比 WebSocket 更容易实现。
SSE 的使用
首先,在客户端,我们需要使用 EventSource
对象来与服务器进行通信:
----- ----------- - --- -------------------- --------------------- - ----- -- - -------------------- ------------ --
这里的 /sse
是 SSE 的事件源,也就是服务器用来发送消息的地址。
在服务器端,我们需要设置响应头,告诉浏览器这是 SSE 的响应,并保持连接:
------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ ---
然后,可以使用 res.write()
方法来向客户端发送消息:
---------------- -----------------
这里的 message
是要发送的消息内容,需要按照 SSE 的协议格式发送,即以 data:
开头,以两个换行符结尾。
SSE 的优点
SSE 是基于 HTTP 协议的,所以它不受防火墙的限制,而 WebSocket 需要使用特定的端口。(当然,也可以使用 wss 协议来避免这个问题)
SSE 比起轮询和 WebSocket 更加简单易用。客户端只需要通过
EventSource
对象连接到服务器,就可以立即接收到数据。而 WebSocket 需要手动建立连接,处理断线重连等操作。SSE 只是单向通信,只有服务器可以向客户端主动发送消息,而客户端不能向服务器发送消息。这使得 SSE 更加适合用于服务器向客户端发送实时更新的场景,比如股票行情、聊天室等。
示例代码
下面是一个使用 SSE 实现实时股票行情的示例代码:
-- ------ ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- -------- --- ------- - ------------------- ---------- ------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ----- ------ - -------- -------- ------- -------- -------------- -- - ----- ----- - ------------------------------- - ---------------- ----- ----- - -------------- - ----------------- ----- ------- - -------------------- ---------------- ----------------- -- ------ --- -------------------- -- ----- ----- ----------- - --- -------------------- --------------------- - ----- -- - -------------------- ------------ --
结论
SSE 是一种非常实用的技术,它可以帮助我们在不使用 WebSocket 的情况下实现服务器向客户端的实时推送。SSE 能够有效地减少服务器和客户端的通信延迟,提高应用程序的响应速度,如果你需要实时推送数据的功能,那么 SSE 绝对是一种值得考虑的选择。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671cb6659babaf620fb21775