SpringBoot+WebSocket实时监控异常
# 写在前面
此异常非彼异常，标题所说的异常是业务上的异常。
最近做了一个需求，消防的设备巡检，如果巡检发现异常，通过手机端提交，后台的实时监控页面实时获取到该设备的信息及位置，然后安排员工去处理。
因为需要服务端主动向客户端发送消息，所以很容易的就想到了用WebSocket来实现这一功能。
WebSocket就不做介绍了，上链接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
前端略微复杂，需要在一张位置分布图上进行鼠标描点定位各个设备和根据不同屏幕大小渲染，本文不做介绍，只是简单地用页面样式进行效果呈现。
绿色代表正常，红色代表异常
预期效果，未接收到请求前----->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;}
</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对象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) //服务端发过来的消息，ID，string需转化为int类型才能比较for (var i = 0; i < vm.list.length; i++) {var item = vm.list[i];if(item.id == t_id){item.state = -1;vm.list.splice(i,1,item)break;}}};//关闭事件webSocket.onclose = function() {console.log("websocket已关闭");};//发生了错误事件webSocket.onerror = function() {console.log("websocket发生了错误");}} else {alert("很遗憾，您的浏览器不支持WebSocket！")}function getUUID() { //获取唯一的UUIDreturn 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random() * 16 | 0,v = c == 'x' ? r : (r & 0x3 | 0x8);return v.toString(16);});}
</script>
</html>后端：
项目结构是这样子的，后面的代码关键注释都有，就不重复描述了
1、新建SpringBoot工程，选择web和WebSocket依赖
2、配置application.yml
#端口
server:port: 18801#密码，因为接口不需要权限，所以加了个密码做校验
mySocket:myPwd: jae_1233、WebSocketConfig配置类
@Configuration
public class WebSocketConfig {/*** 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint*/@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}4、WebSocketServer类，用来进行服务端和客户端之间的交互
/*** @author jae* @ServerEndpoint("/webSocket/{uid}") 前端通过此URI与后端建立链接*/@ServerEndpoint("/webSocket/{uid}")
@Component
public class WebSocketServer {private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。private static final AtomicInteger onlineNum = new AtomicInteger(0);//concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。private static CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<Session>();/*** 有客户端连接成功*/@OnOpenpublic void onOpen(Session session, @PathParam(value = "uid") String uid){sessionPools.add(session);onlineNum.incrementAndGet();log.info(uid + "加入webSocket！当前人数为" + onlineNum);}/*** 连接关闭调用的方法*/@OnClosepublic 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);}}}/*** 发生错误*/@OnErrorpublic void onError(Session session, Throwable throwable){log.error("发生错误");throwable.printStackTrace();}}5、WebSocketController类，用于进行接口测试
@RestController
@RequestMapping("/open/socket")
public class WebSocketController {@Value("${mySocket.myPwd}")public String myPwd;@Autowiredprivate WebSocketServer webSocketServer;/*** 手机客户端请求接口* @param id 发生异常的设备ID* @param pwd 密码（实际开发记得加密）* @throws IOException*/@PostMapping(value = "/onReceive")public void onReceive(String id,String pwd) throws IOException {if(pwd.equals(myPwd)){ //密码校验一致（这里举例，实际开发还要有个密码加密的校验的），则进行群发webSocketServer.broadCastInfo(id);}}}# 测试
1、打开前端页面，进行WebSocket连接
控制台输出，连接成功
2、因为是模拟数据，所以全部显示正常，没有异常提交时的页面呈现
3、接下来，我们用接口测试工具Postman提交一个异常
注意id为3的这个数据的状态变化
我们可以看到，id为3的王五状态已经变成异常的了，实时通讯成功。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
# 最后
工作中有这方面关于实时监控的需求，可以参考一下哦。
不足之处欢迎指出，觉得有用的话就点个赞河再看吧！
相关文章：
SpringBoot+WebSocket实时监控异常
# 写在前面此异常非彼异常，标题所说的异常是业务上的异常。最近做了一个需求，消防的设备巡检，如果巡检发现异常，通过手机端提交，后台的实时监控页面实时获取到该设备的信息及位置，然后安排员工去处理。因为…...
Baumer工业相机堡盟相机如何使用自动曝光功能（自动曝光优点和行业应用）（C++）
项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机，可用于各种应用场景，如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能，可以实时传输高分辨率图像。此外，该相机还具…...
HTML、CSS学习笔记7（移动适配：rem、less）
一、移动适配 rem：目前多数企业在用的解决方案vw / vh：未来的解决方案 1.rem（单位） 1.1使用rem单位设置尺寸 px单位或百分比布局可以实现吗？ ————不可以 网页的根字号——HTML标签 1.2.rem移动适配 写法&#x…...
STM32感应开关盖垃圾桶
目录 项目需求 项目框图 编辑 硬件清单 sg90舵机介绍及实战 sg90舵机介绍 角度控制 SG90舵机编程实现 超声波传感器介绍及实战 超声波传感器介绍 超声波编程实战 项目设计及实现 项目需求 检测靠近时，垃圾桶自动开盖并伴随滴一声，2秒后关盖…...
进程跟线程的区别
进程跟线程的区别 文章目录进程跟线程的区别前言一.什么线程二.线程与进程的联系三.线程与进程有什么不同前言 现代所有计算机都能同时做几件事情,当一个用户程序正在运行时,计算机还能同时读取磁盘,并向屏幕打印输出正文.在一个多道操作程序中,cpu由一道程序向另外一道程的切…...
[ICLR 2016] Unsupervised representation learning with DCGANs
目录 IntroductionModel ArchitectureReferencesIntroduction 作者提出了用 CNN 搭建 GAN，使得 GAN 训练更加稳定的一系列准则，并将满足这些设计理念的模型称为 DCGANs (Deep Convolutional GANs). 此外，作者将 trained discriminators 用于图像分类任务，相比于其他无监督算…...
QT编程从入门到精通之十五：“第五章：Qt GUI应用程序设计”之“5.1 UI文件设计与运行机制”之“5.1.2 项目管理文件”
目录 第五章：Qt GUI应用程序设计 5.1 UI文件设计与运行机制 5.1.2 项目管理文件 第五章：Qt GUI应用程序设计 在“Qt 程序创建基础”上，本章将继续深入地介绍Qt Creator设计GUI应用程序的方法...
基于Three.js和MindAR实现的网页端WebAR人脸识别追踪功能的京剧换脸Demo(含源码)
前言 近段时间一直在玩MindAR的功能，之前一直在弄图片识别追踪的功能，发现其强大的功能还有脸部识别和追踪的功能，就基于其面部网格的例子修改了一个国粹京剧的换脸程序。如果你不了解MindAR的环境配置可以先参考这篇文章：基于Mi…...
动态规划思路
拉勾教育版权所有：https://kaiwu.lagou.com/course/courseInfo.htm?courseId3 动态规划思路 1.最优子结构 2.重复计算子机构 3.依靠递归，层层向上传值，所以编程时初始化子结构很重要 动态规划步骤 1.判断动态规划的类型 1.线性规划 >&…...
HTTPS关键词语解释和简单通讯流程
1、 什么是HTTPS HTTPS是基于HTTP的上层添加了一个叫做TLS的安全层，对数据的加密等操作都是在这个安全层中进行处理的，其底层还是应用的HTTP。 2、 什么是对称加密； 加密和解密都是用同一个秘钥 3、 什么是非对称加密； 加密和…...
“前端开发中的三种定时任务及其应用“
前端定时任务是指在一定时间间隔内，自动执行指定的操作或函数。在前端开发中，定时任务被广泛应用于诸如数据更新、定时提醒、定时刷新页面等方面。在本文中，我们将介绍前端中常见的三种定时任务，分别是 setTimeout、setInterval 和…...
华为OD机试题 - 猜字谜（JavaScript）| 机考必刷
更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：猜字谜题目输入输出描述备注示例一输入输出示例二输入输出思路C…...
python@pyside样式化
文章目录refWidget类创建样式化文件qss引用样式并启动应用ref Styling the Widgets Application - Qt for PythonQt Style Sheets Reference | Qt Widgets 5.15.12 Widget类创建 创建一个简单界面(菜单主要内容)它们是水平布局 主要内容包括一段文本和一个按钮,它们是垂直布…...
C++经典15道面试题目（文末含大题）
今天给大家找了几个C面试里很有可能被问的哦，赶紧收藏下来去背！！！ 目录 1）C中有malloc/free，为什么还需要new/delete? 2）C中explicit关键字的作用? 3）C中static关键字的作用&a…...
自动计算30天内的股价最高价源代码
我可以回答这个问题。您可以使用以下代码来计算30天内股价的最高价： 复制 import pandas as pd import yfinance as yf # 设置股票代码和日期范围 symbol "AAPL" start_date "2021-01-01" end_date "2021-06-30" # 获取股票…...
国外SEO升级攻略！一看就懂！
SEO是搜索引擎优化的缩写，它是指通过优化网站内容和结构，提升网站在搜索引擎中的排名，从而获得更多的有价值的流量。 而关键词研究和选择是SEO优化中最基础也是最关键的环节，它决定了网站将面向哪些用户、哪些关键词和词组将被优…...
设计模式—适配器模式
适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，…...
OpenAI-J 如何进行测试
当你检出 OpenAI-J 项目以后，你可以对 OpenAI-J 进行测试。在测试之前你首先需要获得 OpenAI 的 API Key。OpenAI 的 Key通常是以 sk 开头的字符串。最简单粗暴的办法就是把获得的 key 替换掉上面的字符串，然后进行测试就可以了。运行 Unit 测试在我们的…...
课设-机器学习课设-实现新闻分类
✅作者简介：CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 ：课设-机器学习 📃新人博主 ：欢迎点赞收藏关注，会回访！ 💬舞台再大，你不上台，…...
关于异常控制流和系统级 I/O：进程
💭 写在前面：本文将学习《深入理解计算机系统》的第六章 - 关于异常控制流和系统级 I/O 的 进程部分。CSAPP 是计算机科学经典教材《Computer Systems: A Programmers Perspective》的缩写，该教材由Randal E. Bryant和David R. OHallaron 合著…...
Unet 基于TCGA颅脑肿瘤MRI分割(交叉熵损失+多通道输出)
目录 1. 介绍 2. Unet 2.1 unet 代码 2.2 测试网络 3. dataset 数据加载 4. train 训练...
货物摆放（蓝桥杯C/C++省赛）
题目描述 小蓝有一个超大的仓库，可以摆放很多货物。 现在，小蓝有 nn 箱货物要摆放在仓库，每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向，每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所有的货物最…...
mysql 索引原理
文章目录 1、索引的本质2、索引的分类2.1、Hash 索引2.2、二叉树2.4、B树（二三树）2.5、B+树3、主键目录4、索引页5、索引页的分层6、非主键索引7.回表1、索引的本质 索引的本质是一种排好序的数据结构。 2、索引的分类 在数据库中，索引是分很多种类的（千万不要狭隘的认为…...
【Linux】文件系统详解
😊😊作者简介😊😊 ： 大家好，我是南瓜籽，一个在校大二学生，我将会持续分享C/C相关知识。 🎉🎉个人主页🎉🎉 ： 南瓜籽的主页…...
3句代码，实现自动备份与版本管理
前言：服务器开发程序、测试版本等越来越多，需要及时做好数据的版本管理和备份，作为21世界的青年，希望这些事情都是可以自动完成，不止做了数据备份，更重要的是做好了版本管理，让我们可以追溯我们…...
华为OD机试题 - 删除指定目录（JavaScript）| 机考必刷
更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：删除指定目录题目输入输出示例一输入输出说明Code解题思路华为O…...
3分钟上手，2小时起飞！教你玩转OceanBase Cloud
盼星星盼月亮！掰掰手指，距离 3 月 25 日还有 123456......两周啦🤩~ 除了白天的主论坛和分论坛的精彩分享外，晚间的 3 场 Hands-on Workshop 动手实验营也深得大家期待，从部署到迁移，从 On-Premise 到 Clou…...
location对象详解
location对象 location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档信息，还提供了一些导航功能。既是window对象，也是document对象的属性，即window.location和document.location引用的是同一个对象。它主要的功能有以下…...
【强度混合和波段自适应细节融合：PAN-Sharpening】
Intensity mixture and band-adaptive detail fusion for pansharpening （用于全色锐化的强度混合和波段自适应细节融合） 全色锐化的目的是通过高分辨率单通道全色（PAN）图像锐化低分辨率多光谱（MS）图像&a…...
【随笔】《挥手自兹去》
挥手自兹去那样美的一束光照在我身上，挥手自兹去，下次又要何时再见？那日闲来无事，到小区前的公园里散步。绿草如因，野花点点，阳光照的人很舒服。一片空地上，我看见了一个女孩，她那么…...
华为OD机试题 - 最差产品奖（JavaScript）| 机考必刷
更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：最差产品奖题目输入输出示例一输入输出说明Code版权说明华为OD其…...
虚拟化介绍
1、为什么需要虚拟化 据调查传统的服务器在很多时候处于休眠状态，大概只有5%时间是在工作，工作效率低下，浪费资源，因此需要一种手段来提高计算机资源的利用率。 虚拟化前 每台主机一个操作系统 在同一台主机运行多个应用程序&am…...
c/c++开发，无可避免的模板编程实践（篇十)-c++11原位构造元素（emplace）
一、容器修改器的新特性 c11以前，标准库的容器修改器功能提供了数据插入成员函数inset、push_back，而在 c11标准化，标准库的容器修改器增加了emplace、emplace_back、emplace_front等插入成员函数。同样是插入函数，两者有何区别呢…...
基于bash通过cdo批处理数据
***#################################### ubuntu中编写shell脚本文件 第一步：用vim创建一个以.sh结尾的文件，此时这个文件是暂时性的文件，当编写好文件并保存时才能看到文件； 第二步：要首先按一下“i”键才能进行插入…...
Map和Set总结
Map和Set Map和Set是专门用来进行搜索的数据结构，适合动态查找 模型 搜索的数据称为关键字(key)，关键字对应的叫值(value)，key-value键值对 key模型key-value模型 Map存储的就是key-value模型，Set只存储了key Map Map是接口类…...
pytorch网络模型构建中的注意点
记录使用pytorch构建网络模型过程遇到的点 1. 网络模型构建中的问题 1.1 输入变量是Tensor张量 各个模块和网络模型的输入， 一定要是tensor 张量； 可以用一个列表存放多个张量。 如果是张量维度不够，需要升维度， 可以先使用 …...
面试时候这样介绍redis，redis经典面试题
为什么要用redis做缓存 使用Redis缓存有以下几个优点： 1. 提高系统性能：缓存可以将数据存储在内存中，加快数据的访问速度，减少对数据库的读写次数，从而提高系统的性能。 2. 减轻后端压力：使用缓存可以减…...
机械学习 - scikit-learn - 数据预处理 - 2
目录关于 scikit-learn 实现规范化的方法详解一、fit_transform 方法1. 最大最小归一化手动化与自动化代码对比演示 1：2. 均值归一化手动化代码演示：3. 小数定标归一化手动化代码演示：4. 零-均值标准化(均值移除)手动与自动化代码演示&#x…...
华为OD机试题 - 最长连续交替方波信号（JavaScript）| 机考必刷
更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：最长连续交替方波信号题目输入输出示例一输入输出Code解题思路版…...
executor行为相关Spark sql参数源码分析
0、前言 参数名和默认值spark.default.parallelismDefault number of partitions in RDDsspark.executor.cores1 in YARN mode 一般默认值spark.files.maxPartitionBytes134217728(128M)spark.files.openCostInBytes4194304 (4 MiB)spark.hadoop.mapreduce.fileoutputcommitte…...
双通道5.2GSPS（或单通道10.4GSPS）射频采样FMC+模块
概述 FMC140是一款具有缓冲模拟输入的低功耗、12位、双通道（5.2GSPS/通道）、单通道10.4GSPS、射频采样ADC模块，该板卡为FMC标准，符合VITA57.1规范，该模块可以作为一个理想的IO单元耦合至FPGA前端，8通道的JE…...
理解java反射
是什么Java反射是Java编程语言的一个功能，它允许程序在运行时（而不是编译时）检查、访问和修改类、对象和方法的属性和行为。使用反射创建对象相比直接创建对象有什么优点使用反射创建对象相比直接创建对象的主要优点是灵活性和可扩展性。当我…...
EasyRcovery16免费的电脑照片数据恢复软件
电脑作为一种重要的数据储存设备，其中保存着大量的文档，邮件，视频，音频和照片。那么，如果电脑照片被删除了怎么办？今天小编给大家介绍，误删除的照片从哪里可以找回来，误删除的照片如…...
若依微服务版在定时任务里面跨模块调用服务
第一步 在被调用的模块中添加代理 RemoteTaskFallbackFactory.java: package com.ruoyi.rpa.api.factory;import com.ruoyi.common.core.domain.R; import com.ruoyi.rpa.api.RemoteTaskService; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springf…...
SpringMVC简单配置
1、pom.xml配置 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.1.12.RELEASE</version></dependency></dependencies><build><…...
xcat快速入门工作流程指南
目录一、快速入门指南一、先决条件二、准备管理节点xcatmn.mydomain.com三、第1阶段：添加你的第一个节点并且用带外BMC接口控制它四、第 2 阶段 预配节点并使用并行 shell 对其进行管理二：工作流程指南1. 查找 xCAT 管理节点的服务器2. 在所选服务器上安…...
C++回顾（十九）—— 容器string
19.1 string概述 1、string是STL的字符串类型，通常用来表示字符串。而在使用string之前，字符串通常是 用char * 表示的。string 与char * 都可以用来表示字符串，那么二者有什么区别呢。 2、string和 char * 的比较 （1）…...
Hadoop入门
数据分析与企业数据分析方向 数据是什么 数据是指对可观事件进行记录并可以鉴别的符号，是对客观事物的性质、状态以及相互关系等进行记载的物理符号或这些物理符号的组合，它是可以识别的、抽象的符号。 他不仅指狭义上的数字，还可以是具有一…...
高校如何通过校企合作/实验室建设来提高大数据人工智能学生就业质量
高校人才培养应该如何结合市场需求进行相关专业设置和就业引导，一直是高校就业工作的讨论热点。亘古不变的原则是，高校设置不能脱离市场需求太远，最佳的结合方式是，高校具有前瞻性，能领先市场一步，培养未来…...
提升学习 Prompt 总结
NLP现有的四个阶段： 完全有监督机器学习完全有监督深度学习预训练：预训练 -> 微调 -> 预测提示学习：预训练 -> 提示 -> 预测 阶段1，word的本质是特征，即特征的选取、衍生、侧重上的针对性工程。 阶段2&…...