Springboot + Websocket + Sockjs + Stomp + Vue + Iview 实现java后端日志显示在前端web页面上

话不多说，看代码。

一、pom.xml 引入spring boot websocket依赖

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>

二、WebSocketConfig 配置WebSocket消息代理端点，即stomp服务端

 @Slf4j
 @Configuration
 @EnableWebSocketMessageBroker // 注解开启STOMP协议来传输基于代理的消息，此时控制器支持使用
 @MessageMapping
 public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer
 {
     @Autowired
     private SimpMessagingTemplate messagingTemplate;

     // 测试
     // int info = 1;
     //
     // @Scheduled(fixedRate = 4000)
     // public void outputLogger()
     // {
     // log.info("测试日志输出" + info++);
     // }

     @Override
     public void registerStompEndpoints(StompEndpointRegistry registry)
     {
         // 将clientMessage注册为STOMP的一个端点
         // 客户端在订阅或发布消息到目的路径前，要连接该端点
         // setAllowedOrigins允许所有域连接，否则浏览器可能报403错误
         registry.addEndpoint("/websocket").setAllowedOrigins("*").addInterceptors().withSockJS(); //
     }

     /**
      * 推送日志到/topic/pullLogger
      */
     @PostConstruct
     public void pushLogger()
     {
         ExecutorService executorService = Executors.newFixedThreadPool(4);
         Runnable fileLog = new Runnable()
         {
             @Override
             public void run()
             {
                 while (true)
                 {
                     try
                     {
                         String log = LoggerQueue.getInstance().poll().toString();
                         if (log != null)
                         {
                             if (messagingTemplate != null)
                                 messagingTemplate.convertAndSend("/topic/pullFileLogger", log);
                         }
                     }
                     catch (Exception e)
                     {
                         e.printStackTrace();
                     }
                 }
             }
         };
         executorService.submit(fileLog);
         executorService.submit(fileLog);
     }
 }

三、新增日志消息实体

 /*
  * 日志消息实体类，这里用了lombok插件
  * 没有安装该插件的话，就手动添加get、set方法、toString方法
  */
 @Getter
 @Setter
 @ToString
 @AllArgsConstructor
 public class LoggerMessage
 {
     private String body;
     private String timestamp;
     private String threadName;
     private String className;
     private String level;
     private String exception;
     private String cause;
 }

四、创建一个阻塞队列，作为日志系统输出的日志的一个临时载体

 /*
  * 创建一个阻塞队列，作为日志系统输出的日志的一个临时载体
  */
 public class LoggerQueue
 {
     // 队列大小
     public static final int QUEUE_MAX_SIZE = 10000;
     private static LoggerQueue alarmMessageQueue = new LoggerQueue();
     // 阻塞队列
     private BlockingQueue blockingQueue = new LinkedBlockingQueue<>(QUEUE_MAX_SIZE);

     private LoggerQueue()
     {
     }

     public static LoggerQueue getInstance()
     {
         return alarmMessageQueue;
     }

     /**
      * 消息入队
      *
      * @param log
      * @return
      */
     public boolean push(LoggerMessage log)
     {
         return this.blockingQueue.add(log);// 队列满了就抛出异常，不阻塞
     }

     /**
      * 消息出队
      *
      * @return
      */
     public LoggerMessage poll()
     {
         LoggerMessage result = null;
         try
         {
             result = (LoggerMessage) this.blockingQueue.take();
         }
         catch (InterruptedException e)
         {
             e.printStackTrace();
         }
         return result;
     }
 }

五、获取logback的日志，塞入日志队列中

