本文摘要：本文基于 Node.js 和 WebSocket 技术，利用 Express 框架搭建 HTTP 服务，结合 ws 库实现客户端与服务器间的实时通信，完成了一个简易的实时监控面板。通过生成随机监控数据，项目展示了 CPU、内存、磁盘使用率的动态更新，采用进度条形式在前端呈现。文章详细介绍了从环境搭建到 WebSocket 实现，再到扩展功能的全过程，强调了持久连接和随机数据生成的特点，为开发者提供了实用的参考。

NodeJS

Node.js 与 WebSocket 构建实时监控面板

1. 开头

为什么选择 Node.js 和 WebSocket？
大家好！今天咱们聊聊如何用 Node.js 和 WebSocket 搭建一个实时监控面板。说实话，这事儿我琢磨了好久。作为一个前端开发爱好者，我一直对“实时”这个概念特别着迷。比如说，你点开一个网页，嚯！服务器跑得怎么样、数据库忙不忙，这些事儿一下子就清清楚楚地摆在眼前，还能隔空摆弄一下设备呢！这感觉，简直爽到飞起有木有？
但问题是，要实现这种功能并不简单。想象一下，以前我们用老式的网页加载方式，就像打电话问朋友“嘿，有啥新鲜事儿没？”然后挂掉电话等对方回拨告诉你答案。问题是，如果你想知道最新消息，就得一直重复这个过程——不停地挂电话再拨号，也就是不停刷新页面，才能看到有没有新东西蹦出来。这显然不是最优解。而 WebSocket 就不一样了，它是一种全双工通信协议，可以让客户端和服务端随时互相推送消息，简直是实时应用的最佳拍档！
说到 Node.js，它天生就擅长处理异步事件流，再加上强大的生态系统（比如 Express、Socket.IO 等），简直就是为实时应用量身定制的工具。所以，今天我们就用 Node.js + WebSocket 来做一个简单的实时监控面板，顺便分享一下我的一些心得。
---

2. 第一步

搭建基础环境
首先，我们需要准备开发环境。Node.js 的安装非常简单，去官网下载对应版本就行。安装完后，用 `node -v` 和 `npm -v` 验证是否成功。如果这两个命令都能正常输出版本号，那就说明环境配置好了。
接下来，我们创建项目文件夹，并初始化 npm：

mkdir real-time-monitor
cd real-time-monitor
npm init -y

然后安装必要的依赖包。这里我们用到两个核心库：Express 和 ws（WebSocket 库）。Express 是用来搭建 HTTP 服务的，ws 则专门用于 WebSocket 通信。

// 示例如下
npm install express ws

接下来，我们写一个最基础的 HTTP 服务，确保环境能正常工作：

// server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
    res.send('Hello World!');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

保存文件后运行 `node server.js`，然后在浏览器输入 `http://localhost:3000`，应该能看到 “Hello World!”。到这里，我们的基本框架已经搭好了，是不是感觉还挺容易的？
---

3. 第二步

引入 WebSocket
现在我们有了一个 HTTP 服务，接下来该让 WebSocket 上场了。WebSocket 的好处就是能在浏览器和服务器之间直接搭起一条“高速公路”，不用老是像发短信那样频繁地丢 HTTP 请求过去，省时又高效！为了方便，我们可以直接用 `ws` 库来实现。
修改 `server.js` 文件，添加 WebSocket 相关代码：

// server.js
const express = require('express');
const WebSocket = require('ws');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
    console.log('A client connected!');
    // 接收来自客户端的消息
    ws.on('message', (message) => {
        console.log(`Received message => ${message}`);
        ws.send(`You said: ${message}`);
    });
    // 当客户端断开时触发
    ws.on('close', () => {
        console.log('Client disconnected.');
    });
});
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`HTTP Server is running on port ${PORT}`);
});

这段代码做了几件事：

1. 创建了一个 WebSocket 服务器，监听端口 `8080`。

2. 当客户端连接时，打印日志并等待消息。

3. 收到消息后，会回传给客户端。

4. 如果客户端断开连接，也会记录日志。
为了让浏览器能连接到 WebSocket 服务器，我们还需要一个简单的 HTML 页面作为客户端入口：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-Time Monitor</title>
</head>
<body>
    <h1>WebSocket Test</h1>
    <input type="text" id="messageInput" placeholder="Type your message here...">
    <button onclick="sendMessage()">Send Message</button>
    <div id="messages"></div>
    <script>
        const socket = new WebSocket('ws://localhost:8080');
        socket.onopen = () => {
            console.log('Connected to WebSocket server!');
        };
        socket.onmessage = (event) => {
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += `<p>${event.data}</p>`;
        };
        socket.onclose = () => {
            console.log('Disconnected from WebSocket server.');
        };
        function sendMessage() {
            const input = document.getElementById('messageInput').value;
            socket.send(input);
            document.getElementById('messages').innerHTML += `<p>Sent: ${input}</p>`;
        }
    </script>
