自己参考其他博客搭建的一个简单websocket日志推送框架,集成到项目中也比较方便
1.pom.xml导入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.application.properties配置
server.port=8087
spring.resources.static-locations=classpath:/templates/
#spring.thymeleaf.cache=false
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html
3.添加以下三个类
第一个类的log路径需要改成自己要显示的log路径
@ServerEndpoint("/log")
@Component
public class LogWebSocketHandle {
private Process process;
private InputStream inputStream;
/**
* 新的WebSocket请求开启
*/
@OnOpen
public void onOpen(Session session) {
try {
// 执行tail -f命令,填写自己的log路径
process = Runtime.getRuntime().exec("tail -100f xxx.log");
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();
}
}
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();
}
}
}
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
4.启动类
@SpringBootApplication
@Controller
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
/**
* 登陆界面
*/
@GetMapping("/")
public ModelAndView login() {
return new ModelAndView("index");
}
}
5.前端界面(需要修改为自己的websocket路径)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tail log</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
<div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// 指定websocket路径
var websocket = new WebSocket('ws://localhost:8087/log');
websocket.onmessage = function (event) {
// 接收服务端的实时日志并添加到HTML页面中
$("#log-container div").append(event.data);
// 滚动条滚动到最低部
$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
};
});
</script>
</body>
</html>
结果展示如下: