Spring Boot + WebSocket 实时监控，实战来了！

于 2024-06-11 07:56:37 发布
阅读量111 收藏
点赞数
文章标签： spring boot websocket 后端 java spring
原文链接：https://mp.weixin.qq.com/s?__biz=MzI2MTIzMzY3Mw==&mid=2247552003&idx=2&sn=03f9737103a7f9226b190f4d55e15c72&chksm=ebf16a5a57b0c873d53cac4a00b2411b44f749d0911906a9da25c6ca47f1236d35e541edd0fa&scene=126&sessionid=0
版权

因公众号更改推送规则，请点“在看”并加“星标”第一时间获取精彩技术分享

点击关注#互联网架构师公众号，领取架构师全套资料 都在这里4110e11740bc1ca40794a859b54f6a73.png

0、2T架构师学习资料干货分

上一篇：2T架构师学习资料干货分享

大家好，我是互联网架构师！  

写在前面


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


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


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


WebSocket就不做介绍了，上链接：

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

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

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

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

a1eb0f789559d2ca46b363bc66d32ee8.png


实现

前端：

直接贴代码

<!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>
后端：

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

eb8cadfb8ef794cbcb341156f345593a.png

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

c01a4f5a9b08ecfcb08a5ed280157b28.png

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连接

控制台输出，连接成功

2d882d0de0715fbfc7215698eeaa7734.png

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

98fd87b3eea435684b30502a91ee89a0.png

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

751cb51f4b0c5c4da823eba98124ca01.png

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

a0c691a05f41525e8194585cc510edc5.png

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

参考：

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


最后


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

原文：cnblogs.com/jae-tech/p/15409340.html

— 完 —

如喜欢本文，请点击右上角，把文章分享到朋友圈

1、2T架构师学习资料干货分享

2、10000+TB 资源，阿里云盘，牛逼！！

3、基本涵盖了Spring所有核心知识点总结

  · END ·

最后，关注公众号互联网架构师，在后台回复：2T，可以获取我整理的 Java 系列面试题和答案，非常齐全。

如果这篇文章对您有所帮助，或者有所启发的话，帮忙扫描上方二维码关注一下，您的支持是我坚持写作最大的动力。

求一键三连点赞、转发、在看

