在现代 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
