在前端开发中,我们经常需要实时推送数据和消息,比如新闻推送、股票行情等。这时候,传统的方式使用 Ajax 请求和轮询是不太合适的,因为它们都需要客户端发起请求,相对较为消耗资源,且不方便服务端主动推送数据。而 Server-Sent Events (SSE) 可以解决这个问题,是一种服务器主动推送技术。
SSE 可以让服务器向客户端发送事件,而客户端通过 EventSource API 来接收这些事件。相比 Ajax 请求和轮询,SSE 有以下优势:
- 实时性好:当有新的数据或消息需要推送时,服务端可以立刻推送给客户端,客户端不需要频繁地向服务端发送请求。
- 节省带宽:SSE 使用 HTTP 长连接,可以避免客户端和服务端频繁地建立和断开连接,从而节省带宽。
SSE 应用场景比较广泛,例如:
- 实时股票行情
- 游戏实时推送消息
- 实时新闻推送
如何使用 Server-Sent Events
服务端
服务端实现 SSE 十分简单。服务端只需要向客户端发送带有事件类型和数据的消息即可,关键是要设置正确的 HTTP 头,例如:
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache
其中 Content-Type
指定响应内容类型为 text/event-stream,表示服务端会像一个数据流一样不断发送数据。Cache-Control
设为 no-cache 表示不缓存响应。
服务端发送数据的格式为:
event: <event type> data: <event data> event: <event type> data: <event data>
其中,event 行指定事件类型,data 行指定事件数据,可以有多个事件类型和数据。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------- --- ----- ---- - ----- ------ ----------------- ------------- ---------------- -------------- -------------- -- - ---------------- ----------- -- ------ --- ---------------- -- -- ---------------------- -- -------------------------
上面的示例代码使用 Express 实现了一个 SSE 服务端,通过访问 http://localhost:3000/sse
可以获取 SSE 事件流。服务端定时发送一个 data 为 'ping' 的事件。
客户端
客户端使用 EventSource API 来接收从服务端推送来的事件。创建 EventSource 对象时需要指定 SSE 服务端的地址,如:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------ -------------- ------- ------ ---- ------------------------ -------- ----- ----------- - --- -------------------- ---------------------------------------- - -- - --------------------- ---------- ------ ----- ------------ --- --------------------- - - -- - --------------------- ------- ------ ----- ------------ - --------- ------- -------
上面的示例代码创建了一个 EventSource 对象,通过 addEventListener
方法监听名为 greeting
的事件,每当服务端推送 greeting
事件时,就会触发回调函数。同时,通过 onmessage
属性设置一个默认的消息事件处理函数,以接收 ping
消息。这样,当服务端推送数据时,就会在客户端的控制台中输出相应的日志。
总结
Server-Sent Events 是一种服务器主动推送数据和消息的技术,相对于传统的 Ajax 和轮询方式,在实时性和资源消耗上有明显提升。在实际开发过程中,我们可以考虑使用 SSE 来实现实时推送功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/664f0945d3423812e4fefdfe