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() { //获取唯一的UUID
return '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_123
3、WebSocketConfig配置类
@Configuration
public class WebSocketConfig {
/**
* 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
*/
@Bean
public 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>();
/**
* 有客户端连接成功
*/
@OnOpen
public void onOpen(Session session, @PathParam(value = "uid") String uid){
sessionPools.add(session);
onlineNum.incrementAndGet();
log.info(uid + "加入webSocket！当前人数为" + onlineNum);
}
/**
* 连接关闭调用的方法
*/
@OnClose
public 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);
}
}
}
/**
* 发生错误
*/
@OnError
public 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;
@Autowired
private 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实时监控异常的文章就介绍到这了,更多相关SpringBoot WebSocket监控异常内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
SpringBoot2.0集成WebSocket实现后台向前端推送信息
什么是WebSocket? WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. 为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息. 举例来说,我们想要查询当前的排队情况,只能是
-
SpringBoot+WebSocket+Netty实现消息推送的示例代码
上一篇文章讲了Netty的理论基础,这一篇讲一下Netty在项目中的应用场景之一:消息推送功能,可以满足给所有用户推送,也可以满足给指定某一个用户推送消息,创建的是SpringBoot项目,后台服务端使用Netty技术,前端页面使用WebSocket技术. 大概实现思路: 前端使用webSocket与服务端创建连接的时候,将用户ID传给服务端 服务端将用户ID与channel关联起来存储,同时将channel放入到channel组中 如果需要给所有用户发送消息,直接执行channel组的writ
-
解决SpringBoot webSocket 资源无法加载、tomcat启动报错的问题
问题描述: 1. 项目集成WebSocket,且打包发布tomcat时出现websocket is already in CLOSING or CLOSE state这样的问题,建议参考"解决方法二",但是"解决方法一"请要了解查看 ,因为解决方法二是在一的基础上进行更正 2. 如果出现javax.websocket.server.ServerContainer not available这样的错误,请参考"解决方法一"中步骤3 解决方法一:(常
-
SpringBoot集成WebSocket实现前后端消息互传的方法
什么是WebSocket? WebSocket 协议是基于 TCP 的一种新的网络协议.它实现了浏览器与服务器全双工 (full-duplex) 通信-允许服务器主动发送信息给客户端. 为什么需要WebSocket? 大家都知道以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较大.另外一种轮询就是采用 long poll 的方式,这就跟打电话差不多,没收到消息就一直不挂电话,也就是说,客户端发起连接后,如果没消息,就一直不返
-
SpringBoot集成WebSocket实现后台向前端推送信息的示例
前言 在一次项目开发中,使用到了Netty网络应用框架,以及MQTT进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下. 一.什么是websocket? WebSocket协议是基于TCP的一种新的网络协议.它实现了客户端与服务器全双工通信,学过计算机网络都知道,既然是全双工,就说明了服务器可以主动发送信息给客户端.这与我们的推送技术或者是多人在线聊天的功能不谋而合. 为什么不使用HTTP 协议呢?这是因为HTTP是单工通信,通信只能由客户端发
-
SpringBoot+Websocket实现一个简单的网页聊天功能代码
最近做了一个SpringBoot的项目,被SpringBoot那简介的配置所迷住.刚好项目中,用到了websocket.于是,我就想着,做一个SpringBoot+websocket简单的网页聊天Demo. 效果展示: 当然,项目很简单,没什么代码,一眼就能明白 导入websocket的包. 通过使用SpringBoot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音 <dependency> <groupId>
-
springboot基于Redis发布订阅集群下WebSocket的解决方案
一.背景 单机节点下,WebSocket连接成功后,可以直接发送消息.而多节点下,连接时通过nginx会代理到不同节点. 假设一开始用户连接了node1的socket服务.触发消息发送的条件的时候也通过nginx进行代理,假如代理转到了node2节点上,那么node2节点的socket服务就发送不了消息,因为一开始用户注册的是node1节点.这就导致了消息发送失败. 为了解决这一方案,消息发送时,就需要一个中间件来记录,这样,三个节点都可以获取消息,然后在根据条件进行消息推送. 二.解决方案(s
-
SpringBoot使用WebSocket的方法实例详解
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输. 在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. java怎么写 配置Be
-
SpringBoot WebSocket实时监控异常的详细流程
目录 写在前面 实现: 前端: 后端: 测试 写在前面 此异常非彼异常,标题所说的异常是业务上的异常. 最近做了一个需求,消防的设备巡检,如果巡检发现异常,通过手机端提交,后台的实时监控页面实时获取到该设备的信息及位置,然后安排员工去处理. 因为需要服务端主动向客户端发送消息,所以很容易的就想到了用WebSocket来实现这一功能. WebSocket就不做介绍了,上链接:https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket 前端略
-
SpringBoot整合Thymeleaf小项目及详细流程
目录 1.项目简绍 2.设计流程 3.项目展示 4.主要代码 1.验证码的生成 2.userController的控制层设计 3.employeeController控制层的代码 4.前端控制配置类 5.过滤器 6.yml配置 7.文章添加页面展示 8.POM.xml配置类 9.employeeMapper配置类 10.UserMapper配置类 1.项目简绍 本项目使用SpringBoot开发,jdbc5.1.48 Mybatis 源码可下载 其中涉及功能有:Mybatis的使用,Thymel
-
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能
目录 需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so
-
Linux运维基础进程管理实时监控控制
目录 1.后台运行作业 2.使用信号控制进程 基本进程管理信号 3.监控进程活动 IO负载 4.实时进程监控 top用于实现全屏动态显示系统信息 1.后台运行作业 1.sleep 999 & (运行作业) [root@localhost ~]# sleep 999 & [1] 3670 2.ps -ef|grep sleep(查看进程) [root@localhost ~]# ps -ef|grep sleep root 3670 3642 0 10:54 pts/1 00:00:00 s
-
基于PHP实现微博热搜实时监控平台
目录 背景 一.整体思路 二.数据爬取 1.获取HTML 2.提取数据 3.返回数据 三.数据可视化 1.画柱状图 2.ajax请求数据 四.效果展示 写在最后 背景 在学习.“脱发”之余,便是去微博看看有没有发生什么有趣的事情,或是了解一下正在发生着哪些“大事”,亦或是某些让我久久不能平复的事…Whatever~ 因为重点并不是这个 重点是,当我去搜微博热搜的时候,是这样的: 界面需要一直手动刷新,而且我简单搜了一下,似乎是没有相关的实时统计图的,于是我尝试着自己写一个.(ps.要是有哪位大佬
-
Ubuntu上使用Netdata设置实时性能监控的详细流程
介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控有关CPU,内存,磁盘,网络,进程等的指标. Netdata一旦安装就不需要额外的配置,但提供了重要的定制.该应用程序的效率和速度旨在与本机控制台管理工具(如vmstat,iostat和htop)相媲美. 本教程中的步骤涵盖了使用其内置Web服务器或可选地使用Nginx成功设置运行Netdata的一台Ubuntu 16.04服务器所需的一切. 准备 要学习本教程,您需要: 一个Ubuntu
-
springboot 集成cas5.3 实现sso单点登录详细流程
什么是单点登录? 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 我们目前的系统存在诸多子系统,而这些子系统是分别部署在不同的服务器中,那么使用传统方式的session是无法解决的,我们需要使用相关的单点登录技术来解决. SSO单点登录访问流程主要有以下步骤: 访问服务:SSO客户端发送请求访问应用系统提供的服务资源. 定向认证:SSO客户端会重定向用户请求
-
SpringBoot + WebSocket 实现答题对战匹配机制案例详解
概要设计 类似竞技问答游戏:用户随机匹配一名对手,双方同时开始答题,直到双方都完成答题,对局结束.基本的逻辑就是这样,如果有其他需求,可以在其基础上进行扩展 明确了这一点,下面介绍开发思路.为每个用户拟定四种在线状态,分别是:待匹配.匹配中.游戏中.游戏结束.下面是流程图,用户的流程是被规则约束的,状态也随流程而变化 对流程再补充如下: 用户进入匹配大厅(具体效果如何由客户端体现),将用户的状态设置为待匹配 用户开始匹配,将用户的状态设置为匹配中,系统搜索其他同样处于匹配中的用户,在这个过程中,
-
SpringBoot+WebSocket搭建简单的多人聊天系统
前言 今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么 首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通信的协议.这是一种比较官方的说法,简单点来说就是,在一次TCP连接中,通信的双方可以相互通信.比如A和B在打电话,A说话的时候,B也可以说话来进行信息的交互,这就叫做全双工通信.对应的是单工通信,和半双工通信,单工通信就是只能由A向B通信,比如电脑和打印机.半双工通信是可以AB可以互相通信,但是同一时间只
-
Python 实现网课实时监控自动签到、打卡功能
响应国家停课不停学的号召,学生们都开始了网上授课,但由于课程繁多,消息繁杂,经常错过课堂签到,针对这一难题,博客主作为Python爱好者,完全使用Python语言写了本篇博客,希望能够帮助小伙伴们完成上课签到问题(注:只是帮你签到,而不是叫你代签,我的出发点是帮助记性不是很好的同学签到,防止漏签被老师点名),所以希望大家能理解博主的苦心. 话不多说,献上效果图两张 进入正式教程 ①Python环境 Python3.6及以上版本,需要配备的库requests,json,time 代码运行软件:Py