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

需求

在同一页面输出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();        }    }}

神坑注意

如果设置了各种过滤器，控制台报错连接不上时，请注意自己的过滤器是否把请求拦截了