SpringBoot+WebSocket实时监控异常

最新推荐文章于 2024-09-14 18:46:05 发布

热爱分享的程序猿

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量2.8k

点赞数

文章标签： java 编程语言程序人生经验分享架构师

本文链接：https://blog.csdn.net/fghklfgkhd/article/details/121399751

版权

本文介绍了如何使用SpringBoot和WebSocket实现业务异常的实时监控。当设备巡检出现异常时，后台能主动通知前端，展示设备状态变化。通过WebSocket连接，服务端能够向客户端推送消息，确保信息的实时更新。

摘要由CSDN通过智能技术生成

写在前面

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

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

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

WebSocket就不做介绍了，上链接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

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

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

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

SpringBoot+WebSocket实时监控异常

实现：

前端：

直接贴代码

  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.min.js"></script>
 38     <script type="text/javascript">
 39         var vm = new Vue({
 40             el: "#app",
 41             data: {
 42                 list: [{
 43                         id: 1,
 44                         name: '张三',
 45                         state: 1
 46                     },
 47                     {
 48                         id: 2,
 49                         name: '李四',
 50                         state: 1
 51                     },
 52                     {
 53                         id: 3,
 54                         name: '王五',
 55