Real-Time Device Monitoring with WebSocket: Vue Frontend and SpringBoot Backend Implementation
This article demonstrates a real-time device monitoring solution that uses a WebSocket connection to push abnormal equipment alerts from a mobile client to a Vue-based monitoring page, with a SpringBoot backend handling the WebSocket server and broadcast logic.
In this article we describe a real‑time device monitoring solution where a mobile client reports abnormal equipment via a WebSocket connection, and the backend pushes updates to a monitoring page.
Frontend
The frontend is a simple Vue page that lists devices and highlights abnormal ones in red. The code below creates the HTML structure, CSS styles, and JavaScript that opens a WebSocket, receives an ID, and updates the corresponding item’s state.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实时监控</title>
</head>
<style>
.item {display:flex;border-bottom:1px solid #000000;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
We build a SpringBoot project with Web and WebSocket dependencies. The configuration file application.yml defines the server port and a simple password for validation.
# Port
server:
port: 18801
# Password for simple validation
mySocket:
myPwd: jae_123The WebSocketConfig class registers a ServerEndpointExporter so that endpoints annotated with @ServerEndpoint are automatically detected.
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}The WebSocketServer class manages connections, tracks online users, and provides methods to send a message to a single session or broadcast to all sessions.
@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("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();
}
}The WebSocketController exposes a REST endpoint that receives an abnormal device ID and a password; after validation it broadcasts the ID to all connected clients.
@RestController
@RequestMapping("/open/socket")
public class WebSocketController {
@Value("${mySocket.myPwd}")
public String myPwd;
@Autowired
private WebSocketServer webSocketServer;
@PostMapping("/onReceive")
public void onReceive(String id, String pwd) throws IOException {
if (pwd.equals(myPwd)) {
webSocketServer.broadCastInfo(id);
}
}
}Testing
Open the frontend page, verify the WebSocket connection is established, then use a tool such as Postman to POST an abnormal device ID. The corresponding item turns red, confirming that the real‑time push works.
Conclusion
This example demonstrates how to combine Vue and SpringBoot with WebSocket to achieve real‑time monitoring of device status, which can be adapted to similar business scenarios.
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.
Code Ape Tech Column
Former Ant Group P8 engineer, pure technologist, sharing full‑stack Java, job interview and career advice through a column. Site: java-family.cn
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.