简介
在 web 应用程序中,实时数据展示是一项非常重要的功能。例如,一个网站可能需要实时展示在线访问者的数量,或者实时展示当前在线的聊天用户。在传统的 web 应用程序中,为了实时地展示这些数据,通常需要使用长轮询或者 WebSocket 等技术。但是,在某些场景下,使用 Server-Sent Events 也是一种非常不错的选择。
Server-Sent Events(简称 SSE)是一种基于 HTTP 的服务器推送技术,它通过浏览器和服务器之间的单向通信,实现了服务器向客户端实时推送数据的功能。SSE 的优点在于,它与 HTTP 协议兼容,可以很方便地在现有的 web 应用程序中使用。
示例代码
在下面的示例中,我们将使用 Node.js 和 Express.js 构建一个简单的 web 应用程序,通过 SSE 实现实时统计在线访问者数量的功能。
服务端代码
首先,我们需要安装需要的依赖:
npm install express ejs
然后,在项目根目录下创建一个 app.js
文件,输入以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- ------ ---------------- ----------- ------------- -------- ------- -- -------- ---------------------------------- -- ------------ --- ----------- - -- --------------- ----- ---- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------- --- -- -- --- --------------- -------------- -- - -------------- ----------------- ---------------- ---------------- --------------------- -- ------ --- -- -- ---- -- ---------------- -- -- ------------------- ------- -- -------------------------
在以上代码中,我们首先设置了视图引擎为 EJS,并设置了静态文件目录为 ./public
。然后,在 /sse
路由中,我们通过设置 HTTP 响应头,告诉客户端返回的数据格式是 SSE。接着,我们使用 setInterval
定时器每秒钟向客户端发送一次 SSE 数据,其中 event
字段表示事件的名称,data
字段表示事件的数据。
客户端代码
在静态文件目录 ./public
中创建一个 index.html
文件,输入以下代码:
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --- ------------------ ------- ------ ----------------- ---- ----------------------- -------- -- -- ----------- -- ----- --------- - --- -------------------- -- -------- ----------- -- ----------------------------------------- --------------- - ----- ----------- - ----------- ------------------------------------------------ - ------------ --- --------- ------- -------
在以上代码中,我们首先在页面中创建了一个 <div>
元素,用于展示在线访问者的数量。然后,我们在 JavaScript 中创建了一个 EventSource
对象,并指定了 /sse
路由作为服务器发送的数据来源。最后,我们监听了服务器发送的 onlineCount
事件,将服务器发送的在线访问者数量展示在页面中。
结论
通过上述示例,我们可以看到,使用 Server-Sent Events 实现实时统计数据展示是非常简单的。相比于传统的长轮询或者 WebSocket 技术,SSE 的优点在于它与 HTTP 协议兼容,部署和使用都非常方便。在实际项目中,我们可以根据自己的需要,灵活选择合适的实时数据展示技术。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67173518ad1e889fe22060a8