In a management system project developed before, the home page is a large-screen display of data. At the beginning, I used the setInterval() method of JS to set a time and initiate an ajax request every time the time passed . Although it can be used together, it always feels that it is not the best method, and it takes up more resources, so learning WebSocke , the following are some of my learning experience and related codes of the front and back ends:
1. Introduction (what is WebSocket)
The WebSocket protocol is a new network protocol based on TCP. It implements full-duplex communication between the browser and the server, which allows the server to actively send information to the client. Therefore, in WebSocket, the browser and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be performed, making the data exchange between the client and the server easier.
2. Implementation methods and application scenarios of real-time data push
1. Polling:
The client sends AJAX requests to the server regularly through the code, and the server receives the request and returns the response information.
Advantages: The code is relatively simple and suitable for small applications.
Disadvantages: When the server data is not updated, it will cause duplicate data requests, useless requests, and waste bandwidth and server resources.
2. Long connection:
Embed a hidden iframe in the page, set the property of this hidden iframe as a long connection request or xrh request, and the server inputs data to the client in this way.
Advantages: data is refreshed in real time, requests will not be wasted, and management is simpler.
Disadvantages: Maintaining a long connection for a long time will increase server overhead.
3.webSocket：
Websocket is a network technology provided by HTML5 to communicate between the client and the server. In this way, the long connection between the client and the server and two-way real-time communication can be realized.
Advantages: Reduce resource consumption; Real-time push without waiting for client requests; Reduce traffic;
Disadvantages: A small number of browsers do not support, and different browsers support different degrees and methods.
Application scenarios: chat rooms, smart big screens, message reminders, stock K-line chart monitoring, etc.
3. Code implementation
-
rear end:
1.pom.xml adds WebSocket dependency
<!-- SpringBoot Websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2. WebSocket configuration class
@Configuration
public class WebSocketConfig {
/**
* 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就
不需要该配置文件
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}3. WebSocket service class
@ServerEndpoint(value = "/webSocket")//主要是将目前的类定义成一个websocket服务器端, 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@Component
@EnableScheduling// cron定时任务
@Data
public class WebSocket {
private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);
/**
* 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
*/
private static int onlineCount = 0;
/**
* concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
*/
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
private Session session;
public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {
return webSocketSet;
}
public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
WebSocket.webSocketSet = webSocketSet;
}
/**
* 从数据库查询相关数据信息,可以根据实际业务场景进行修改
*/
@Resource
private IndexService indexService;
private static IndexService indexServiceMapper;
@PostConstruct
public void init() {
WebSocket.indexServiceMapper = this.indexService;
}
/**
* 连接建立成功调用的方法
*
* @param session 会话
*/
@OnOpen
public void onOpen(Session session) throws Exception {
this.session = session;
webSocketSet.add(this);
//查询当前在线人数
int nowOnline = indexServiceMapper.nowOnline();
this.sendMessage(JSON.toJSONString(nowOnline));
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
logger.info("参数信息：{}", message);
//群发消息
for (WebSocket item : webSocketSet) {
try {
item.sendMessage(JSON.toJSONString(message));
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
if (session != null) {
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 发生错误时调用
*
* @param session 会话
* @param error 错误信息
*/
@OnError
public void onError(Session session, Throwable error) {
logger.error("连接异常！");
error.printStackTrace();
}
/**
* 发送信息
*
* @param message 消息
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 自定义消息推送、可群发、单发
*
* @param message 消息
*/
public static void sendInfo(String message) throws IOException {
logger.info("信息:{}", message);
for (WebSocket item : webSocketSet) {
item.sendMessage(message);
}
}
}4. Timing tasks (in order to push data to the front end in real time, I wrote a timing task here. I use cron expressions for timing tasks . Students who don’t understand can go to this website to learn: cron expressions )
@Slf4j
@Component
public class IndexScheduled {
@Autowired
private IndexMapper indexMapper;
/**
* 每3秒执行一次
*/
//@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊
public void nowOnline() {
System.err.println("********* 首页定时任务执行 **************");
CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
int nowOnline = indexMapper.nowOnline();
webSocketSet.forEach(c -> {
try {
c.sendMessage(JSON.toJSONString(nowOnline));
} catch (IOException e) {
e.printStackTrace();
}
});
System.err.println("/n 首页定时任务完成.......");
}
}-
front end:
The front-end code is very simple, just upload the code directly.
<body class="gray-bg">
<div class="online">
<span class="online">测试在线人数：<span id="online"></span> 人</span>
</div>
<script th:inline="javascript">
let websocket = null;
let host = document.location.host;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//连接WebSocket节点
websocket = new WebSocket("ws://" + host + "/webSocket");
} else {
alert('浏览器不支持webSocket');
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML("open");
};
//接收到消息的回调方法
websocket.onmessage = function (event) {
let data = event.data;
console.log("后端传递的数据:" + data);
//将后端传递的数据渲染至页面
$("#online").html(data);
};
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("close");
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
};
//关闭连接
function closeWebSocket() {
websocket.close();
};
//发送消息
function send() {
let message = document.getElementById('text').value;
websocket.send(message);
};
</script>
</body>If this article is useful to you, please like, collect and pay attention! ! ! Many thanks.