乐趣区

关于java:Spring-Boot-Web-Socket-打造实时监控异常写得太好了

jiezi

起源：cnblogs.com/jae-tech/p/15409340.html

写在后面

此异样非彼异样，题目所说的异样是业务上的异样。

最近做了一个需要，消防的设施巡检，如果巡检发现异常，通过手机端提交，后盾的实时监控页面实时获取到该设施的信息及地位，而后安顿员工去解决。

因为须要服务端被动向客户端发送音讯，所以很容易的就想到了用 WebSocket 来实现这一性能。

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

https://developer.mozilla.org…

前端稍微简单，须要在一张地位分布图上进行鼠标描点定位各个设施和依据不同屏幕大小渲染，本文不做介绍，只是简略地用页面款式进行成果出现。

绿色代表失常，红色代表异样

预期成果，未接管到申请前 —–>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 依赖

Spring Boot 根底就不介绍了，举荐下这个实战教程：

https://github.com/javastacks…

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…

最初

工作中有这方面对于实时监控的需要，能够参考一下哦。

不足之处欢送指出，感觉有用的话就点个举荐吧！

近期热文举荐：

1.1,000+ 道 Java 面试题及答案整顿 (2022 最新版)

2. 劲爆！Java 协程要来了。。。

3.Spring Boot 2.x 教程，太全了！

4. 别再写满屏的爆爆爆炸类了，试试装璜器模式，这才是优雅的形式！！

5.《Java 开发手册（嵩山版）》最新公布，速速下载！

感觉不错，别忘了顺手点赞 + 转发哦！

退出移动版