最近在寫平台收到一個需要看后台運行日志的需求，所以查看了下使用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就是你在磁盤內創建的日志文件。
參考：