Build Real-Time Device Monitoring with SpringBoot WebSocket and Vue
This article demonstrates how to create a real-time device inspection monitoring system using WebSocket, with a Vue front-end that visualizes device status and a SpringBoot back-end that pushes updates, covering project setup, code examples, configuration, and testing steps.
Preface
The exception described is a business-level exception. The requirement is a fire‑equipment inspection system where abnormal devices are reported via a mobile client, and the backend pushes the device information and location to a real-time monitoring page.
Because the server needs to actively push messages to the client, WebSocket is used.
Implementation
Frontend
The front-end is a simple Vue page that displays a list of devices. Normal devices are shown in green, abnormal ones in red. The code is placed directly in the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实时监控</title>
</head>
<style>
.item {display:flex;border-bottom:1px solid #000;width:30%;line-height:50px;height:50px;justify-content:space-between;}
.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
Project structure: a SpringBoot application with Web and WebSocket dependencies.
application.yml configuration:
# Port
server:
port: 18801
# Simple password for validation
mySocket:
myPwd: jae_123WebSocketConfig registers the ServerEndpointExporter.
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}WebSocketServer handles connection lifecycle, message broadcasting and error handling.
@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();
}
}WebSocketController provides an HTTP endpoint for the mobile client to submit an abnormal device ID.
@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
1. Open the front‑end page and establish a WebSocket connection; the console shows a successful connection.
2. Initially all devices appear normal.
3. Use Postman to POST an abnormal device ID; the corresponding device turns red on the page, confirming real‑time communication.
Reference
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
Conclusion
The presented solution can be referenced for real‑time monitoring needs in work.
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.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
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.