Real-Time Monitoring System Using WebSocket with Vue Frontend and SpringBoot Backend
This tutorial explains how to build a real‑time fire‑equipment monitoring application where a Vue.js front‑end receives abnormal event notifications via WebSocket from a SpringBoot back‑end that broadcasts device status changes instantly.
Introduction: The article describes a real‑time monitoring scenario for fire‑equipment inspections where abnormal events reported from a mobile client need to be pushed instantly to a monitoring page.
Frontend implementation: Uses a simple Vue.js page that lists devices, highlights abnormal ones in red, and establishes a WebSocket connection to receive updates. The full HTML/JavaScript source is provided.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实时监控</title>
</head>
<style>
.item {display:flex;border-bottom:1px solid #000;justify-content:space-between;width:30%;line-height:50px;height:50px;}
.item span:nth-child(2){margin-right:10px;margin-top:15px;width:20px;height:20px;border-radius:50%;background:#55ff00;}
.nowI{background:#ff0000 !important;}
</style>
<body>
<div id="app">
<div v-for="item in list" class="item">
<span>{{item.id}}.{{item.name}}</span>
<span :class='item.state==-1?"nowI":""'></span>
</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {list:[{id:1,name:'张三',state:1},{id:2,name:'李四',state:1},{id:3,name:'王五',state:1},{id:4,name:'韩梅梅',state:1},{id:5,name:'李磊',state:1}]}
})
var webSocket = null;
if('WebSocket' in window){
webSocket = new WebSocket("ws://localhost:18801/webSocket/" + getUUID());
webSocket.onopen = function(){ console.log("已连接"); webSocket.send("消息发送测试"); };
webSocket.onmessage = function(msg){
var serverMsg = msg.data;
var t_id = parseInt(serverMsg);
for(var i=0;i<vm.list.length;i++){
var item = vm.list[i];
if(item.id == t_id){
item.state = -1;
vm.list.splice(i,1,item);
break;
}
}
};
webSocket.onclose = function(){ console.log("websocket已关闭"); };
webSocket.onerror = function(){ console.log("websocket发生了错误"); };
} else { alert("很遗憾，您的浏览器不支持WebSocket！"); }
function getUUID(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){ var r=Math.random()*16|0, v=c=='x'?r:(r&0x3|0x8); return v.toString(16);}); }
</script>
</html>Backend implementation: A Spring Boot project with WebSocket dependency is created. The application.yml configures the server port and a simple password. WebSocketConfig registers the endpoint, and WebSocketServer manages client sessions, broadcasts messages, and handles errors. A REST controller receives abnormal‑device IDs and triggers a broadcast.
# application.yml
server:
port: 18801
mySocket:
myPwd: jae_123@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}@ServerEndpoint("/webSocket/{uid}")
@Component
public class WebSocketServer {
private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
private static final AtomicInteger onlineNum = new AtomicInteger(0);
private static CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session, @PathParam(value = "uid") String uid){
sessionPools.add(session);
onlineNum.incrementAndGet();
log.info(uid + "加入webSocket！当前人数为" + onlineNum);
}
@OnClose
public void onClose(Session session){
sessionPools.remove(session);
int cnt = onlineNum.decrementAndGet();
log.info("有连接关闭，当前连接数为：{}", cnt);
}
public void sendMessage(Session session, String message) throws IOException {
if(session != null){
synchronized (session) {
session.getBasicRemote().sendText(message);
}
}
}
public void broadCastInfo(String message) throws IOException {
for(Session session : sessionPools){
if(session.isOpen()){
sendMessage(session, message);
}
}
}
@OnError
public void onError(Session session, Throwable throwable){
log.error("发生错误");
throwable.printStackTrace();
}
}@RestController
@RequestMapping("/open/socket")
public class WebSocketController {
@Value("${mySocket.myPwd}")
public String myPwd;
@Autowired
private WebSocketServer webSocketServer;
@PostMapping(value = "/onReceive")
public void onReceive(String id, String pwd) throws IOException {
if(pwd.equals(myPwd)){
webSocketServer.broadCastInfo(id);
}
}
}Testing: Open the front‑end page, verify the WebSocket connection in the console, then use Postman to POST an abnormal device ID (e.g., id=3). The corresponding list item turns red, confirming that the real‑time push works correctly.
Conclusion: The provided code demonstrates a complete end‑to‑end WebSocket solution for real‑time monitoring and can be adapted to similar production requirements.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Selected Java Interview Questions
A professional Java tech channel sharing common knowledge to help developers fill gaps. Follow us!
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.