写在前面

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

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

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

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

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

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

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

　　　　

实现：

前端：

直接贴代码

  1.   1 <!DOCTYPE html>
  2.   2 <html>
  3.   3     <head>
  4.   4         <meta charset="utf-8" />
  5.   5         <title>实时监控</title>
  6.   6     </head>
  7.   7     <style>
  8.   8         .item {
  9.   9             display: flex;
  10.  10             border-bottom: 1px solid #000000;
  11.  11             justify-content: space-between;
  12.  12             width: 30%;
  13.  13             line-height: 50px;
  14.  14             height: 50px;
  15.  15         }
  16.  16
  17.  17         .item span:nth-child(2){
  18.  18             margin-right: 10px;
  19.  19             margin-top: 15px;
  20.  20             width: 20px;
  21.  21             height: 20px;
  22.  22             border-radius: 50%;
  23.  23             background: #55ff00;
  24.  24         }
  25.  25         .nowI{
  26.  26             background: #ff0000 !important;
  27.  27         }
  28.  28     </style>
  29.  29     <body>
  30.  30         <div id="app">
  31.  31             <div v-for="item in list" class="item">
  32.  32                 <span>{{item.id}}.{{item.name}}</span>
  33.  33                 <span :class='item.state==-1?"nowI":""'></span>
  34.  34             </div>
  35.  35         </div>
  36.  36     </body>
  37.  37     <script src="./js/vue.min.js"></script>
  38.  38     <script type="text/javascript">
  39.  39         var vm = new Vue({
  40.  40             el: "#app",
  41.  41             data: {
  42.  42                 list: [{
  43.  43                         id: 1,
  44.  44                         name: '张三',
  45.  45                         state: 1
  46.  46                     },
  47.  47                     {
  48.  48                         id: 2,
  49.  49                         name: '李四',
  50.  50                         state: 1
  51.  51                     },
  52.  52                     {
  53.  53                         id: 3,
  54.  54                         name: '王五',
  55.  55                         state: 1
  56.  56                     },
  57.  57                     {
  58.  58                         id: 4,
  59.  59                         name: '韩梅梅',
  60.  60                         state: 1
  61.  61                     },
  62.  62                     {
  63.  63                         id: 5,
  64.  64                         name: '李磊',
  65.  65                         state: 1
  66.  66                     },
  67.  67                 ]
  68.  68             }
  69.  69         })
  70.  70
  71.  71         var webSocket = null;
  72.  72         if ('WebSocket' in window) {
  73.  73             //创建WebSocket对象
  74.  74             webSocket = new WebSocket("ws://localhost:18801/webSocket/" + getUUID());
  75.  75
  76.  76             //连接成功
  77.  77             webSocket.onopen = function() {
  78.  78                 console.log("已连接");
  79.  79                 webSocket.send("消息发送测试")
  80.  80             }
  81.  81             //接收到消息
  82.  82             webSocket.onmessage = function(msg) {
  83.  83                 //处理消息
  84.  84                 var serverMsg = msg.data;
  85.  85                 var t_id = parseInt(serverMsg)    //服务端发过来的消息，ID，string需转化为int类型才能比较
  86.  86                 for (var i = 0; i < vm.list.length; i++) {
  87.  87                     var item = vm.list[i];
  88.  88                     if(item.id == t_id){
  89.  89                         item.state = -1;
  90.  90                         vm.list.splice(i,1,item)
  91.  91                         break;
  92.  92                     }
  93.  93                 }
  94.  94             };
  95.  95
  96.  96             //关闭事件
  97.  97             webSocket.onclose = function() {
  98.  98                 console.log("websocket已关闭");
  99.  99             };
  100. 100             //发生了错误事件
  101. 101             webSocket.onerror = function() {
  102. 102                 console.log("websocket发生了错误");
  103. 103             }
  104. 104         } else {
  105. 105             alert("很遗憾，您的浏览器不支持WebSocket！")
  106. 106         }
  107. 107
  108. 108         function getUUID() {    //获取唯一的UUID
  109. 109             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  110. 110
  111. 111                 var r = Math.random() * 16 | 0,
  112. 112                     v = c == 'x' ? r : (r & 0x3 | 0x8);
  113. 113                 return v.toString(16);
  114. 114             });
  115. 115         }
  116. 116     </script>
  117. 117 </html>

后端：

项目结构是这样子的，后面的代码关键注释都有，就不重复描述了

1、新建SpringBoot工程，选择web和WebSocket依赖

2、配置application.yml

  1. #端口
  2. server:
  3.   port: 18801
  4.  
  5. #密码，因为接口不需要权限，所以加了个密码做校验
  6. mySocket:
  7.   myPwd: jae_123

