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

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

本文实例为大家分享了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 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 sendMeshttp://sageTo(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 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

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：

&llhTcwebAyt;dependency>

org.springframework

spring-websocket

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：

&llhTcwebAyt;dependency>

org.springframework

spring-websocket

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。