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/[email protected]/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/[email protected]/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>