前言
随着 Web 技术的不断发展,越来越多的应用需要实时地向客户端推送信息,比如聊天室、股票行情、新闻等。为了支持实时推送,出现了多种技术方案,如轮询、长轮询、WebSocket 等。本文将介绍另一种实时推送技术:SSE(Server-Sent Events)。
简介
SSE 是一种不依赖外部库和插件,基于纯 HTTP 协议实现的服务器推送技术。它可以让服务器实时地向客户端推送数据,而客户端无需发送任何请求。SSE 技术很适合在浏览器上实现实时通信场景,比如实时股票数据、即时聊天、在线游戏等。
使用 SSE 技术,服务器通过 HTTP 连接向客户端推送数据,服务器发送的数据在浏览器中可以通过 DOM 事件来接收。
实现步骤
下面我们来一步步实现 SSE 技术的实现。
第一步:HTML 页面编写
首先在 HTML 中添加如下代码,为 SSE 技术打下基础。
--------- ----- ----- ---------- ------ ----- --------------- -- ---------- ------------ ------- ------ ---- ------------------- -------- -- ------- ----------- --- ------------ - --------------- ------- - ---- - --- ------ - --- ---------------------- ---------------- - -------- ------- - --- -------------- - ----------------------------------- ------------------------ - ----------- -- - --------- ------- -------
这段代码主要包含两部分:
- 采用
typeof
判断当前浏览器是否支持 SSE 技术; - 使用
new EventSource('/event')
创建一个 SSE 连接,其中/event
代表服务端实现的 SSE 接口。
第二步:服务端 SSE 接口实现
接下来,我们需要实现 SSE 接口。在 express 框架中,可如下实现:
----------------- -------- ----- ---- - ----------------------------- --------------------- ------------------------------ ------------ --- - - -- --- ----- - -------------------- -- - --------------------------- ---- -- ------ ---
上述代码中,我们首先设置了响应头,Content-Type
为 text/event-stream
,表示这是 SSE 响应流。Cache-Control
为 no-cache
,表示禁用缓存。
然后通过 setInterval
定时向客户端发送数据,数据格式为 data:${i}\n\n
,即以 data:
开头,:${i}\n\n
代表数据内容。
最后,不要忘记在合适的时机关闭 SSE 连接:
--------------- -------- -- - --------------------- --
第三步:启动服务
最后,启动服务,让服务运行在一个端口之上:
---------------- -------- -- - ------------------- ------- -- ---- ------- --
效果演示
完成上述三步后,启动 Node.js,访问 http://localhost:3000/
,结果如下:
可以看到,服务端每隔 1 秒向客户端推送一个数字,客户端随之接收并更新界面上的数字。
总结
SSE 技术是一种轻量级、高效、安全的实时推送技术,与轮询、长轮询、WebSocket 等技术相比,它不需要支持 socket 的服务端环境,也不需要特殊的通信协议,而且兼容性好。相信掌握了 SSE 技术,你能够轻松应对实时通信场景下的各种问题。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64535402968c7c53b07c3972