Backend Development 8 min read

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.

Selected Java Interview Questions

Nov 19, 2023

Real-Time Monitoring System Using WebSocket with Vue Frontend and SpringBoot Backend

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
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
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.

frontend Real-time Monitoring WebSocket Vue.js SpringBoot

Written by

Selected Java Interview Questions

A professional Java tech channel sharing common knowledge to help developers fill gaps. Follow us!

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.