　　1.定义Logfilter拦截输出日志

 @Service
 public class LogFilter extends Filter<ILoggingEvent>
 {
     @Override
     public FilterReply decide(ILoggingEvent event)
     {
         String exception = "";
         IThrowableProxy iThrowableProxy1 = event.getThrowableProxy();
         if (iThrowableProxy1 != null)
         {
             exception = "<span class='excehtext'>" + iThrowableProxy1.getClassName() + " " + iThrowableProxy1.getMessage() + "</span></br>";
             for (int i = 0; i < iThrowableProxy1.getStackTraceElementProxyArray().length; i++)
             {
                 exception += "<span class='excetext'>" + iThrowableProxy1.getStackTraceElementProxyArray()[i].toString() + "</span></br>";
             }
         }
         LoggerMessage loggerMessage = new LoggerMessage(event.getMessage(), DateFormat.getDateTimeInstance().format(new Date(event.getTimeStamp())), event.getThreadName(), event.getLoggerName(),
                 event.getLevel().levelStr, exception, "");
         LoggerQueue.getInstance().push(loggerMessage);
         return FilterReply.ACCEPT;
     }
 }

　　2.配置logback-spring.xml,添加我们自定义的filter

 <?xml version="1.0" encoding="UTF-8"?>
 <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL，如果设置为WARN，则低于WARN的信息都不会输出 -->
 <!-- scan:当此属性设置为true时，配置文档如果发生改变，将会被重新加载，默认值为true -->
 <!-- scanPeriod:设置监测配置文档是否有修改的时间间隔，如果没有给出时间单位，默认单位是毫秒。
                  当scan为true时，此属性生效。默认的时间间隔为1分钟。 -->
 <!-- debug:当此属性设置为true时，将打印出logback内部日志信息，实时查看logback运行状态。默认值为false。 -->
 <configuration  scan="true" scanPeriod="10 seconds">
     <contextName>logback</contextName>
      <include resource="org/springframework/boot/logging/logback/defaults.xml" />
      <include resource="org/springframework/boot/logging/logback/file-appender.xml" />
     <!-- name的值是变量的名称，value的值时变量定义的值。通过定义的值会被插入到logger上下文中。定义后，可以使“${}”来使用变量。 -->
     <property name="log.path" value="/var/log/" />

     <!--0. 日志格式和颜色渲染 -->
     <!-- 彩色日志依赖的渲染类 -->
     <conversionRule conversionWord="clr" converterClass="org.springframework.boot.logging.logback.ColorConverter" />
     <conversionRule conversionWord="wex" converterClass="org.springframework.boot.logging.logback.WhitespaceThrowableProxyConverter" />
     <conversionRule conversionWord="wEx" converterClass="org.springframework.boot.logging.logback.ExtendedWhitespaceThrowableProxyConverter" />
     <!-- 彩色日志格式 -->
     <property name="CONSOLE_LOG_PATTERN" value="${CONSOLE_LOG_PATTERN:-%clr(%d{yyyy-MM-dd HH:mm:ss.SSS}){faint} %clr(${LOG_LEVEL_PATTERN:-%5p}) %clr(${PID:- }){magenta} %clr(---){faint} %clr([%15.15t]){faint} %clr(%-40.40logger{39}){cyan} %clr(:){faint} %m%n${LOG_EXCEPTION_CONVERSION_WORD:-%wEx}}"/>

     <!--1. 输出到控制台-->
     <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
         <!--此日志appender是为开发使用，只配置最底级别，控制台输出的日志级别是大于或等于此级别的日志信息-->
         <!-- <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
             <level>info</level>
         </filter> -->
         <encoder>
             <Pattern>${CONSOLE_LOG_PATTERN}</Pattern>
             <!-- 设置字符集 -->
             <charset>UTF-8</charset>
         </encoder>
         <!--此日志appender是为开发使用，只配置最底级别，控制台输出的日志级别是大于或等于此级别的日志信息-->
         <filter class="com.hmkj.ddos.config.LogFilter">
         </filter>
     </appender>

     <!-- 2.2 level为 INFO 日志，时间滚动输出  -->
     <appender name="INFO_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
         <!-- 正在记录的日志文档的路径及文档名 -->
         <file>${log.path}/hmddos.log</file>
         <!--日志文档输出格式-->
         <encoder>
             <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>
             <charset>UTF-8</charset>
         </encoder>
         <!-- 日志记录器的滚动策略，按日期，按大小记录 -->
         <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
             <!-- 每天日志归档路径以及格式 -->
             <fileNamePattern>${log.path}/web-info-%d{yyyy-MM-dd}.%i.log</fileNamePattern>
             <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                 <maxFileSize>10MB</maxFileSize>
             </timeBasedFileNamingAndTriggeringPolicy>
             <!--日志文档保留天数-->
             <maxHistory>15</maxHistory>
         </rollingPolicy>
         <!-- 此日志文档只记录info级别的 -->
         <filter class="ch.qos.logback.classic.filter.LevelFilter">
             <level>info</level>
             <onMatch>ACCEPT</onMatch>
             <onMismatch>DENY</onMismatch>
         </filter>
     </appender>

     <root level="info">
         <appender-ref ref="CONSOLE" />
         <appender-ref ref="INFO_FILE" />
     </root>
 </configuration>

