Spring Boot + WebSocket 实时监控，实战来了！

最新推荐文章于 2026-01-16 09:31:23 发布

原创

最新推荐文章于 2026-01-16 09:31:23 发布 · 1k 阅读

文章介绍了如何使用WebSocket实现实时监控系统，前端展示设备状态并接收后端推送的异常信息。通过SpringBoot搭建后端，包括WebSocket配置、服务器端处理和前端Vue的代码实现，展示了异常状态的动态更新过程。

写在前面

此异常非彼异常，标题所说的异常是业务上的异常。

最近做了一个需求，消防的设备巡检，如果巡检发现异常，通过手机端提交，后台的实时监控页面实时获取到该设备的信息及位置，然后安排员工去处理。

因为需要服务端主动向客户端发送消息，所以很容易的就想到了用WebSocket来实现这一功能。

WebSocket就不做介绍了，上链接：

WebSocket - Web API 接口参考 | MDN

前端略微复杂，需要在一张位置分布图上进行鼠标描点定位各个设备和根据不同屏幕大小渲染，本文不做介绍，只是简单地用页面样式进行效果呈现。

推荐一个开源免费的 Spring Boot 实战项目：

GitHub - javastacks/spring-boot-best-practice: Spring Boot 最佳实践，包括自动配置、核心原理、源码分析、国际化支持、调试、日志集成、热部署等。

绿色代表正常，红色代表异常

预期效果，未接收到请求前----->id为3的提交了异常，id为3的王五变成了红色

实现

前端：

直接贴代码

<!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;

标签