vue实现前端展示后端实时日志带颜色示例详解

Vue实现前端展示后端实时日志带颜色示例详解

介绍

本攻略通过Vue.js实现前端实时展示后端日志功能的实现方法，并且可以根据日志级别实时修改展示的颜色，提高可读性。

实现过程

前端代码部分

首先，在template中建立一个<div>用于展示后端传送过来的实时日志，根据控制台输出的日志可以推断，后端传来的数据都以字符串形式存在，并且每个日志信息之前的数字代表了日志级别（例如0代表了debug级别信息，1代表了info级别信息，依次类推），因此我们对每一个输出的日志信息进行解析，将其日志级别和日志信息分开，并且为日志信息添加相应的颜色。

<template>
    <div>
        <div v-for="(log, index) in logs" :key="index" :style="{color: log.color}">
            {{ log.content }}
        </div>
    </div>
</template>

接下来，在script中引入sockjs-client和stompjs两个包，并且在data中创建两个变量，stompClient表示订阅了后端发送过来的日志信息之后返回的订阅对象，logs表示存放已经解析处理的日志信息，初始值为一个空数组，在生命周期函数中，将Vue实例作为this传递给stompClient的connect()方法以实现建立WebSocket连接向后端发送订阅请求的功能。

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
    data() {
        return {
            stompClient: null,
            logs: [],
        };
    },
    created() {
        const socket = new SockJS('/ws/log');
        this.stompClient = Stomp.over(socket);
        this.stompClient.connect({}, this.subscribe);
    },
    methods: {
        subscribe() {
            this.stompClient.subscribe('/topic/log', (message) => {
                const msg = JSON.parse(message.body);
                const level = parseInt(msg.level);
                let content = '';
                let color = '';
                switch (level) {
                    case 0:
                        content = `[DEBUG] ${msg.message}`;
                        color = '#333333';
                        break;
                    case 1:
                        content = `[INFO] ${msg.message}`;
                        color = '#eeeeee';
                        break;
                    case 2:
                        content = `[WARNING] ${msg.message}`;
                        color = '#ff8800';
                        break;
                    case 3:
                        content = `[ERROR] ${msg.message}`;
                        color = '#cc0000';
                        break;
                    default:
                        content = `[UNKNOWN] ${msg.message}`;
                        color = '#000000';
                        break;
                }
                this.logs.push({
                    content,
                    color
                });
            });
        },
    },
};

后端代码部分

由于本例只是为了演示如何使用Vue.js实现前端实时展示后端日志的功能，所以在后端使用一个简单的的logback-spring.xml配置文件进行调试，具体内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration>
<configuration debug="true">
    <appender name="stdout" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{35} - %msg%n</pattern>
        </encoder>
    </appender>
    <root level="INFO">
        <appender-ref ref="stdout" />
    </root>
</configuration>

后端使用Spring Boot搭建开发环境，首先引入spring-boot-starter-websocket和spring-boot-starter-log4j2两个包，并且添加对应的依赖到pom.xml中。为了能够将后端的日志信息实时发送给前端展示，后端需要启用WebSocket并且开放对应的端口进行数据传输，在application.yml中进行相关配置：

server:
  port: 8080
  servlet:
    context-path: /api
  websocket:
    path: /ws
    allowed-origins: http://localhost:8081
logging.config: classpath:logback-spring.xml

其中，server.websocket.path表示WebSocket订阅请求的路径，server.websocket.allowed-origins表示允许WebSocket跨域请求的域名，在本例中前端Vue应用跑在localhost:8081下。

@EnableWebSocket
@SpringBootApplication
public class Application implements WebSocketConfigurer {
    @Autowired
    private WSHandler wsHandler;

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(wsHandler(), "/ws/log").setAllowedOrigins("*");
    }

    @Bean
    public WSHandler wsHandler() {
        return new WSHandler();
    }
}

在WSHandler中，将WebSocket会话对象存储在一个共享变量中，当有新的日志信息需要被发送到前端时，遍历所有WebSocket会话并发送消息，实现了实时日志信息的发送到前端：

public class WSHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // ...
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        sessions.add(session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        sessions.remove(session);
    }

    public void sendLogMessage(String message) {
        TextMessage textMessage = new TextMessage(message);
        for (WebSocketSession session : sessions) {
            try {
                session.sendMessage(textMessage);
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
    }

    // ...
}

进行相关测试之后，当后端产生日志时，前端就可以在页面上看到对应的日志信息，并且不同级别的日志会在页面上以不同的颜色展示，提高了可读性。

示例说明

示例1

例如，我们在后端产生了一条debug级别的日志，记录起来之后，前端的日志列表就会多出一条内容为[DEBUG] xxx的日志信息，颜色是黑色。

示例2

如果我们产生了一条error级别的日志，记录之后，在前端的日志列表就会多出内容为[ERROR] xxx的一条日志信息，颜色是红色。

总结

本攻略详细介绍了如何使用Vue.js实现前端实时展示后端日志的功能，并且可以根据日志级别实时修改展示的颜色，提高可读性。需要注意的是，在前端中需要使用SockJS和Stomp来实现WebSocket的相关功能，在后端中需要开发功能进行对日志信息的处理，并且启用WebSocket来开放端口进行数据传输。