前端实时获取日志

日志是开发过程中必不可少的一环。特别是一些关键业务日志，或者是生产日志，能够快速帮开发人员定位问题。混合开发也有日志，相对生产上的日志会好处理一些，因为很多时候它是本地日志。本文将重点讨论一下，混合开发中的获取实时日志问题。

Log4js

首先，从零开始写一个日志库显然不合适，这里我们在Github上找了一个用的比较多的日志库： Log4js

配置也很简单，参考官方示例如下：

const log4js = require("log4js");
log4js.configure({
   
  appenders: {
    cheese: {
    type: "file", filename: "cheese.log" } },
  categories: {
    default: {
    appenders: ["cheese"], level: "error" } }
});

const logger = log4js.getLogger("cheese");
logger.trace("Entering cheese testing");
logger.debug("Got cheese.");
logger.info("Cheese is Comté.");
logger.warn("Cheese is quite smelly.");
logger.error("Cheese is too ripe!");
logger.fatal("Cheese was breeding ground for listeria.");

OK，配置好日志后，然后打日志，把日志文件都输出到cheese.log中，剩下的事情就比较简单了，就是把cheese.log中的日志实时展示到前端，这样方便实时查看运行情况。

WebSocket方案

这种高频率传输的场景最适合用Socket了，因为它不仅可以请求服务端消息，服务端还可以主动向客户端发消息。Socket长连接相对于Http来说更适合这种显示日志的场景。

Socket客户端

OK不多说，下面看实现。首先，我们在前端创建一个WebSocket客户端，标准的Web Api接口中提供了Socket的API，所以直接调用就行，具体实现代码如下：

./WebSocketUtil.js

import {
   socketPort} from './config/common.js';

export default class WebSocketUtil{
   
    constructor() {
   
        this.client = null;
    }

    start() {
   
        const client = new WebSocket(`ws://localhost:${
     socketPort}/`, 'echo-protocol');

        
        client.onerror = function() {
   
            console.log('Connection Error');
        };

        client.onopen = function() {
   
            console.log('WebSocket Client Connected');
        };

        client.onclose = function() {
   
            console.log('echo-protocol Client Closed'