websocket在前端展現後端日誌

最近在寫平臺收到一個須要看後臺運行日誌的需求，因此查看了下使用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方式讀取文件方式（能夠直接跳過此步，直接看第四步）。

這兩種方式各有優缺點：

一、第一種

優勢：實時打印，不須要進行寫文件的操做

缺點：界面刷新後日志丟失，沒法重現，須要進行一個長連接處理

二、第二種

優勢：界面刷新或者關閉重開不影響日誌的顯示，且日誌保存在磁盤中

缺點：須要額外的空間寫文件，其餘暫未發現

先說說第一種方式，這裏須要建立一個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