本文做一个简单的应用，使用单例模式+WebSocket向前端提示需要处理的消息数量。
“+”和“-”表示用户端做的操作；“查看消息[8]”表示管理端需要处理的消息。
引入依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.4.2</version>
<relativePath/>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependencies>
注入ServerEndpointExporter，这个Bean会自动注册使用了@ServerPoint注解声明的类。
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
创建数量单例，这里的单例是本文主要向前端推送的内容。
由于此单例需要频繁使用，所以创建为饿汉式单例。
public class CountSingle {
private Integer count = 10;
private final static CountSingle countSingle = new CountSingle();
public static Integer getCount() {
return getInstance().count;
}
public static synchronized void setCount(OperEnum operEnum) {
if (operEnum == OperEnum.ADD) {
getInstance().count++;
}
if (operEnum == OperEnum.SUB) {
getInstance().count--;
}
}
public static CountSingle getInstance() {
return countSingle;
}
}
创建操作枚举，规范代码。
public enum OperEnum {
ADD(1), SUB(2);
private final Integer code;
OperEnum(int code) {
this.code = code;
}
public Integer getCode() {
return code;
}
}
WebSocket服务类创建。
@Component
@ServerEndpoint("/websocket")
public class WebSocketServer {
private static final CopyOnWriteArraySet<WebSocketServer> connections = new CopyOnWriteArraySet<>();
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
connections.add(this);
this.sendMessage(String.valueOf(CountSingle.getCount()));
System.out.println("新建连接: " + session.getId());
}
@OnClose
public void onClose() {
connections.remove(this);
System.out.println("连接关闭: " + session.getId());
}
@OnError
public void onError(Throwable error) {
error.printStackTrace();
}
private void sendMessage(String message) {
try {
this.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
public static void broadcast(String message) {
for (WebSocketServer client : connections) {
client.sendMessage(message);
}
}
}
创建控制器，对于CountSingle的count数量加减的操作。
@RestController
public class CountController {
@GetMapping("add")
public void add() {
CountSingle.setCount(OperEnum.ADD);
WebSocketServer.broadcast(String.valueOf(CountSingle.getCount()));
}
@GetMapping("sub")
public void sub() {
CountSingle.setCount(OperEnum.SUB);
WebSocketServer.broadcast(String.valueOf(CountSingle.getCount()));
}
}
前端功能编写。使用jQuery的Ajax发送请求（或给查看信息后面的徽章赋值）、Layui的徽章组件编写主要样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/lib/jquery-3.4.1.min.js"></script>
<script src="/lib/layui-v2.5.5/layui.js"></script>
<link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="add()">+</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" onclick="sub()">-</button>
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray" id="count"></span></button>
</div>
let socket = new WebSocket("ws://localhost:8080/websocket");
socket.onmessage = function (event) {
$("#count").text(event.data);
};
function add() {
$.ajax({
url: '/add', // 请求的 URL
type: 'GET', // 请求方法：GET、POST 等
dataType: 'json', // 预期服务器返回的数据类型
});
}
function sub() {
$.ajax({
url: '/sub', // 请求的 URL
type: 'GET', // 请求方法：GET、POST 等
dataType: 'json', // 预期服务器返回的数据类型
});
}
最后实现的效果。这里需要使用两个浏览器才能看到效果。
首先打开Edge浏览器（初始）。这里为了更好的看到效果，加上了一个显示时间的组件。
点击加号按钮。
打开Chrome浏览器查看到消息成功推送。
最后附上gitee地址：WebsocketTest: 本系统做一个简单的应用，使用单例模式+WebSocket向前端提示需要处理的消息数量。
本文转载自: https://blog.csdn.net/triumph55/article/details/140076529
版权归原作者 triumph qy 所有， 如有侵权，请联系我们删除。
版权归原作者 triumph qy 所有， 如有侵权，请联系我们删除。