基于https实现webSocket通信实时在web页面输出日志（两个日志输出）

本文链接：https://blog.youkuaiyun.com/qq_32903893/article/details/53811935

需求

在同一页面输出tomcat和aserver的日志，相互之间不影响且随意切换不会出现jvm内存不足的问题。本人之前用js轮询做的，结果测试疯狂切换导致内存不足浏览器崩溃，卒。学习html5使用webSocket实现。

html5的webSocket简单介绍

页面实现一个webSocket连接

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');

注：如果协议为https的则需要使用wss，并且在浏览器的安全例外中添加你的项目的访问路径

// 创建一个Socket实例
var socket = new WebSocket('wss://localhost:8080');

webSocket的各种用法

 // 打开Socket 
 socket.onopen = function(event) { 

 // 发送一个初始化消息
  socket.send('发送消息!'); 

  // 监听消息
  socket.onmessage = function(event) { 
    console.log('实现监听',event); 
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('监听关闭',event); 
  }; 

  // 关闭Socket.... 
  //socket.close() 
};

以及下面是用到的
onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。

socket.onmessage=function(event) {
//对返回的消息处理
            }

客户端实现（jsp页面实现）

window.onload = function() {
//延时加载日志输出方法，加载完下面的全局变量后执行方法
    setTimeout("alertlog2()",1000);
};
    var websocketServerlog; 
    var websocketTomcatlog; 
    var flag=false;
    var tomcatflag=false;
    //aserver日志输出
    function alertlog() {
        //获取将要输出的位置并将其显示
        var traget = document.getElementById("hiddenLog");
        traget.style.display = "";
        //获取主机地址及端口号，动态显示
        //如： http://localhost:8083  
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        var localhostPaht = curWwwPath.substring(0, pos);
        // 指定websocket路径,去掉https
        var localhostPaht1 = localhostPaht.substring(8, localhostPaht.length);
        websocketServerlog = new WebSocket('wss://' + localhostPaht1 + '/serverLog');
        //清空上一次输出的内容
        $('#hiddenLog div').html("");
        //判断另一个webSocket是否开启，如果开启则关闭
        if(tomcatflag==true){
        websocketTomcatlog.close();
              tomcatflag=false;
        }
        //对返回的数据处理
        websocketServerlog.onmessage = function(event) {
            flag=true;
            // 接收服务端的实时日志并添加到HTML页面中
            $("#hiddenLog div").append(event.data);
            // 滚动条滚动到最低部
            $("#hiddenLog").scrollTop(
            $("#hiddenLog div").height() - $("#hiddenLog").height());
        };
    }
    //tomcat日志输出
    function alertlog2() {
        var traget = document.getElementById("hiddenLog");
        traget.style.display = "";
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        var localhostPaht = curWwwPath.substring(0, pos);
        // 指定websocket路径
        var localhostPaht1 = localhostPaht.substring(8, localhostPaht.length);
         websocketTomcatlog = new WebSocket('wss://' + localhostPaht1 + '/tomcatLog');
        $('#hiddenLog div').html("");
        if(flag==true){
        websocketServerlog.close();
        flag=false;
        }
        websocketTomcatlog.onmessage = function(event) {
            tomcatflag=true;
            // 接收服务端的实时日志并添加到HTML页面中
            $("#hiddenLog div").append(event.data);
            // 滚动条滚动到最低部
            $("#hiddenLog").scrollTop(
            $("#hiddenLog div").height() - $("#hiddenLog").height());
        };

    }


//输出区域（非js代码，html代码）可自行调整
<!-- 隐藏日志 -->
    <div id="hiddenLog" class="hiddenLog"
        style="min-height: 300px; overflow-y: auto; max-height: 500px; display: none; padding-left: 30px">
        <div></div>
    </div>

服务端实现

tomcat日志

package com.yx.web.webSocket;
import java.io.IOException;
import java.io.InputStream;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/tomcatLog")
public class LogWebSocketHandle {

    private Process process;
    private InputStream inputStream;

    /**
     * 新的WebSocket请求开启
     */
    @OnOpen
    public void onOpen(Session session) {
        try {
            // 执行tail -f命令
            //如果非root启动liunux注意权限问题
            //路径改为自己的日志文件路径
            process = Runtime.getRuntime().exec("tail -f /work/weblogs/catalina.out");
            inputStream = process.getInputStream();

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

    /**
     * WebSocket请求关闭
     */
    @OnClose
    public void onClose() {
        try {
            if(inputStream != null)
                inputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        if(process != null)
            process.destroy();
    }

    @OnError
    public void onError(Throwable thr) {
        thr.printStackTrace();
    }
}

aserver同上注意访问路径，及输出的路径问题

线程开启

package com.yx.web.webSocket;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

import javax.websocket.Session;

public class TailLogThread extends Thread {

    private BufferedReader reader;
    private Session session;

    public TailLogThread(InputStream in, Session session) {
        this.reader = new BufferedReader(new InputStreamReader(in));
        this.session = session;

    }

    @Override
    public void run() {
        String line;
        try {
            while((line = reader.readLine()) != null) {
                // 将实时日志通过WebSocket发送给客户端，给每一行添加一个HTML换行
                session.getBasicRemote().sendText(line + "<br>");
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}