本文实例为大家分享了websocket实现数据库更新时前端 页面刷新 ,供大家参考,具体内容如下
后台代码:
websocketconfig:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.x测试数据mon.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测试数据mon.websocket; import com.alibaba.fastjson.jsonobject; import org.springframework.stereotype测试数据ponent;
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
查看更多关于WebSocket实现数据库更新时前端页面刷新的详细内容...