有没有办法在浏览器中实时查看我的Web应用程序tomcat日志？

Z时代
2024-01-10
分类：问答

我正在使用log4j记录我的数据。我希望能够在浏览器中与Web应用程序一起实时查看日志文件。有诸如Chainsaw之类的独立工具非常好，但是它们不能满足在浏览器中实时查看日志的目的。

有人可以帮我吗？

回答：

一个简单的例子是：

Servlet（根据需要更改日志文件的路径）：

@WebServlet(name = "Log", urlPatterns = { "/log" }) 
public class LogServlet extends HttpServlet { 
  private static final long serialVersionUID = 7503953988166684851L;
  public LogServlet() { 
    super(); 
  }
  @Override 
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 
    Path path = FileSystems.getDefault()
          .getPath("/path/to/tomcat/logs", "catalina.out"); 
    StringBuilder logContent = new StringBuilder(); 
    logContent.append("<pre>"); 
    try (BufferedReader reader = Files.newBufferedReader(path, StandardCharsets.UTF_8);) { 
        String line = null; 
        while ((line = reader.readLine()) != null) { 
            logContent.append(line).append("<br/>"); 
        } 
    } catch (IOException x) { 
        // Take care of that 
    } 
    logContent.append("</pre>"); 
    resp.getWriter().print(logContent.toString()); 
  }
  @Override 
  public void init(ServletConfig servletConfig) throws ServletException { 
    super.init(servletConfig); 
  } 
}

HTML页面：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Log viewer</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>window.jQuery || document.write(unescape('%3Cscript src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.10.2.min.js"%3E%3C/script%3E'))
  </script>
  <script type="text/javascript">
   var logging = false;
   function refreshLog() {
    if (logging) {
     $.get('/log', function(data) {
      $('#log').html(data);
     });
    }
    if (logging) {
      setTimeout(function() {
       refreshLog()
      }, 5000);
    }
   }
   function toggleLogs() {
    if (logging) {
     logging = false;
     $("#tog").val("Start");
    } else {
     logging = true;
     $("#tog").val("Stop");
     refreshLog();
    }
   }
  </script>
 </head>
 <body style="width: 100%; padding: 0; margin: 0">
  <input type="button" id="tog" onclick="toggleLogs()" value="Start" />
  <div id="log" style="width: 100%; padding: 0; margin: 0"></div>
 </body>
</html>