3、WebSocketConfig配置类

  1.  1 @Configuration
  2.  2 public class WebSocketConfig {
  3.  3
  4.  4     /**
  5.  5      * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
  6.  6      */
  7.  7     @Bean
  8.  8     public ServerEndpointExporter serverEndpointExporter(){
  9.  9         return new ServerEndpointExporter();
  10. 10     }
  11. 11 }

4、WebSocketServer类，用来进行服务端和客户端之间的交互

  1.  1 /**
  2.  2  * @author jae
  3.  3  * @ServerEndpoint("/webSocket/{uid}") 前端通过此URI与后端建立链接
  4.  4  */
  5.  5
  6.  6 @ServerEndpoint("/webSocket/{uid}")
  7.  7 @Component
  8.  8 public class WebSocketServer {
  9.  9
  10. 10     private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
  11. 11
  12. 12     //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
  13. 13     private static final AtomicInteger onlineNum = new AtomicInteger(0);
  14. 14
  15. 15     //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
  16. 16     private static CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<Session>();
  17. 17
  18. 18     /**
  19. 19      * 有客户端连接成功
  20. 20      */
  21. 21     @OnOpen
  22. 22     public void onOpen(Session session, @PathParam(value = "uid") String uid){
  23. 23         sessionPools.add(session);
  24. 24         onlineNum.incrementAndGet();
  25. 25         log.info(uid + "加入webSocket！当前人数为" + onlineNum);
  26. 26     }
  27. 27
  28. 28     /**
  29. 29      * 连接关闭调用的方法
  30. 30      */
  31. 31     @OnClose
  32. 32     public void onClose(Session session) {
  33. 33         sessionPools.remove(session);
  34. 34         int cnt = onlineNum.decrementAndGet();
  35. 35         log.info("有连接关闭，当前连接数为：{}", cnt);
  36. 36     }
  37. 37
  38. 38     /**
  39. 39      * 发送消息
  40. 40      */
  41. 41     public void sendMessage(Session session, String message) throws IOException {
  42. 42         if(session != null){
  43. 43             synchronized (session) {
  44. 44                 session.getBasicRemote().sendText(message);
  45. 45             }
  46. 46         }
  47. 47     }
  48. 48
  49. 49     /**
  50. 50      * 群发消息
  51. 51      */
  52. 52     public void broadCastInfo(String message) throws IOException {
  53. 53         for (Session session : sessionPools) {
  54. 54             if(session.isOpen()){
  55. 55                 sendMessage(session, message);
  56. 56             }
  57. 57         }
  58. 58     }
  59. 59
  60. 60     /**
  61. 61      * 发生错误
  62. 62      */
  63. 63     @OnError
  64. 64     public void onError(Session session, Throwable throwable){
  65. 65         log.error("发生错误");
  66. 66         throwable.printStackTrace();
  67. 67     }
  68. 68
  69. 69 }

5、WebSocketController类，用于进行接口测试

  1.  1 @RestController
  2.  2 @RequestMapping("/open/socket")
  3.  3 public class WebSocketController {
  4.  4
  5.  5     @Value("${mySocket.myPwd}")
  6.  6     public String myPwd;
  7.  7
  8.  8     @Autowired
  9.  9     private WebSocketServer webSocketServer;
  10. 10
  11. 11     /**
  12. 12      * 手机客户端请求接口
  13. 13      * @param id    发生异常的设备ID
  14. 14      * @param pwd   密码（实际开发记得加密）
  15. 15      * @throws IOException
  16. 16      */
  17. 17     @PostMapping(value = "/onReceive")
  18. 18     public void onReceive(String id,String pwd) throws IOException {
  19. 19         if(pwd.equals(myPwd)){  //密码校验一致（这里举例，实际开发还要有个密码加密的校验的），则进行群发
  20. 20             webSocketServer.broadCastInfo(id);
  21. 21         }
  22. 22     }
  23. 23
  24. 24 }

测试

1、打开前端页面，进行WebSocket连接

控制台输出，连接成功

2、因为是模拟数据，所以全部显示正常，没有异常提交时的页面呈现

3、接下来，我们用接口测试工具Postman提交一个异常

 注意id为3的这个数据的状态变化

我们可以看到，id为3的王五状态已经变成异常的了，实时通讯成功。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

最后

工作中有这方面关于实时监控的需求，可以参考一下哦。

不足之处欢迎指出，觉得有用的话就点个推荐吧！

