一、前言
现今,越来越多的应用需要实时监测数据的变化,如在线游戏的实时数据、股票行情的变化等等。而前端作为展示数据的平台之一,需要支持实时数据的显示。本文介绍了如何利用 AngularJS 和 Server-sent Events(SSE) 技术来构建一个实时监测仪表盘。
二、SSE 技术简介
SSE, Server-sent Events,即服务端推送事件,它是一种基于 HTTP 的服务器推送技术。使用 SSE,服务器可以在客户端与服务器之间建立一条持久连接,通过这条连接向客户端发送事件。客户端通过监听服务器发来的事件,从而实现数据的实时推送。
相比其他实时推送技术例如 WebSocket,SSE 的优势在于它是基于 HTTP,可以利用现有的 Infra 库,同时也可以使用大多数 Web 应用所需的安全浏览器选项。而且由于 SSE 的 Runnable 代码是使用标准的 JavaScript 编写,所以它能够运行在大多数 Web 应用的客户端中。
三、如何实现实时监测仪表盘
1. 构建后端
构建后端部分可以采用 Node.js 实现,具体实现可以用Express框架:
------------------ ------------- ---- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------------- - --- ---- - --- ---------------------------- ---------------- - - ---- - -------- -- ------ ---
上面的代码就是基于 Express 的 SSE Demo,主要的流程就是采用 express 库里面的 Response,在 headers 必须包含以下内容:
Content-Type: text/event-stream
Cache-Control:no-cache
Connection:keep-alive
当后端接到请求后,用 setInterval 模拟实时数据,然后把数据放入 response 中,最后使用 data:
制定 Sse 的事件名称。这样,就能够向客户端传递实时数据了。
2. 构建前端
前端实现则使用 AngularJS和EventSource:
----- --------------- ---- ----------------------------- ------------------------ ------ ------- ----------------------------------------------------------------- -------- --- --- - ----------------------- ---- ------------------------------ ---------------- - --- ------ - --- ----------------------- ---------------------------------- ----------- - ------------------------ - ------------------ - ------- --- -- ------- --- --------- -------
上面的代码中,我们在页面中创建了一个控制器 myController
,在控制器中定义了一个 source
变量,它指向的是后端 SSE 服务的地址;当后端发送数据时,页面会自动更新数据。
四、总结
本文介绍了如何使用 AngularJS 和 Server-sent Events 技术来构建实时监测仪表盘,涵盖了后端和前端两方面的实现。相对于 WebSocket 技术,SSE 更容易被普通的 Web 服务采用,且兼容性更好。实时监测仪表盘可以表现出来在客户端上实时展示数据的变化,可以在很多实时监控的场景下发挥身份作用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6596668aeb4cecbf2da3ace3