六、Vue中添加基于webSocket通信的库

　　先安装 sockjs-client 和 stompjs

　　注意： 在安装stompjs出现一个问题，net 模块不存在，则应该在项目根目录再执行npm install net 即可。

 npm install sockjs-client
 npm install stompjs

　　.vue页面

 <template>
 　　<div>
 　　　　<Card dis-hover>
 4 　　　　　　<p slot="title" style="padding-bottom: 20px; padding-top: 5px;">
           　　监听程序日志
 6 　　　　　　</p>
               <Button type="primary" @click="openSocket">开启日志</Button>&nbsp;&nbsp;
               <Button type="error" @click="closeSocket">关闭日志</Button><br><br>
               <div id="filelog-container" style="height: 400px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
               　　<div id="aa">{{pullFileLogger}}</div>
               </div>
     　　</Card>
     </div>
 </template>

 <script>
 // 安装并引入相关模块
 import SockJS from 'sockjs-client';
 import Stomp from 'stompjs';
 export default {
     data(){
         return {
             pullLogger: '',
             pullFileLogger: '正在连接websocket，请稍后~',
             stompClient: null
         }
     },
     methods:{
         openSocket () {
             if (this.stompClient === null) {
                 console.log('打开websocket连接')
                 this.pullFileLogger = '正在连接websocket，请稍后~'
                 let _that = this
                 var socket = new SockJS('http://localhost:7788/websocket?token=kl');
                 _that.stompClient = Stomp.over(socket);
                 _that.stompClient.connect({token:"kl"}, function(frame) {
                     _that.stompClient.subscribe('/topic/pullFileLogger', function(event) {
                         _that.pullFileLogger = ''
                             var content = event.body
                             var aa = document.getElementById('aa')
                             var p = document.createElement('p')
                             p.style.wordWrap = 'break-word'
                             p.style.fontSize = 18 + 'px'
                             p.appendChild(document.createTextNode(event.body))
                             aa.appendChild(p)
                             var div1 = document.getElementById('filelog-container')
                             div1.scrollTop = div1.scrollHeight
                     }, {
                             token:"kltoen"
                     })
                 })
             }
         },
         closeSocket () {
             if (this.stompClient != null) {
                 this.stompClient.disconnect()
                 this.stompClient = null
                 console.log("关闭websocket连接")
                 this.pullFileLogger = 'websocket连接已关闭'
             }
         }
     },
     //销毁页面之前，断开连接
     beforeDestroy: function () {
         //页面离开时断开连接,清除定时器
         this.closeSocket()
     },
     mounted(){
         //调用初始化websocket方法
         this.openSocket()
     }
 }
 </script>
 <style>
 </style>

七、效果图，字体颜色背景颜色可以自行修改样式。

有什么不对的地方欢迎大家评论指点。