起源：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_1233、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开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞+转发哦！
发表回复