SpringBoot+WebSocket实时监控异常的更多相关文章

  1. Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）

    ​ 我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...

  2. Jmeter实时监控+SpringBoot接口性能实战

    性能测试 Jmeter实时监控+SpringBoot接口性能实战 自动化 SpringBoot Java Jmeter实时监控+SpringBoot接口性能实战 一.实验目的及实验环境 1.1.实验目 ...

  3. SpringBoot 2.0 + InfluxDB+ Sentinel 实时监控数据存储

    前言 阿里巴巴提供的控制台只是用于演示 Sentinel 的基本能力和工作流程,并没有依赖生产环境中所必需的组件,比如持久化的后端数据库.可靠的配置中心等.目前 Sentinel 采用内存态的方式存储 ...

  4. Springboot监控之二：Spring Boot Admin对Springboot服务进行监控

    概述 Spring Boot 监控核心是 spring-boot-starter-actuator 依赖,增加依赖后, Spring Boot 会默认配置一些通用的监控,比如 jvm 监控.类加载.健 ...

  5. 通过micrometer实时监控线程池的各项指标

    通过micrometer实时监控线程池的各项指标 前提 最近的一个项目中涉及到文件上传和下载,使用到JUC的线程池ThreadPoolExecutor,在生产环境中出现了某些时刻线程池满负载运作,由于 ...

  6. Android(Linux)实时监控串口数据

    之前在做WinCE车载方案时,曾做过一个小工具TraceMonitor,用于显示WinCE系统上应用程序的调试信息,特别是在实车调试时,用于监控和显示CAN盒与主机之间的串口数据.因为需要抢占市场先机 ...

  7. 如何做实时监控？—— 参考 Spring Boot 实现

    随着 微服务 的流行,相比较以前一个大型应用程序搞定所有需求,我们现在更倾向于把大型应用程序切分成多个微服务,服务之间通过 RPC 调用.微服务架构的好处非常多,例如稳定的服务变化较少,不会被非稳定服 ...

  8. 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务

    在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...

  9. 虎牙数万主播同时在线直播的秘密，CDN推流日志上行实时监控

    6 月 10 日,又拍云 Open Talk | 2018 音视频技术沙龙·深圳站 顺利落幕,来自虎牙的直播运维研发架构师张波在沙龙上做了<基于CDN推流日志的主播上行实时监控及其自动化解密&g ...

随机推荐

  1. IDEA快捷键命令

    Ctrl+Alt+T   IDEl 抛异常快捷键ctrl +o  继承类时 继承方法快捷键Ctrl+Alt+左右方向键  回到上次光标停留的地方ALt +left/right  快速切换两个页面ctr ...

  2. ES6 class——音乐播放器实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. OpenCV 传统分割测试

    github官网源文件:https://github.com/opencv/opencv/tree/master/samples/python 最好是先克隆整个仓库下来,再测试里面的:floodfil ...

  4. samba网络共享

    1.sanma简介 2. samba安装 #更新源 opkg update #搜索软件包,查看版本 opkg list | grep "samba" #根据查询的版本安装服务器和l ...

  5. weblogic获取应用目录路径

    一.背景说明 在项目开发过程中,本地开发用的windows+tomcat,到了生产中,就成了linux+weblogic.部署工程后,应用报错,显示获取应用目录返回为null. 在网上查阅资料,发现在 ...

  6. 真香！原来 CLI 开发可以这么简单

    CLI(命令行工具,Command Line Interface)大家都非常熟悉了,比如 create-react-app 等.我们今天介绍一个 CLI 工具的开发框架,可以帮助我们快速构建 CLI ...

  7. 学生信息管理系统.cpp(大二上)

      #include<iostream> #include<fstream> #include<string> #include<iomanip> #i ...

  8. Java基础系列（7）- 标识符和关键字

    关键字 标识符 Java所有的组成部分都需要名字.类名.变量名.方法名都称为标识符 首字母以字母(A-Z或者a-z),美元符号($),或者下划线(_)开头 首字母之后可以用字母.美元符号.下划线.数字 ...

  9. Chrome插件 - Modify Headers for Google Chrome(IP欺骗)

    前景: 该篇随笔的由来:公司某项目(B/S架构)最近新加了一个后台日志功能,需要抓取到访问项目的主机IP,记录目标主机的操作,因此就需要不同得IP访问.并且项目专用浏览器是Chrome内核. Modi ...

  10. Linux系列（34） - yum源文件（1）

    yum源文件各参数含义 在[/etc/yum.repos.d/]目录中,默认有4个yum源文件,其中[CentOS-Linux-BaseOS.repo]是基本yum源文件,如果我们能上网,那它是默认生 ...