SpringBoot集成WebSocket實現(xiàn)后臺向前端推送信息的示例
在一次項目開發(fā)中,使用到了Netty網(wǎng)絡(luò)應(yīng)用框架,以及MQTT進行消息數(shù)據(jù)的收發(fā),這其中需要后臺來將獲取到的消息主動推送給前端,于是就使用到了MQTT,特此記錄一下。
一、什么是websocket?WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實現(xiàn)了客戶端與服務(wù)器全雙工通信,學(xué)過計算機網(wǎng)絡(luò)都知道,既然是全雙工,就說明了服務(wù)器可以主動發(fā)送信息給客戶端。這與我們的推送技術(shù)或者是多人在線聊天的功能不謀而合。
為什么不使用HTTP 協(xié)議呢?這是因為HTTP是單工通信,通信只能由客戶端發(fā)起,客戶端請求一下,服務(wù)器處理一下,這就太麻煩了。于是websocket應(yīng)運而生。
下面我們就直接開始使用Springboot開始整合。以下案例都在我自己的電腦上測試成功,你可以根據(jù)自己的功能進行修改即可。
我的項目結(jié)構(gòu)如下:
Maven依賴:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2.啟用Springboot對WebSocket的支持
啟用WebSocket的支持也是很簡單,幾句代碼搞定:
import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.socket.server.standard.ServerEndpointExporter;/** * @ Auther: 馬超偉 * @ Date: 2020/06/16/14:35 * @ Description: 開啟WebSocket支持 */@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); }}3.核心配置:WebSocketServer
因為WebSocket是類似客戶端服務(wù)端的形式(采用ws協(xié)議),那么這里的WebSocketServer其實就相當(dāng)于一個ws協(xié)議的Controller
@ ServerEndpoint 注解是一個類層次的注解,它的功能主要是將目前的類定義成一個websocket服務(wù)器端, 注解的值將被用于監(jiān)聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務(wù)器端 新建一個ConcurrentHashMap webSocketMap 用于接收當(dāng)前userId的WebSocket,方便傳遞之間對userId進行推送消息。下面是具體業(yè)務(wù)代碼:
package cc.mrbird.febs.external.webScoket;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;import lombok.extern.slf4j.Slf4j;import org.springframework.stereotype.Component;import org.springframework.stereotype.Service;import javax.websocket.*;import javax.websocket.server.PathParam;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.time.LocalDateTime;import java.util.List;import java.util.concurrent.CopyOnWriteArraySet;/** * Created with IntelliJ IDEA. * @ Auther: 馬超偉 * @ Date: 2020/06/16/14:35 * @ Description: * @ ServerEndpoint 注解是一個類層次的注解,它的功能主要是將目前的類定義成一個websocket服務(wù)器端, * 注解的值將被用于監(jiān)聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務(wù)器端 */@Component@Slf4j@Service@ServerEndpoint('/api/websocket/{sid}')public class WebSocketServer { //靜態(tài)變量,用來記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計成線程安全的。 private static int onlineCount = 0; //concurrent包的線程安全Set,用來存放每個客戶端對應(yīng)的MyWebSocket對象。 private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>(); //與某個客戶端的連接會話,需要通過它來給客戶端發(fā)送數(shù)據(jù) private Session session; //接收sid private String sid = ''; /** * 連接建立成功調(diào)用的方法 */ @OnOpen public void onOpen(Session session, @PathParam('sid') String sid) { this.session = session; webSocketSet.add(this); //加入set中 this.sid = sid; addOnlineCount(); //在線數(shù)加1 try { sendMessage('conn_success'); log.info('有新窗口開始監(jiān)聽:' + sid + ',當(dāng)前在線人數(shù)為:' + getOnlineCount()); } catch (IOException e) { log.error('websocket IO Exception'); } } /** * 連接關(guān)閉調(diào)用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); //從set中刪除 subOnlineCount(); //在線數(shù)減1 //斷開連接情況下,更新主板占用情況為釋放 log.info('釋放的sid為:'+sid); //這里寫你 釋放的時候,要處理的業(yè)務(wù) log.info('有一連接關(guān)閉!當(dāng)前在線人數(shù)為' + getOnlineCount()); } /** * 收到客戶端消息后調(diào)用的方法 * @ Param message 客戶端發(fā)送過來的消息 */ @OnMessage public void onMessage(String message, Session session) { log.info('收到來自窗口' + sid + '的信息:' + message); //群發(fā)消息 for (WebSocketServer item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); } } } /** * @ Param session * @ Param error */ @OnError public void onError(Session session, Throwable error) { log.error('發(fā)生錯誤'); error.printStackTrace(); } /** * 實現(xiàn)服務(wù)器主動推送 */ public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); } /** * 群發(fā)自定義消息 */ public static void sendInfo(String message, @PathParam('sid') String sid) throws IOException { log.info('推送消息到窗口' + sid + ',推送內(nèi)容:' + message); for (WebSocketServer item : webSocketSet) { try { //這里可以設(shè)定只推送給這個sid的,為null則全部推送 if (sid == null) {// item.sendMessage(message); } else if (item.sid.equals(sid)) { item.sendMessage(message); } } catch (IOException e) { continue; } } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; } public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() { return webSocketSet; }}4.測試Controller
import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import java.io.IOException;import java.util.HashMap;import java.util.Map;/** * Created with IntelliJ IDEA. * * @ Auther: 馬超偉 * @ Date: 2020/06/16/14:38 * @ Description: */@Controller('web_Scoket_system')@RequestMapping('/api/socket')public class SystemController { //頁面請求 @GetMapping('/index/{userId}') public ModelAndView socket(@PathVariable String userId) { ModelAndView mav = new ModelAndView('/socket1'); mav.addObject('userId', userId); return mav; } //推送數(shù)據(jù)接口 @ResponseBody @RequestMapping('/socket/push/{cid}') public Map pushToWeb(@PathVariable String cid, String message) { Map<String,Object> result = new HashMap<>(); try { WebSocketServer.sendInfo(message, cid); result.put('code', cid); result.put('msg', message); } catch (IOException e) { e.printStackTrace(); } return result; }}5.測試頁面index.html
<!DOCTYPE html><html><head><meta charset='utf-8'><title>Java后端WebSocket的Tomcat實現(xiàn)</title><script type='text/javascript' src='http://www.cgvv.com.cn/bcjs/js/jquery.min.js'></script></head><body><div style='width: 1200px;height:800px;'></div>Welcome<br/><input type='text' /><button onclick='send()'>發(fā)送消息</button><hr/><button onclick='closeWebSocket()'>關(guān)閉WebSocket連接</button><hr/><div id='message'></div></body><script type='text/javascript'>var websocket = null;//判斷當(dāng)前瀏覽器是否支持WebSocketif(’WebSocket’ in window) {//改成你的地址websocket = new WebSocket('ws://192.168.100.196:8082/api/websocket/100');} else {alert(’當(dāng)前瀏覽器 Not support websocket’)}//連接發(fā)生錯誤的回調(diào)方法websocket.onerror = function() {setMessageInnerHTML('WebSocket連接發(fā)生錯誤');};//連接成功建立的回調(diào)方法websocket.onopen = function() {setMessageInnerHTML('WebSocket連接成功');}var U01data, Uidata, Usdata//接收到消息的回調(diào)方法websocket.onmessage = function(event) {console.log(event);setMessageInnerHTML(event);setechart()}//連接關(guān)閉的回調(diào)方法websocket.onclose = function() {setMessageInnerHTML('WebSocket連接關(guān)閉');}//監(jiān)聽窗口關(guān)閉事件,當(dāng)窗口關(guān)閉時,主動去關(guān)閉websocket連接,防止連接還沒斷開就關(guān)閉窗口,server端會拋異常。window.onbeforeunload = function() {closeWebSocket();}//將消息顯示在網(wǎng)頁上function setMessageInnerHTML(innerHTML) {document.getElementById(’message’).innerHTML += innerHTML + ’<br/>’;}//關(guān)閉WebSocket連接function closeWebSocket() {websocket.close();}//發(fā)送消息function send() {var message = document.getElementById(’text’).value;websocket.send(’{'msg':'’ + message + ’'}’);setMessageInnerHTML(message + ' ');}</script></html>6.結(jié)果展示
后臺:如果有連接請求
前臺顯示:
這中間我遇到一個問題,就是說WebSocket啟動的時候優(yōu)先于spring容器,從而導(dǎo)致在WebSocketServer中調(diào)用業(yè)務(wù)Service會報空指針異常
所以需要在WebSocketServer中將所需要用到的service給靜態(tài)初始化一下:如圖所示:
還需要做如下配置:
到此這篇關(guān)于SpringBoot集成WebSocket實現(xiàn)后臺向前端推送信息的示例的文章就介紹到這了,更多相關(guān)SpringBoot集成WebSocket 內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 基于 Python 實踐感知器分類算法2. Python如何批量生成和調(diào)用變量3. ASP.Net Core對USB攝像頭進行截圖4. ajax動態(tài)加載json數(shù)據(jù)并詳細解析5. Python 中如何使用 virtualenv 管理虛擬環(huán)境6. python利用opencv實現(xiàn)顏色檢測7. 通過CSS數(shù)學(xué)函數(shù)實現(xiàn)動畫特效8. ASP.Net Core(C#)創(chuàng)建Web站點的實現(xiàn)9. ASP.NET MVC實現(xiàn)橫向展示購物車10. windows服務(wù)器使用IIS時thinkphp搜索中文無效問題
