最近在写平台收到一个需要看后台运行日志的需求，所以查看了下使用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就是你在磁盘内创建的日志文件。
参考：
网友评论