在现代 web 应用中,实时性已经成为了一个非常重要的需求。比如,在一个在线聊天室中,我们希望能够实时地看到其他用户的消息;在一个在线协作应用中,我们希望能够实时地看到其他人的操作。
在这篇文章中,我们将介绍如何使用 SSE 技术来实现网页的实时锁屏并且自动推送提醒。SSE(Server-Sent Events)是一种 HTML5 新增的技术,它允许服务器向客户端推送事件流,从而实现实时通信。
原理
SSE 技术的原理非常简单。客户端通过一个 HTTP 连接向服务器发送一个请求,请求的头部包含了一个特殊的字段:Accept: text/event-stream
。服务器收到这个请求后,会保持连接不断开,并且向客户端不断地发送事件流。
事件流的格式如下:
event: <event-name> data: <event-data> event: <event-name> data: <event-data> ...
其中,event-name
表示事件的名称,event-data
表示事件的数据。每个事件都以两个换行符结尾。
客户端通过 JavaScript 的 EventSource
对象来接收事件流。每当接收到一个事件时,EventSource
对象会触发一个 message
事件,我们可以在这个事件的回调函数中处理事件数据。
实现
下面我们来看一个示例,演示如何使用 SSE 技术来实现网页的实时锁屏并且自动推送提醒。
服务器端
我们使用 Node.js 来实现服务器端。首先我们需要创建一个 HTTP 服务器,并且监听一个端口:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- ----- ---- --- ------------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
然后,我们在处理请求的回调函数中,判断请求的 URL 是否为 /stream
,如果是的话,就向客户端发送事件流:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- -------- --- ---------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -- ----- ----- - ---- - ------------------ - --------------- ------------ --- --------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- ------- ---------- ------- -------------------------- ------- ------- --- - --- ------------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
最后,我们需要在服务器端定时向客户端发送事件。在这个示例中,我们每隔 5 秒钟向客户端发送一个事件,事件的名称为 notification
,事件数据为一个随机数:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- -------- --- ---------- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------------- -- - ----- ---- - ------------------------------------ ----------------- ------------------- -------------- -- ------ - ---- - ------------------ - --------------- ------------ --- --------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- ------- ---------- ------- -------------------------- ------- ------- --- - --- ------------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
客户端
客户端的代码非常简单。我们只需要创建一个 EventSource
对象,指定服务器端的 URL,然后在 message
事件的回调函数中处理事件数据即可:
const source = new EventSource('/stream'); source.addEventListener('notification', (event) => { const data = JSON.parse(event.data); alert(`New notification: ${data}`); });
指导意义
本文介绍了如何使用 SSE 技术来实现网页的实时锁屏并且自动推送提醒。SSE 技术非常简单易用,而且不需要额外的库或框架,只需要使用原生的 JavaScript 即可。
在实际应用中,我们可以使用 SSE 技术来实现各种实时性需求,比如在线聊天室、在线协作应用、实时监控等等。SSE 技术的优点是实现简单,且兼容性良好,可以在大多数现代浏览器中使用。
本文的示例代码可以在 GitHub 上找到:https://github.com/example/sse-demo。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c591cccf1e9924e1d48ecb