有些时候webapp有需求将日志输出到前台页面，便于开发者查看日志，本篇将介绍如何将日志输出到前台显示；

　　WebSocket技术、log4j、miniui（本项目所用前端，其他也一样）；

　　受到此博主的启发，特感谢此博主：https://blog.csdn.net/xiao__gui/article/details/50041673

　　

  1. log4j.rootLogger=debug,stdout,WA
    # 选用WriterAppender作为Appender，表示以流的形式输出，这个Appender一般很少用，是常用Appender的父类
  2. log4j.appender.WA=org.apache.log4j.WriterAppender
  3. log4j.appender.WA.Threshold=debug
  4. log4j.appender.WA.layout=org.apache.log4j.PatternLayout
    # %X{ip} 输出本服务器的ip，通过MDC输入（见后面描述）
  5. log4j.appender.WA.layout.ConversionPattern=%d{ISO8601} - [%X{ip}] -%5p %c{1}:%L - %m%n

 

  1. import java.io.PipedReader;
  2. import java.io.PipedWriter;
  3. import java.io.Writer;
  4. import java.net.InetAddress;
  5. import javax.websocket.OnClose;
  6. import javax.websocket.OnError;
  7. import javax.websocket.OnOpen;
  8. import javax.websocket.Session;
  9. import javax.websocket.server.ServerEndpoint;
  10. import org.apache.log4j.Appender;
  11. import org.apache.log4j.Logger;
  12. import org.apache.log4j.MDC;
  13. import org.apache.log4j.WriterAppender;
  15. /**
  16.  * @Author : ycj
  17.  * @Description : 日志文件处理websocket服务
  18.  * @CreateDate : 2018/6/12 9:42
  19.  */
  20. @ServerEndpoint("/log")
  21. public class LogWebsocketHandle {
  23.   private PipedReader reader;
  24.   private Writer writer;
  26.   /**
  27.    * WebSocket请求开启
  28.    */
  29.   @OnOpen
  30.   public void onOpen(Session session) {
  31.     Logger root = Logger.getRootLogger();
  32.     try {
  33.       // 获取本服务器id
  34.       String hostAddress = InetAddress.getLocalHost().getHostAddress();
    　　　// MDC是key-value结构，有兴趣的可以去了解下，在log4j的配置中设置 %X{ip},在日志中输出
  35.       MDC.put("ip",hostAddress);
  36.       Appender appender = root.getAppender("WA");
    　　　// 通过管道流进行线程间的通讯
  37.       reader = new PipedReader();
  38.       writer = new PipedWriter( reader) ;
  39.       ((WriterAppender) appender).setWriter(writer);
  40.       // 启动新的线程
  41.       LogThread thread = new LogThread(reader, session);
  42.       thread.start();
  43.     } catch (Exception ex) {
  44.       ex.printStackTrace();
  45.     }
  46.   }
  48.   /**
  49.    * WebSocket请求关闭，关闭请求时调用此方法，关闭流
  50.    */
  51.   @OnClose
  52.   public void onClose() {
  53.     try {
  54.       if(reader != null) {
  55.         reader.close();
  56.       }
  57.     } catch (Exception ex) {
  58.       ex.printStackTrace();
  59.     }
  60.     try {
  61.       if(writer != null) {
  62.         writer.close();
  63.       }
  64.     } catch (Exception ex) {
  65.       ex.printStackTrace();
  66.     }
  68.   }
  70.   @OnError
  71.   public void onError(Throwable thr) {
  72.     thr.printStackTrace();
  73.   }
  74. }

 

　　LogThread 线程

  1. import java.io.BufferedReader;
  2. import java.io.IOException;
  3. import java.io.PipedReader;
  5. import javax.websocket.Session;
  7. /**
  8.  * 新线程
  9.  */
  10. public class LogThread extends Thread {
  11.     private BufferedReader reader;
  12.     private Session session;
  14.     public LogThread(PipedReader pipedReader, Session session) {
  15.         this.reader = new BufferedReader(pipedReader);
  16.         this.session = session;
  18.     }
  20.     @Override
  21.     public void run() {
  22.         String line;
  23.         try {
  24.             while((line = reader.readLine()) != null) {
  25.                 // 将实时日志通过WebSocket发送给客户端
  26.                 session.getBasicRemote().sendText(line + "<br>");
  27.       }
  28.         } catch (IOException e) {
  29.             e.printStackTrace();
  30.         }
  31.     }
  32. }

　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>tail log</title>
    　<!-- 此boot.js不需要-->
  6.   <script src="../../boot.js"></script>
  7.   <script src="../../js/jquery-1.6.2.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="log-container" style="height: 480px; overflow-y: scroll; background: #333;padding: 10px;">
  11.   <div>
  12.   </div>
  13. </div>
  14. <div>
    　　<!-- 下面div用的是miniui的样式，其他的稍微改变一下即可-->
  15.   <div id="ck1" name="product" class="mini-checkbox"  checked = "true" readOnly="false" text="是否滚动"
  16.        onvaluechanged="onValueChanged" style="left: 20px"></div>
  17.   <a style="left: 30px;top: 1px" class="mini-button mini-button-info"
  18.      onclick="clearContext()">清屏</a>
  19. </div>
  20. </body>
  21. <script>
  23.   // 控制是否滚动显示日志
  24.   var checked = true;
  25.   function onValueChanged(e) {
  26.     checked = this.getChecked();
  27.   }
  29.   $(document).ready(function() {
  31.     // 指定websocket路径,此地址建议根据用js动态获取
  32.     var websocket = new WebSocket('ws://localhost:8080/log');
  33.     websocket.onmessage = function(event) {
  35.       // 接收服务端的实时日志并添加到HTML页面中（error显示红色）
  36.       if (event.data.search("ERROR") != -1) {
  37.         $("#log-container div").append(event.data).css("color", "#AA0000");
  38.       } else {
  39.         $("#log-container div").append(event.data).css("color", "#aaa");
  40.       }
  42.       // 是否滚动
  43.       if (checked) {
  44.         // 滚动条滚动到最低部
  45.         $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
  46.       }
  47.     };
  48.   });
  50.   // 清屏日志
  51.   function clearContext() {
  52.     $("#log-container div").empty();
  53.   }
  55. </script>
  56. </body>
  57. </html>
  1. // 此方式获取的bootPath项目根路径放入WebSocket路径需要进行截取
    JsPath = function (js) {
  2.     var scripts = document.getElementsByTagName("script");
  3.     var path = "";
  4.     for (var i = 0, l = scripts.length; i < l; i++) {
  5.         var src = scripts[i].src;
  6.         if (src.indexOf(js) != -1) {
  7.             var ss = src.split(js);
  8.             path = ss[0];
  9.             break;
  10.         }
  11.     }
  12.     var href = location.href;
  13.     href = href.split("#")[0];
  14.     href = href.split("?")[0];
  15.     var ss = href.split("/");
  16.     ss.length = ss.length - 1;
  17.     href = ss.join("/");
  18.     if (path.indexOf("https:") == -1 && path.indexOf("http:") == -1 && path.indexOf("file:") == -1 && path.indexOf("\/") != 0) {
  19.         path = href + "/" + path;
  20.     }
  21.     return path;
  22. }
  24. var bootPATH = JsPath("boot.js");

 

 

版权声明：本文为ycjcham原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ycjcham/p/9243455.html