互联网架构
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot+WebSocket实时监控异常，推荐一款技术人必备的接口测试神器
m0_65321095的博客
12-23 1107
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
springboot集成websocket，实时展示数据
最新发布
阿洪的博客！
03-27 394
我这个项目遇到一个问题，就是不加@Lazy的时候，就会一直报一个错，项目也起不来，大概原因就是服务类被CGLIB转换为了代理对象，WebSocketServer这个类被切了，以至于@ServerEndPoint注解无法注入至对应的对象，导致报错；第四步：启动项目直接测试websocket，我用的是apifox测试；第五步：连接上了服务端，就可以根据自己的业务逻辑去实现推送消息；因为业务系统有一些告警数据需要实时展示，废话不多说直接上代码；连接地址就是自己ws://自己项目IP+端口+服务类里面的后缀。
Springboot+websocket+vue实现监听mysql数据库且实时通知前端
一个还在上学的程序缘
04-18 7921
前言 前端采用：vue+sock.js+stomp.js 后端采用：springboot+websocket 项目需求：多个用户端提交报修信息，管理端web实时接收并显示。 实现思路：参考 我简单叙述下：后端通过轮询数据库进行监听，如何监听数据库及判断是否为新的报修信息–这部分业务代码可以参考上述链接。 本篇文章的重点有两个： （1）前端如何建立websocket连接 （2）后端如何通过websocket的订阅模式同时通知所有订阅者有新的消息到达。 后端实现 （1）导入websocket依赖 &lt
springboot+vue用websocket消息推送和监听端口
qq_41358574的博客
12-24 2313
文章目录后端代码websocket接口：开启线程监听tcp连接：前端代码 流程： 后端开启线程监听某个端口是否接收到tcp的数据，如果接收到数据则向前端推送消息，前端接收到消息后进行接收消息的回调方法，将返回相应数据给后端，后端将生成数据，插入到数据库中 后端代码 //这个配置一定要加，否则websocket不生效 @Configuration public class WebsocketConfig { @Bean public ServerEndpointExporter server
自己动手实现纯Web远程监控系统(纯Web，跨浏览器)
bilahone的博客
08-30 3690
想不想能够在网上看到自己家里的情况？罗技的网络摄像头又贵效果又不好，而且就只能摆一个死角度，而且页面上要安装插件，专业的监控系统死贵死贵，而且还是要用插件或者专门的软件，甚至有的还有端口限制，防火墙穿透能力极差。我们现在的目标就是在有限的资金投入下实现一个纯Web（没有专用插件），跨浏览器，支持摄像头的控制（水平270度，垂直210度，带变焦）的远程监控系统。甚至还能支持拍照和录像功能。 首先由于...
Spring boot3简单实现websocket（拦截器，跨域，服务端发送）
lingxiaoNo1的博客
04-11 3223
/
Spring Boot-实战
10-15
《Spring Boot-实战》这本书是针对Java开发人员的一份实用指南，主要聚焦于Spring Boot框架的应用与实践。Spring Boot是Spring生态系统中的一个关键组件，它旨在简化Spring应用程序的初始搭建以及开发过程，使得...
Spring Boot 系列实战合集.zip
07-18
此外，你还将接触到 Spring Boot 如何与其他技术栈结合，如 Docker 容器化部署、Spring Cloud 微服务架构、WebSocket 实现实时通信、WebSocket 与 STOMP 协议结合等。通过深入学习和实践，你可以提升自己在企业级 ...
Java EE 开发的颠覆者 Spring Boot 实战源码
11-16
8. **WebSocket**：Spring Boot 可以支持 WebSocket 实现实时通信，如 STOMP 协议。 9. **Internationalization (i18n)**：处理多语言支持，使用 MessageSource 和 LocaleResolver。 10. **Testing**：Spring Boot ...
spring boot 实战
09-29
同时，Spring Boot对WebSocket的支持也是讲解的重点，它为实时通信提供了可能。 数据库操作是每个应用不可或缺的部分，Spring Boot与JPA、Hibernate的整合让数据库访问变得简单。书中会阐述如何配置数据源、使用JPA...
SpringBoot从入门到精通系列三：WebSocket
zhengzaifeidelushang的博客
09-30 635
SpringBoot从入门到精通系列三：WebSocket使用@ServerEndpoint开发WebSocket1.定义pom.xml2.定义WebSocket处理类3.配置ServerEndpointExporter Bean3.使用JavaScript来开发WebSocket客户端4.主程序类 使用WebSocket能让客户端与服务端进行双向的实时通信。当客户端与服务端之间交互的内容较多或对实时性要求较高时，可使用WebSocket。 使用@ServerEndpoint开发WebSocket Spri
WebSocket实现聊天室功能(springboot+vue3+vite)
qq_49721447的博客
09-03 2810
WebSocket实现聊天室功能(springboot+vue3+vite)
【SpringBoot实战】WebSocket+Stomp+SockJs实现客户端状态监听
qq_21609191的博客
10-28 3043
对于SpringBoot而言，使用传统WebSocket监听客户端状态想必大家已经很熟悉了，比如@onClose和@onOpen注解可以用来监听客户端连线状态，但SockJs在使用上并没有可直接使用的注解或方法对客户端进行监听，这边提供了一些方法，看起来也并不复杂。以下让我们来了解一下SpringBoot的SockJs如何来对客户端进行监听。提示：以下是本篇文章正文内容，下面案例可供参考接下来，我们新建一个（自定义握手管理器）类，继承自（默认握手管理器）。重写方法，从对象中可以获取到客户端信息。
使用AOP实现对接口的实时监控
weixin_36873225的博客
03-08 956
ApiModel(value = "SxLog对象", description = "操作日志实体类")@ApiModelProperty(value = "方法操作名称")@ApiModelProperty(value = "操作类型")@ApiModelProperty(value = "操作日期")@ApiModelProperty(value = "请求类型")@ApiModelProperty(value = "请求参数")@ApiModelProperty(value = "操作人")
springboot利用websocket实现页面实时刷新
weixin_52443523的博客
08-08 1777
ps：以上代码初步的实现了后端推送实时消息到页面的功能，但还有很多需要优化的地方。3.创建WebSocketConfig配置类。2. 创建websocket类。4. 接口测试群发消息。2. 接收消息的页面。
springboot整合webSocket（看完即入门）
CommunicationJava的博客
01-16 597
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。makefile复制代码GET ws://localhost/chat HTTP/1.1。利用双向数据传输的特点可以用来完成很多功能，不需要前端轮询，浪费资源。本协议有两部分：握手和数据传输。握手是基于http协议的。
Springboot+vue3集成使用WebSocket
qq_43265564的博客
11-25 3265
后端配置 第一步增加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 增加配置类，声明该springboot项目使用websocket @Configuration
Springboot+Websocket推送实时数据到前端功能的后台实现
随笔
12-06 1893
1.添加websocket依赖到pom文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2....
spring-boot+websocket实现向日葵远程控制
09-07
Spring-Boot WebSocket 可以实现向日葵远程控制。向日葵是一款远程控制软件，可以让我们在远程控制设备时更加方便和灵活。在使用Spring-Boot实现WebSocket时，我们可以结合向日葵的API来达到远程控制的目的。 首先，在Spring-Boot中，我们需要引入WebSocket的依赖。可以在pom.xml文件中添加相应的依赖，例如： ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 然后，我们需要创建WebSocket的配置类。在配置类中，我们可以定义WebSocket的相关设置，例如消息处理器、握手拦截器等。可以参考以下代码： ``` @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myHandler(), "/myHandler").withSockJS(); } @Bean public WebSocketHandler myHandler() { return new MyHandler(); } } ``` 在以上代码中，`registerWebSocketHandlers` 方法用来注册WebSocket处理器，并指定了处理路径。`MyHandler` 是自定义的消息处理器，可以在其中处理接收到的消息、发送消息等。 接下来，我们可以在处理器中调用向日葵的API，实现远程控制的功能。例如： ``` public class MyHandler extends TextWebSocketHandler { @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 处理接收到的消息 String receivedMessage = message.getPayload(); // 调用向日葵API，实现远程控制 // 发送消息 String responseMessage = "远程控制成功"; session.sendMessage(new TextMessage(responseMessage)); } } ``` 在以上代码中，`handleTextMessage` 方法用来处理接收到的消息。我们可以在其中调用向日葵的API实现远程控制的逻辑，并将结果作为消息发送回客户端。 最后，在Spring-Boot的主类中添加 `@EnableWebSocket` 注解，启用WebSocket功能。 综上所述，通过Spring-Boot WebSocket，我们可以便捷地实现向日葵远程控制的功能。使用WebSocket协议进行通信，同时结合向日葵的API，可以让我们更加灵活地远程控制设备。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值