使用 Node.js 和 Server-sent Events 实现实时监控系统
前言
在现代的 Web 应用程序中，越来越多的应用需要实时更新数据。例如，您可能正在开发一个销售平台或在线聊天应用程序，需要实时更新用户的订单或聊天记录。为了实现实时更新，您可能已经考虑使用 WebSockets 或长轮询技术，但是这些技术可能需要更复杂的后端处理和网络通信，导致应用程序效率低下和响应时间过长。在这样的情况下，使用 Node.js 和 Server-sent Events 技术可以轻松地实现实时更新，而且代码少、效率高。
Node.js 和 Server-sent Events 简介
Node.js 是一种用于构建高效、可扩展网络应用程序的开源 JavaScript 运行时。Node.js 运行时使用基于事件驱动的非阻塞 I/O 模型，具有出色的性能和可扩展性。不同于传统的基于线程或进程的模型，Node.js 可以在单个线程中处理数万个并发连接，而不会导致资源竞争或死锁。
Server-sent Events（SSE）是一种 HTML5 规范，用于在客户端和服务器之间发送实时事件。与 WebSockets 不同，SSE 协议基于 HTTP/1.1，使用单向连接发送流式文本数据。服务器可以周期性地或基于事件发送更新信息到客户端，而客户端使用 EventSource API 监听服务器发送的事件信息。SSE 协议可以使用标准 HTTP 端口80或443，而且不需要特殊的网络配置或安全协议。
使用 Node.js 和 SSE 技术实现实时监控系统
下面我们将介绍如何使用 Node.js 和 SSE 技术实现一个实时监控系统。该系统可以周期性地获取服务器的 CPU 和内存使用情况，并将信息发送到客户端浏览器，以实时更新监控面板。该系统仅仅需要使用单个 Node.js 服务器，而且不需要复杂的后端处理，仅需少量的代码即可实现。
第一步：环境准备和依赖安装
首先，您需要安装 Node.js 运行时。访问 https://nodejs.org/en/ 下载和安装与您的操作系统相符的 Node.js 版本。
然后，创建一个新的项目文件夹，打开终端并切换到该文件夹，执行以下命令，初始化一个新的 npm 包：
- --- ---- --
接着，安装必要的依赖包：
- --- ------- ------- ----
在这个实例中，我们使用了 Express 库来创建 Web 应用程序，使用了 cors 库来处理跨域资源共享设置。
第二步：创建服务器
在项目文件夹下创建一个名为 server.js 的文件，输入以下代码：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ----- ---------------- ---------------- -- -- - ------------------- --------- -- --------------------------- ---
以上代码使用 Express 库创建了一个 HTTP 服务器，并将跨域资源共享设置作为中间件启用。在本例中，服务器将在端口 3000 上监听请求。
第三步：生成 SSE
在 server.js 应用程序中，我们需要定义一个 SSE 路由，用于向客户端发送实时更新信息。检测 CPU 和内存使用情况需要使用外部模块，我们可以通过安装和使用 systeminformation 模块来实现。输入以下代码：
- --- ------- -----------------
----- -- - -----------------------------
----- ------- - ---
------------------ ----- ---- -- -
-- ------ --- --- ---- -------
-------------------------
----------------------------
------------------------------
-- --- -------- -------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- --- ------ -- --- ----
------------------
-- ------ ------ ---- --- ---- -- -----
--------------- -- -- -
------------------- ------- -----
------------------------------------ ---
---
-- ------------ ------ ------- --- ------ -- -------
----------------- -- -- -
----- --------- --------- - ----- -------------
-----------------
---------
---
----- ---- - ----------------
-------- -------------------------------
--------- ---- - ------------------ - -------------- - ----------------
---
------------------------ -- -
------------------- --------------
---
-- ------
---以上代码通过定义 /events 路由，设置响应头，打开 SSE 连接，并添加客户端到 clients 列表。使用 systeminformation 模块获取 CPU 使用率和内存使用情况，并将数据以 JSON 字符串的格式发送给客户端。setInterval 函数用于定期更新 metrics 数据，并将其流作为 SSE 事件发送给所有客户端连接。
第四步：创建客户端
在客户端页面中，我们使用 EventSource API 监听服务器发送的 SSE 事件，并将数据更新到监控面板。创建一个名为 index.html 的文件，并输入以下代码：
--------- -----
------
------
---------------- ---------- --------------
--------
-------- ------------------- -
----- ------- - ------------------------------------
----- -------- - -------------------------------------
----------------- - ------------ - ----
------------------ - ------------- - ----
-
----- ------ - --- --------------------------------------------
---------------- - ------- -- -
----- ---- - -----------------------
--------------------
--
---------
-------
------
------------- ---------- -----------
-------
----
------- ----------
--- -------------------
-----
----
---------- -----------
--- --------------------
-----
--------
-------
-------以上 HTML 页面中使用了 EventSource API 监听服务器发送的事件，并调用更新函数 updateMetrics 来更新监控面板中的 CPU 使用率和内存使用情况。客户端页面将从 http://localhost:3000/events SSE 路由获取更新事件。
第五步：启动服务器
在终端中输入以下命令，启动 Node.js 服务器：
- ---- ---------
您可以打开 http://localhost:3000 查看实时监控面板。如需模拟 CPU 和内存负载，您可以在终端中运行一些费时的命令或工具，例如编译大型程序或使用压缩工具进行大量压缩操作。
总结
使用 Node.js 和 Server-sent Events 技术可以轻松实现实时监控系统，并且代码量少、效率高。Node.js 运行时使用基于事件驱动的非阻塞 I/O 模型，具有出色的性能和可扩展性。Server-sent Events 是一种 HTML5 规范，用于在客户端和服务器之间发送实时事件。服务器可以周期性地或基于事件发送更新信息到客户端，而客户端使用 EventSource API 监听服务器发送的事件信息。用 systeminformation 模块获取 CPU 使用率和内存使用情况，并将数据以 JSON 字符串的格式发送给客户端。定期更新 metrics 数据，并将其流作为 SSE 事件发送给所有客户端连接。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6455fe03968c7c53b094d7d3