web项目使用WebSocket技术实现html实时打印log日志

发布时间:2022-03-01 12:19:55 作者:yexindonglai@163.com 阅读(70)

      有时候进行查找错误的时候非要进入到linux系统里面查看服务打印的日志才知道错在哪,这就给排查时间增加了一些时间,所以为了方便,突发奇想,何不自己开发一个可以实时查看日志的接口呢,于是开发出了这么个玩意;

项目下载地址:https://download.csdn.net/download/qq_27184497/12311384

效果图如下:

每次更新日志时,网页上都会打印出来相应的日志内容,代码也很简单

先导入pom依赖

  1. <dependency>
  2. <groupId>javax.websocket</groupId>
  3. <artifactId>javax.websocket-api</artifactId>
  4. <version>1.1</version>
  5. <scope>provided</scope>
  6. </dependency>

服务端代码:LogWebSocketHandle.java

  1. package com.xxg.websocket;
  2. import java.io.IOException;
  3. import java.io.InputStream;
  4. import javax.websocket.OnClose;
  5. import javax.websocket.OnError;
  6. import javax.websocket.OnOpen;
  7. import javax.websocket.Session;
  8. import javax.websocket.server.ServerEndpoint;
  9. @ServerEndpoint("/log")
  10. public class LogWebSocketHandle {
  11. private Process process;
  12. private InputStream inputStream;
  13. /**
  14. * 新的WebSocket请求开启
  15. */
  16. @OnOpen
  17. public void onOpen(Session session) {
  18. try {
  19. // 执行tail -f命令
  20. process = Runtime.getRuntime().exec("tail -f /Users/apple/Documents/t_chat.txt ");
  21. inputStream = process.getInputStream();
  22. // 一定要启动新的线程,防止InputStream阻塞处理WebSocket的线程
  23. TailLogThread thread = new TailLogThread(inputStream, session);
  24. thread.start();
  25. } catch (IOException e) {
  26. e.printStackTrace();
  27. }
  28. }
  29. /**
  30. * WebSocket请求关闭
  31. */
  32. @OnClose
  33. public void onClose() {
  34. try {
  35. if(inputStream != null)
  36. inputStream.close();
  37. } catch (Exception e) {
  38. e.printStackTrace();
  39. }
  40. if(process != null)
  41. process.destroy();
  42. }
  43. @OnError
  44. public void onError(Throwable thr) {
  45. thr.printStackTrace();
  46. }
  47. }

 服务端代码  TailLogThread.java

  1. package com.xxg.websocket;
  2. import java.io.BufferedReader;
  3. import java.io.IOException;
  4. import java.io.InputStream;
  5. import java.io.InputStreamReader;
  6. import javax.websocket.Session;
  7. public class TailLogThread extends Thread {
  8. private BufferedReader reader;
  9. private Session session;
  10. public TailLogThread(InputStream in, Session session) {
  11. this.reader = new BufferedReader(new InputStreamReader(in));
  12. this.session = session;
  13. }
  14. @Override
  15. public void run() {
  16. String line;
  17. try {
  18. while((line = reader.readLine()) != null) {
  19. // 将实时日志通过WebSocket发送给客户端,给每一行添加一个HTML换行
  20. session.getBasicRemote().sendText(line + "<br>");
  21. }
  22. } catch (IOException e) {
  23. e.printStackTrace();
  24. }
  25. }
  26. }

前端代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>tail log</title>
  6. <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
  7. </head>
  8. <body>
  9. <div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
  10. <div>
  11. </div>
  12. </div>
  13. </body>
  14. <script>
  15. $(document).ready(function() {
  16. // 指定websocket路径
  17. var websocket = new WebSocket('ws://localhost:8080/log');
  18. websocket.onmessage = function(event) {
  19. console.log("收到请求。。。")
  20. // 接收服务端的实时日志并添加到HTML页面中
  21. $("#log-container div").append(event.data);
  22. // 滚动条滚动到最低部
  23. $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
  24. };
  25. });
  26. </script>
  27. </body>
  28. </html>

这样就完成了,是不是很简单呢?

关键字后端