WebSocket实现数据库更新时前端页面刷新

时间:2022-09-10 14:05:58

本文实例为大家分享了websocket实现数据库更新时前端页面刷新,供大家参考,具体内容如下

后台代码:

websocketconfig:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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();
}

返回前台是调用方法:

?
1
2
3
4
5
6
7
@autowired
private websocketservlet scoket;
 
//学生信息
xstudentinfoentity student = xstudentinfoservice.getobjectbyid(id.replace("\"",""));
//提醒学生数据发生改变
scoket.sendmessageall(jsonobject.tojsonstring(student));

pom.xml: 

?
1
2
3
4
<dependency>
 <groupid>org.springframework</groupid>
 <artifactid>spring-websocket</artifactid>
</dependency>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/zwl18210851801/article/details/87931653