springboot向前端页面实时打印日志

最新推荐文章于 2024-08-01 22:00:59 发布

rainteas

最新推荐文章于 2024-08-01 22:00:59 发布

阅读量6.1k

点赞数 4

分类专栏： springboot

本文链接：https://blog.csdn.net/tgb7895/article/details/100725464

版权

springboot 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

springboot向前端页面实时打印日志

加入logback-spring.xml日志配置

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
     <!--    下面这句话意思是保留springboot原先的日志配置，要不然后面日志打不出来了-->
    <include resource="org/springframework/boot/logging/logback/base.xml"/>
    <appender name="mylog" class="com.neusiri.husky.config.MyLogBackAppender">
        <layout
            class="ch.qos.logback.classic.PatternLayout">
            <!--格式化输出：%d表示日期，%thread表示线程名，%-5level：级别从左显示5个字符宽度%msg：日志消息，%n是换行符 -->
            <pattern>%d{@riqi@yyyy-MM-dd HH:mm:ss.SSS@riqi@} @xiancheng@[%thread]@xiancheng@ @dengji@%-5level@dengji@ @bao@%logger{50}@bao@ - %msg%n</pattern>
        </layout>
    </appender>
    <root level="DEBUG">
        <appender-ref ref="mylog" />
    </root>
</configuration>

配置日志class

@Getter
@Setter
public class MyLogBackAppender extends UnsynchronizedAppenderBase<ILoggingEvent> {
// 输出格式，用系统的，不然你输出的东西 不会解析
    Layout<ILoggingEvent> layout;
    @Override
    protected void append(ILoggingEvent eventObject) {
        if (eventObject != null && eventObject.getMessage() != null) {
            String message = layout.doLayout(eventObject);
            try {
            // 自定义的socket发送消息
                WebSocketController.sendMessage(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

配置WebSocketController

@ServerEndpoint("/logUtil")
@Slf4j
@RestController
public class WebSocketController {

    private static Session session;

    @OnOpen
    public void onOpen(Session session) {
        WebSocketController.session = session;
    }

    @OnClose
    public void onClose() {

    }

    @OnMessage
    public void onMessage(String message, Session session) {
        try {
            sendMessage(message+"：成功收到");
        } catch (Exception e) {
            log.error("发送异常");
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
    }

    public static void sendMessage(String message) throws Exception {
        if (session!=null){
            if (WebSocketController.session.isOpen()) {
                WebSocketController.session.getBasicRemote().sendText(message);
            }
        }
    }
}

最后一步注入bean

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

前端页面

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>WebSocket</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        .container-fluid {
            margin-top: 15px;
        }

        .textLog {
            margin-bottom: 15px;
            overflow-y: auto;
            height: 450px;
            cursor: text;
            background-color: #515a6e;
            color: #f8f8f9;
            font-size: 14px;
        }

        input {
            margin-bottom: 15px;
        }

        p button,
        p a {
            margin-right: 10px;
        }
        .container-fluid .jumbotron {
            padding: 20px 20px;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>日志</h2>
            <p>通过这里你可以实时看见后端的日志</p>
            <div class="form-control textLog">
                
            </div>
            <input type="text" class="form-control" placeholder="请输入URL" value="">
            <p>
                <a tabindex="0" class="btn btn-primary connect" role="button" data-trigger="focus" title="建立连接失败"
                    data-content="连接失败，请您仔细检查URL是否有效">建立连接</a>
                <button type="button" class="btn btn-primary clear">清除日志</button>
                <button type="button" class="btn btn-primary break">断开连接</button>
            </p>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
    </script>
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script type="text/javascript">
        let ws;
        $('[data-toggle="popover"]').popover();
        $(".connect").click(function () {
            let url = $("input").val();
            ws = new WebSocket(`ws://${url}`);
            ws.onopen = function () {
                $('.connect').popover('destroy');
                ws.send("发送一条测试数据");
                swal("已连接!", "连接上了哦!", "success");
            };
            ws.onmessage = function (evt) {
                let received_msg = evt.data;
                let reg1 = /@xiancheng@.+@xiancheng@/g;
                received_msg = received_msg.replace(reg1, function(match, pos, originalText){
                    return `<span style="color: #ff9900">${match}</span>`;
                });
                let reg2 = /@dengji@info(\s)*@dengji@/ig;
                received_msg = received_msg.replace(reg2, function(match, pos, originalText){
                    return `<span style="color: #19be6b">${match}</span>`;
                });
                let reg3 = /@dengji@ERROR(\s)*@dengji@/ig;
                received_msg = received_msg.replace(reg3, function(match, pos, originalText){
                    return `<span style="color: #ed4014">${match}</span>`;
                });
                let reg4 = /@bao@.+@bao@/g;
                received_msg = received_msg.replace(reg4, function(match, pos, originalText){
                    return `<span style="color: #2db7f5">${match}</span>`;
                });
                let reg5=/(@xiancheng@)|(@dengji@)|(@bao@)/g;
                received_msg = received_msg.replace(reg5,"");
                $(".textLog").html($(".textLog").html() + "<br>" + received_msg+"<hr>");
                $('.textLog').scrollTop($('.textLog')[0].scrollHeight);
            };
            ws.onerror = function () {
                $('.connect').popover('show');
            }
        });
        $(".clear").click(function () {
            $(".textLog").html("");
        });
        $(".break").click(function () {
            if (ws) {
                ws.close();
                swal("连接断开!", "断开连接了哦!", "success");
            }
        });
    </script>
</body>

</html>