Nodejs 如何将服务端log实时在页面输出展示？

Nodejs 如何将服务端log实时在页面输出展示？

RT。 顺便问问控制台里的输出node如何获取到？

13 回复

Node.js 如何将服务端 log 实时在页面输出展示？

在 Node.js 中，我们可以使用 WebSocket 来实现实时更新服务端日志并在前端页面中显示。WebSocket 提供了一种全双工通信的通道，使得客户端（浏览器）和服务器可以实时地互相发送数据。

示例代码

  1. 安装依赖 首先，我们需要安装 ws 库来处理 WebSocket 连接。

    npm install ws

  2. 创建服务器端代码

    创建一个名为 server.js 的文件，并添加以下代码：

    const http = require('http');
const WebSocket = require('ws');

// 创建 HTTP 服务器
const server = http.createServer();

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ server });

// 当有新的 WebSocket 连接时触发
wss.on('connection', (socket) => {
  console.log('Client connected');

  // 监听服务端日志
  const logStream = process.stdout;

  logStream.on('data', (data) => {
    socket.send(data.toString());
  });
});

// 监听端口
server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

  3. 创建客户端代码

    创建一个名为 index.html 的文件，并添加以下代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-time Logs</title>
</head>
<body>
  <h1>Service Logs</h1>
  <div id="logs" style="height: 400px; overflow-y: scroll; border: 1px solid black;"></div>

  <script>
    // 创建 WebSocket 连接
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      console.log('Connected to server');
    };

    socket.onmessage = (event) => {
      const logsDiv = document.getElementById('logs');
      logsDiv.innerHTML += `<pre>${event.data}</pre>`;
      logsDiv.scrollTop = logsDiv.scrollHeight;
    };
  </script>
</body>
</html>

  4. 运行服务器

    在终端中运行以下命令启动服务器：

    node server.js

  5. 访问页面

    打开浏览器并访问 http://localhost:3000，你应该能看到服务端日志实时更新在页面上。

解释

  • WebSocket 服务器：通过 ws 库创建 WebSocket 服务器，监听连接请求，并在连接建立后监听标准输出流 (process.stdout) 的数据事件。

  • 客户端：创建 WebSocket 连接到服务器，并在接收到消息时更新页面上的日志区域。

  • 日志捕获：通过监听 process.stdout 捕获所有输出的日志信息，并通过 WebSocket 发送到客户端。

这种方式不仅实现了日志的实时更新，还提供了更好的用户体验，因为用户无需刷新页面即可看到最新的日志信息。


服务端的为什么要在页面显示？ 一般前后端是分开的

pub/sub

var log = console.log; console.log=function(){log(arguments);ioout(arguments)}

ioout是你自己写的SOCKETIO发消息的函数。

哪个控制台？nodejs控制台？浏览器控制台？

具体场景是怎么样的? 不同环境会差别很大的

如果是调用终端的命令, 那么 c = process.exec('find /', cb) 测样的代码, 这个 c 可以监听到事件的… 讲起来比较乱, 直接看例子吧: http://stackoverflow.com/a/15515651/883571

如果要在web页面上展示后台的实时数据，从页面端讲可以实现的技术：1、页面轮询 2、websocket 对于nodejs来说如果不用websocket都有点说不过去了。基于这个思路，web页面和服务端通信的方式其实已经确定了，只要按照socketio实现就好了。

我们再说服务端。先说收集都是node应用产生的日志，这个最简单，随便找个日志框架，把日志输出到mongo的capped的collection，再利用capped collectoin 的tail cursor，很容易就可以把变化的内容通过socketio输出到web页面上去了。 如果要监控其他系统写的文件，这个场景就多了，你要自己分析才行了。 希望有帮助

我也正在做这个，楼主实现没有，分享一下呗，谢谢

有个npm 包是专门做这个的，名字忘了。 web页面展示，而且还有不同的level 的log。

https://github.com/NarrativeScience/Log.io 试试这个呢

tail -f

要在页面上实时显示Node.js服务端的日志，可以通过使用WebSocket技术实现实时通信。具体来说，前端通过WebSocket连接到后端服务器，然后后端服务器通过WebSocket通道实时推送日志信息到前端页面，从而实现日志的实时展示。

示例代码

后端代码（Node.js + ws模块）

首先安装ws模块：

npm install ws

然后编写后端代码：

const WebSocket = require('ws');
const http = require('http');

// 创建HTTP服务器
const server = http.createServer();

// 创建WebSocket服务器实例
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
    console.log('New client connected!');
    
    // 定义一个函数用于发送日志
    const sendLog = (message) => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(message);
        }
    };

    // 模拟接收服务端日志并发送给客户端
    setInterval(() => {
        sendLog(`Server Log at ${new Date().toISOString()}: Server is running...\n`);
    }, 1000);

    // 当客户端断开连接时
    ws.on('close', function close() {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server started on port 3000');
});

前端代码（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real-time Logs</title>
<script src="https://cdn.jsdelivr.net/npm/ws@7.4.6/dist/wsf.min.js"></script>
</head>
<body>
<h1>Real-time Logs</h1>
<pre id="logs" style="border: 1px solid black; height: 400px; overflow-y: scroll;"></pre>
<script>
    const socket = new WebSocket('ws://localhost:3000');
    const logsContainer = document.getElementById('logs');

    socket.onmessage = function(event) {
        logsContainer.textContent += event.data;
        logsContainer.scrollTop = logsContainer.scrollHeight;
    };
</script>
</body>
</html>

解释

  • 后端：创建了一个HTTP服务器，并附带了WebSocket服务器。每当有新客户端连接时，会建立一个连接，并开始定期发送模拟的日志信息。

  • 前端：使用WebSocket连接到后端，接收数据并显示在页面上。通过scrollTop属性确保新的日志消息总是可见的。

以上代码演示了如何使用WebSocket实现实时日志传输。实际应用中，你可能需要根据实际情况调整日志来源和发送机制。

回到顶部