这期内容当中小编将会给大家带来有关使用WebSocket怎么实现数据库更新时前端页面刷新,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
WebSocketConfig:
package com.x.common.websocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
WebSocketServlet:
package com.x.common.websocket;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket/{userId}")
@Component
public class WebSocketServlet {
private static int onlineCount = 0;
private static Map<String, WebSocketServlet> clients = new ConcurrentHashMap<>();
private Session session;
private String userId;
@OnOpen
public void onOpen(@PathParam("userId") String userId, Session session) throws IOException {
this.userId = userId;
this.session = session;
addOnlineCount();
clients.put(userId, this);
System.out.println("已连接");
}
@OnClose
public void onClose() throws IOException {
clients.remove(userId);
subOnlineCount();
}
@OnMessage
public void onMessage(String message) throws IOException {
JSONObject jsonTo = JSONObject.parseObject(message);
if (!jsonTo.get("To").equals("All")){
sendMessageTo("给一个人", jsonTo.get("To").toString());
}else{
sendMessageAll("给所有人");
}
}
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
public void sendMessageTo(String message, String To) throws IOException {
// session.getBasicRemote().sendText(message);
//session.getAsyncRemote().sendText(message);
for (WebSocketServlet item : clients.values()) {
if (item.userId.equals(To) ){
item.session.getAsyncRemote().sendText(message);
}
}
}
public void sendMessageAll(String message) throws IOException {
for (WebSocketServlet item : clients.values()) {
item.session.getAsyncRemote().sendText(message);
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketServlet.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketServlet.onlineCount--;
}
public static synchronized Map<String, WebSocketServlet> getClients() {
return clients;
}
}
JS代码:
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8086/websocket/1");
} else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function() {
console.log("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
console.log("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
//返回数据转JSON
var json=JSON.parse(event.data);
//result为bootstrap table 返回数据
var rows=result.rows;
for(var i=0;i<rows.length;i++){
var row=rows[i];
if(row.id==json.id){
//判断列Id相同时刷新表格
//$('#dataGrid').bootstrapTable('updateByUniqueId', {index: i, row: row});'refresh'
$('#dataGrid').bootstrapTable('refresh');
}
}
console.log(event.data);
}
//连接关闭的回调方法
websocket.onclose = function() {
console.log("WebSocket连接关闭");
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function() {
closeWebSocket();
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
返回前台是调用方法:
@Autowired
private WebSocketServlet scoket;
//学生信息
XStudentInfoEntity student = xStudentInfoService.getObjectById(id.replace("\"",""));
//提醒学生数据发生改变
scoket.sendMessageAll(JSONObject.toJSONString(student));
pom.xml:
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
</dependency>
上述就是小编为大家分享的使用WebSocket怎么实现数据库更新时前端页面刷新了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
亿速云「云数据库 MySQL」免部署即开即用,比自行安装部署数据库高出1倍以上的性能,双节点冗余防止单节点故障,数据自动定期备份随时恢复。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。