Spring Boot + WebSocket 实时监控异常

最新推荐文章于 2024-06-11 07:56:37 发布

财高八斗者

最新推荐文章于 2024-06-11 07:56:37 发布

阅读量198

点赞数

分类专栏： Java Java编程 Java程序员文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/m0_74931226/article/details/128433184

版权

写在前面

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

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

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

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

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

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

实现

前端：

直接贴代码

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>实时监控</title>
  6     </head>
  7     <style>
  8         .item {
  9             display: flex;
 10             border-bottom: 1px solid #000000;
 11             justify-content: space-between;
 12             width: 30%;
 13             line-height: 50px;
 14             height: 50px;
 15         }
 16         
 17         .item span:nth-child(2){
 18             margin-right: 10px;
 19             margin-top: 15px;
 20             width: 20px;
 21             height: 20px;
 22             border-radius: 50%;
 23             background: #55ff00;
 24         }
 25         .nowI{
 26             background: #ff0000 !important;
 27         }
 28     </style>
 29     <body>
 30         <div id="app">
 31             <div v-for="item in list" class="item">
 32                 <span>{
  {item.id}}.{
  {item.name}}</span>
 33                 <span :class='item.state==-1?"nowI":""'></span>
 34             </div>
 35         </div>
 36     </body>
 37     <script src="./js/vue

最低0.47元/天解锁文章

财高八斗者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot + WebSocket 实时监控异常

此异常非彼异常，标题所说的异常是业务上的异常。最近做了一个需求，消防的设备巡检，如果巡检发现异常，通过手机端提交，后台的实时监控页面实时获取到该设备的信息及位置，然后安排员工去处理。因为需要服务端主动向客户端发送消息，所以很容易的就想到了用WebSocket来实现这一功能。前端略微复杂，需要在一张位置分布图上进行鼠标描点定位各个设备和根据不同屏幕大小渲染，本文不做介绍，只是简单地用页面样式进行效果呈现。绿色代表正常，红色代表异常。
复制链接

扫一扫

专栏目录