WebSocket實現(xiàn)數(shù)據(jù)庫更新時前端頁面刷新
本文實例為大家分享了WebSocket實現(xiàn)數(shù)據(jù)庫更新時前端頁面刷新,供大家參考,具體內(nèi)容如下
后臺代碼:
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; //判斷當(dāng)前瀏覽器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8086/websocket/1"); } else { alert('當(dāng)前瀏覽器 Not support websocket') } //連接發(fā)生錯誤的回調(diào)方法 websocket.onerror = function() { console.log("WebSocket連接發(fā)生錯誤"); }; //連接成功建立的回調(diào)方法 websocket.onopen = function() { console.log("WebSocket連接成功"); } //接收到消息的回調(diào)方法 websocket.onmessage = function(event) { //返回數(shù)據(jù)轉(zhuǎn)JSON var json=JSON.parse(event.data); //result為bootstrap table 返回數(shù)據(jù) 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); } //連接關(guān)閉的回調(diào)方法 websocket.onclose = function() { console.log("WebSocket連接關(guān)閉"); } //監(jiān)聽窗口關(guān)閉事件,當(dāng)窗口關(guān)閉時,主動去關(guān)閉websocket連接,防止連接還沒斷開就關(guān)閉窗口,server端會拋異常。 window.onbeforeunload = function() { closeWebSocket(); } //關(guān)閉WebSocket連接 function closeWebSocket() { websocket.close(); }
返回前臺是調(diào)用方法:
@Autowired private WebSocketServlet scoket; //學(xué)生信息 XStudentInfoEntity student = xStudentInfoService.getObjectById(id.replace("\"","")); //提醒學(xué)生數(shù)據(jù)發(fā)生改變 scoket.sendMessageAll(JSONObject.toJSONString(student));
pom.xml:
<dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> </dependency>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
springboot在filter中如何用threadlocal存放用戶身份信息
這篇文章主要介紹了springboot中在filter中如何用threadlocal存放用戶身份信息,本文章主要描述通過springboot的filter類,在過濾器中設(shè)置jwt信息進行身份信息保存的方法,需要的朋友可以參考下2024-07-07Idea 解決 Could not autowire. No beans of ''xxxx'' type found
這篇文章主要介紹了Idea 解決 Could not autowire. No beans of 'xxxx' type found 的錯誤提示,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01Spring?Boot?中的?@HystrixCommand?注解原理及使用方法
通過使用 @HystrixCommand 注解,我們可以輕松地實現(xiàn)對方法的隔離和監(jiān)控,從而提高系統(tǒng)的可靠性和穩(wěn)定性,本文介紹了Spring Boot 中的@HystrixCommand注解是什么,其原理以及如何使用,感興趣的朋友跟隨小編一起看看吧2023-07-07詳解Spring boot使用Redis集群替換mybatis二級緩存
本篇文章主要介紹了詳解Spring boot使用Redis集群替換mybatis二級緩存,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05java 實現(xiàn)圖片像素質(zhì)量壓縮與圖片長寬縮放
這篇文章主要介紹了java 實現(xiàn)圖片像素質(zhì)量壓縮與圖片長寬縮放,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-11-11java?數(shù)組越界判斷和獲取數(shù)組長度的實現(xiàn)方式
這篇文章主要介紹了java?數(shù)組越界判斷和獲取數(shù)組長度的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-12-12