Real-Time Monitoring System Using WebSocket with Vue.js Frontend and SpringBoot Backend
This article demonstrates how to build a real‑time device monitoring solution by combining a Vue.js front‑end that visualizes device status with a SpringBoot back‑end that uses WebSocket to push abnormal alerts instantly to the client, complete with code examples and deployment steps.
The author introduces a scenario where fire‑equipment inspections trigger abnormal alerts that need to be pushed from the server to a mobile client in real time, prompting the use of WebSocket for bidirectional communication.
Front‑end implementation : A simple Vue.js page lists devices, highlights abnormal ones in red, and connects to the server via WebSocket. The full HTML and JavaScript code is provided:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实时监控</title>
<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>
</head>
<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>
<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
Back‑end implementation
: A SpringBoot project with WebSocket dependencies is set up. The
application.yml
configures the server port and a simple password for validation:
#端口
server:
port: 18801
#密码，因为接口不需要权限，所以加了个密码做校验
mySocket:
myPwd: jae_123
The
WebSocketConfig
class registers a
ServerEndpointExporter
to enable annotated WebSocket endpoints:
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
The core server logic resides in
WebSocketServer
, which manages connections, broadcasts messages, and handles errors using thread‑safe collections and logging:
@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
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();
}
}
A simple
WebSocketController
exposes a POST endpoint that validates a password and triggers a broadcast to mark a device as abnormal:
@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 steps include opening the front‑end page, verifying the WebSocket connection, and using Postman to send an abnormal ID, which changes the corresponding device’s color to red, confirming real‑time communication.
The article concludes with a reminder that this approach can be applied to similar real‑time monitoring needs in production environments.Top Architect
Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.
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.