</body>
</html>

这段 HTML 代码包含了一个简单的聊天界面，用户可以在输入框中输入内容并通过 WebSocket 发送到服务器，同时也能接收到服务器返回的信息。跑完 `node server.js` 之后，别忘了打开浏览器，去 `http://localhost:3000` 看一眼，看看它是不是能正常转起来。
---

4. 第三步

扩展功能——实时监控数据
现在我们的 WebSocket 已经可以正常工作了，但还不能算是一个真正的监控面板。为了让它更实用一点，咱们不妨假装弄点监控数据玩玩，像CPU用得多不多、内存占了百分之多少之类的。
首先，我们需要一个生成随机监控数据的函数：

function generateRandomMetrics() {
    return {
        cpuUsage: Math.random() 
100,
        memoryUsage: Math.random() 
100,
        diskUsage: Math.random() 
100
    };
}

然后，在 WebSocket 连接中定时向客户端推送这些数据：

wss.on('connection', (ws) => {
    console.log('A client connected!');
    setInterval(() => {
        const metrics = generateRandomMetrics();
        ws.send(JSON.stringify(metrics));
    }, 1000); // 每秒发送一次
    ws.on('close', () => {
        console.log('Client disconnected.');
    });
});

客户端需要解析接收到的数据，并动态更新页面上的信息。我们可以稍微改造一下 HTML 和 JavaScript：

<!-- index.html -->
<div id="metrics">
    <h2>CPU Usage:</h2>    <progress id="cpuProgress" value="0" max="100"></progress>
    <h2>Memory Usage:</h2>    <progress id="memoryProgress" value="0" max="100"></progress>
    <h2>Disk Usage:</h2>    <progress id="diskProgress" value="0" max="100"></progress>
</div>

socket.onmessage = (event) => {
    const metrics = JSON.parse(event.data);
    document.getElementById('cpuProgress').value = metrics.cpuUsage;
    document.getElementById('memoryProgress').value = metrics.memoryUsage;
    document.getElementById('diskProgress').value = metrics.diskUsage;
    const messagesDiv = document.getElementById('messages');
    messagesDiv.innerHTML += `<p>Metrics updated.</p>`;
};

这样，每秒钟都会从服务器获取一次监控数据，并在页面上以进度条的形式展示出来。是不是很酷？
---

5. 结尾

总结与展望
通过这篇文章，我们从零开始搭建了一个基于 Node.js 和 WebSocket 的实时监控面板。别看它现在功能挺朴素的，但这东西一出手就让人觉得，WebSocket 在实时互动这块儿真的大有可为啊！嘿，听我说！以后啊，你完全可以接着把这个项目捯饬得更酷一些。比如说，弄点新鲜玩意儿当监控指标，让用户用起来更爽，或者直接把它整到真正的生产环境里去，让它发挥大作用！
其实开发的过程就像拼图一样，有时候你会遇到困难，但只要一点点尝试和调整，总会找到答案。希望这篇文章能给你带来灵感，也欢迎你在评论区分享你的想法和经验！
最后，如果你觉得这篇文章对你有帮助，记得点个赞哦！😄
---
完

名词解释

作为当前文章的名词解释，仅对当前文章有效。

WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，而无需客户端发起请求，这使得实时数据传输成为可能。在本文中，WebSocket 被用来实现客户端与服务器之间的实时通信，用于推送监控数据如 CPU 使用率、内存占用等，从而避免了传统 HTTP 请求“请求-响应”模式的弊端，显著提升了数据更新的效率和用户体验。

Express：Express 是一个简洁而灵活的 Node.js Web 应用框架，提供一系列强大的特性来开发 Web 和移动应用程序。它有助于简化 HTTP 服务的搭建过程，提供路由定义、中间件支持以及模板引擎集成等功能。在本文中，Express 被用来快速搭建一个 HTTP 服务，为 WebSocket 提供基础的服务器支持，并通过 `app.get()` 方法处理根路径的请求，返回一个简单的 HTML 页面作为客户端入口。

进度条：进度条是一种常见的用户界面元素，通常用于表示某个操作的完成百分比或当前状态。在本文中，进度条被用来直观地展示从服务器接收到的监控数据，例如 CPU 使用率、内存占用和磁盘使用率。当客户端接收到 WebSocket 推送的随机生成的监控数据后，JavaScript 代码会解析数据并将对应的值设置为进度条的当前值，从而动态更新页面上的可视化效果，让用户能够清晰地了解系统的实时运行状况。