由于工作需要我们想要实现一个从页面能够查看tomcat后台日志的功能，我们有两种方案:

将日志保存到mongo DB中，从页面进行查看，mongo DB中的日志定期清理
通过WebSocket实现读取后台日志的功能，最简单的就是利用tail命令实现

下面主要说一下我在通过WebSocket实现tail查看实时滚动日志时遇到的问题和解决方法

首先呢，我先在GitHub上找到了一个例子
文章的末尾有GitHub的地址，我down了下来，需要注意三个地方

pom中下面的dependency scope一定要设置成provided，避免与tomcat自带的websocket-api冲突，我遇到问题时查了很多帖子，有些说没有影响的，但是万一要有影响呢，包冲突还是最好避免掉

        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>1.1</version>
            <scope>provided</scope>
        </dependency>

index.html中的js脚本

<script>
    $(document).ready(function() {
        // 指定websocket路径
        var websocket = new WebSocket('ws://192.168.80.128:8080/websocket/log');
        websocket.onmessage = function(event) {
            // 接收服务端的实时日志并添加到HTML页面中
            $("#log-container div").append(event.data);
            // 滚动条滚动到最低部
            $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
        };
    });
</script>

其中
var websocket = new WebSocket('ws://192.168.80.128:8080/websocket/log');
这句的路径一定要写对，我从GitHub上拉下来的代码，是这样的
var websocket = new WebSocket('ws://192.168.80.128:8080/log');
看着没什么区别，因为你用本地服务器启动时，这个路径取决于你再IDE中的设置

Image 4.png

Image 5.png

如果路径是像我上面那样写，就要按照ws://ip:port/applicationContext/requestMapping格式去写，否则就会报无法连接的错误
如果你的application context是"/"，就按ws://ip:port/requestMapping格式写就OK

我就是在这就出现的问题，因为我是想通过tail命令去读tomcat logs下的catalina.out，所以我打好包，发到linux服务器进行测试时，报了404错误，Firefox 无法建立到 ws://192.168.80.128:8080/log 服务器的连接。
因为我打的包是websockettail-1.0.0.war

    <groupId>com.xxg</groupId>
    <artifactId>websockettail</artifactId>
    <version>1.0.0</version>

所以实际上默认的Application Context路径并不是"/"，而是“websockettail-1.0.0”，对应的ws路径应为ws://192.168.80.128:8080/websockettail-1.0.0/log
改好之后就可以正常输出了，我测试的命令是"ifconfig"

Image 6.png

这里还是比较容易出错的，一定要注意

LogWebSocketController中的命令改成tail命令

    @OnOpen
    public void onOpen(Session session) {
        try {
            // 执行tail -f命令
            process = Runtime.getRuntime().exec("tail -f /opt/XXX/logs/catalina.out -n 500");
            inputStream = process.getInputStream();

            // 一定要启动新的线程，防止InputStream阻塞处理WebSocket的线程
            TailLogThread thread = new TailLogThread(inputStream, session);
            thread.start();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

这三个地方都改好后再放到Linux服务器上启动，就没问题了。

下面再说一下使用Nginx对Websocket进行反向代理的配置
公司的项目都是走的nginx反向代理，可以通过改nginx.conf来实现

修改Nginx主配置文件

$ vim /usr/local/nginx/conf/nginx.conf

# 在http上下文中增加如下配置，确保Nginx能处理正常http请求。

http{
  map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
  }

  upstream websocket {
    #ip_hash;
    server localhost:8010;  
    server localhost:8011;
  }

# 以下配置是在server上下文中添加，location指用于websocket连接的path。

  server {
    listen       80;
    server_name localhost;
    access_log /var/log/nginx/yourdomain.log;

    location / {
      proxy_pass http://websocket;
      proxy_read_timeout 300s;

      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
        }
    }
}

最重要的就是在反向代理的配置中增加了如下两行，其它的部分和普通的HTTP反向代理没有任何差别。

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;

这里面的关键部分在于HTTP的请求中多了如下头部：

Upgrade: websocket
Connection: Upgrade

这两个字段表示请求服务器升级协议为WebSocket。服务器处理完请求后，响应如下报文：

状态码为101

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: upgrade

配置改好后执行
nginx -s reload
就可以正常访问

Image 7.png

参考博客地址：
http://xxgblog.com/2015/11/25/java-websocket-tail/
https://www.hi-linux.com/posts/42176.html

以上代码可以从github上获取，我修改了一些东西，致敬原创者
https://github.com/CarolineHuang5954/websocket-tail-demo.git

WebSocket+Nginx实现动态日志监控-简单版

WebSocket+Nginx实现动态日志监控-简单版

状态码为101