websocket在前端展示后端日志

2018/12/27 21:55
阅读数 189

最近在写平台收到一个需要看后台运行日志的需求,所以查看了下使用websocket来写。主要思想就是使用Linux的tail指令进行实时日记读取,然后在进行与界面通信展示的过程。

第一步

添加pom依赖:

<!-- spring websocket-->

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

第二步

定义一个Bean

@Component

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter(){

        return new ServerEndpointExporter();

    }

}

第三步

这里可以实现两种方式:

一种方式是实时进行打印展示日志,不进行写文件,然后使用tail方式读取;

两外一种方式就是进行写文件,然后使用tail方式读取文件方式(可以直接跳过此步,直接看第四步)。

这两种方式各有优缺点:

1、第一种

优点:实时打印,不需要进行写文件的操作

缺点:界面刷新后日志丢失,无法重现,需要进行一个长链接处理

2、第二种

优点:界面刷新或者关闭重开不影响日志的显示,且日志保存在磁盘中

缺点:需要额外的空间写文件,其他暂未发现

先说说第一种方式,这里需要创建一个service:

@Service

@Slf4j

public class WebLogsService {

    @Autowired private WebSocket webSocket;

    public String output(String message) {

         webSocket.sendMessage(message);

        return "测试";

    }

}

这里主要用来进行一个调用触发日志打印的。第二种方式放在第四步来讲。

第四步

写一个前端websocket来接受后端websocket,这也是一个Controller,但比较特殊,是用WS协议进行通信的。

这里分两个写法:

第一种,对应第三步里的第一种

@Component

@ServerEndpoint("/webSocket/{param}") 

@Slf4j

public class WebSocket {

    private Session session;

    private Process process;

    private InputStream inputStream;

    private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();

    @OnOpen

public void onOpen(Session session){

        this.session=session;

        webSocketSet.add(this);

        log.info("【websocket消息】 有新的连接,总数:{}",webSocketSet.size());

}

@OnClose

public void onClose(){

    webSocketSet.remove(this);

    log.info("【websocket消息】 连接断开,总数:{}",webSocketSet.size());

    try {

        if(inputStream != null) inputStream.close();

    } catch (Exception e) {

        e.printStackTrace();

    }

    if (process != null)

        process.destroy();

}

@OnMessage

public void onMessage(String message){

    log.info("【websocket消息】 收到客户端发来的消息:{}",message);

}

public void sendMessage(String param){

    for(WebSocket webSocket:webSocketSet){

        log.info("【websocket消息】 广播消息,message={}",param);

        try {

            webSocket.session.getBasicRemote().sendText(param);

        }catch (Exception e){

            e.printStackTrace();

            }

        }

    }

}

第二种,对应第三步里的第二种

@Component

@ServerEndpoint("/webSocket/{param}")

@Slf4j

public class WebSocket {

private Sessionsession;

private Processprocess;

private InputStreaminputStream;

private static CopyOnWriteArraySetwebSocketSet=new CopyOnWriteArraySet<>();

@OnOpen

    public void onOpen(Session session,@PathParam("param") String param){

this.session=session;

webSocketSet.add(this);

log.info("【websocket消息】 有新的连接,总数:{}",webSocketSet.size());

try {

// 执行tail -f命令

            process = Runtime.getRuntime().exec("tail -f /log/" + param +".txt");

inputStream =process.getInputStream();

// 一定要启动新的线程,防止InputStream阻塞处理WebSocket的线程

            TailLogThread thread =new TailLogThread(inputStream, session);

thread.start();

}catch (IOException e) {

e.printStackTrace();

}

}

@OnClose

    public void onClose(){

webSocketSet.remove(this);

log.info("【websocket消息】 连接断开,总数:{}",webSocketSet.size());

try {

if(inputStream !=null)

inputStream.close();

}catch (Exception e) {

e.printStackTrace();

}

if(process !=null)

process.destroy();

}

@OnMessage

    public void onMessage(String message){

log.info("【websocket消息】 收到客户端发来的消息:{}",message);

}

}

选择第二种还需要提供线程机制

public class TailLogThreadextends Thread {

private BufferedReaderreader;

private Sessionsession;

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);

}

}catch (IOException e) {

e.printStackTrace();

}

}

}

第五步

前端开发

<br>

<label for="endTime">日志展示:</label>

<div class="conWrap">

<div id="log-container" style="height:800px;overflow-y:scroll;background:#333;color:#aaa;padding:10px;">

<div>

<table id="conversation" class="table table-striped">

<tbody id="greetings"></tbody>

</table>

</div>

</div>

</div>

<script>

var websocket=null;

if('WebSocket' inwindow){

websocket=new WebSocket('ws://localhost:9090/webSocket/${param}');

}else{

alert('该浏览器不支持websocket');

}

websocket.onopen=function (ev) {

console.log('建立连接');

console.log(ev);

};

websocket.onclose=function (ev) {

console.log('连接关闭');

console.log(ev);

};

websocket.onmessage=function (ev) {

console.log('收到消息:'+ev.data);

console.log(ev);

//弹窗提醒,播放消息

//            $("#log-container div").append(ev.data);

        $("#greetings").append("<tr><td style='background: #333; color: #aaa;float: left;border: none'>" + ev.data +"</td></tr>");

// 滚动条滚动到最低部

        $("#log-container").scrollTop($("#log-container div").height() -$("#log-container").height());

};

window.onbeforeunload=function (ev) {

websocket.close();

}

</script>

这里的参数param就是你在磁盘内创建的日志文件。

 

参考:

https://blog.csdn.net/sihai12345/article/details/80924937

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部