Vue项目中通过websocket实现日志打印

前言
在软件开发过程中，日志记录是必不可少的一部分，它可以帮助我们了解程序的运行情况，定位问题并进行故障排除。在前端开发中，我们经常需要将后台的日志信息打印到浏览器的前端页面上，以便更好地调试和监控程序。

实现步骤

1. 安装依赖

在项目中安装必要的依赖：

npm install socket.io-client log4js

2. Node.js 日志收集与发送

在 Node.js 中，使用 log4js 库来收集和发送日志。在项目中创建一个新的日志文件 log.js：

const log4js = require('log4js');

// 创建一个日志记录器
const logger = log4js.getLogger('app');

// 定义日志格式
const logFormat = log4js.format.combine(
  log4js.format.timestamp(),
  log4js.format.level(),
  log4js.format.message()
);

// 配置日志记录器
logger.level = 'INFO';
logger.add(log4js.transports.file('logs/app.log'), {
  // 将日志输出到文件
  filename: 'logs/app.log',
  // 只输出ERROR级别的日志
  level: 'ERROR',
  maxLogSize: 10485760,
  backups: 3,
  compress: true
});

logger.add(log4js.transports.websocket('ws://localhost:3000/log'), {
  // 将日志输出到websocket
  endpoint: 'ws://localhost:3000/log',
  level: 'INFO'
});

module.exports = logger;

3. Vue 前端日志接收与显示

在 Vue 项目中，使用 socket.io-client 库来接收和显示日志。在项目中创建一个新的日志组件 Log.vue：

<template>
  <div>
    <ul>
      <li v-for="log in logs" :key="log.timestamp">{{ log.level }}: {{ log.message }}</li>
    </ul>
  </div>
</template>

<script>
import socketIOClient from "socket.io-client";

export default {
  data() {
    return {
      logs: [],
      socket: null
    };
  },
  mounted() {
    // 创建一个 WebSocket 连接
    this.socket = socketIOClient('ws://localhost:3000/log');

    // 监听日志事件
    this.socket.on('log', (data) => {
      this.logs.push(data);
    });
  },
  beforeDestroy() {
    // 断开 WebSocket 连接
    this.socket.disconnect();
  }
};
</script>

4. 在 Node.js 中启动 WebSocket 服务器

在项目中创建一个新的 websocket.js 文件：

const express = require('express');
const socketIO = require('socket.io');

const app = express();

// 创建一个 HTTP 服务器
const server = app.listen(3000);

// 创建一个 WebSocket 服务器
const io = socketIO(server);

// 监听 WebSocket 连接
io.on('connection', (socket) => {
  // 监听日志事件
  socket.on('log', (data) => {
    // 将日志数据发送给所有已连接的客户端
    io.emit('log', data);
  });
});

5. 在 Vue 项目中使用 Log 组件

在 Vue 项目中，在需要显示日志的地方使用 Log 组件：

<template>
  <div>
    <Log />
  </div>
</template>

<script>
import Log from './Log.vue';

export default {
  components: {
    Log
  }
};
</script>

6. 测试

运行 Node.js 服务器和 Vue 项目，在浏览器中打开 Vue 项目的页面。在 Node.js 服务器中，使用 logger.info('Hello World!') 来打印日志。您应该可以在 Vue 项目的页面上看到日志信息。