文章詳情頁

Springboot+WebSocket實現(xiàn)一對一聊天和公告的示例代碼

瀏覽：260日期：2023-03-15 14:21:52

1.POM文件導(dǎo)入Springboot整合websocket的依賴

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.1.6.RELEASE</version></dependency>

2.注冊WebSocket的Bean交給Spring容器管理

@Configurationpublic class WebSocketServiceConfig { @Bean public ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter(); }}

3.WebSocket服務(wù)端實現(xiàn)

@ServerEndpoint 注解聲明為一個WebSocket服務(wù)，訪問地址為/chat/{username}，@Component將其注冊為Spring的一個組件，交給Spring進(jìn)行管理

@ServerEndpoint('/chat/{username}')@Component@Slf4jpublic class WebSocket { //注入dao或者service，注意：因為dao層接口和service層都是單例的Bean //webSocket 不是單例的，所以在注入dao或者service時，需要用set方法對其進(jìn)行注入，保證每一個都是獨立的 private static ChatMapper chatMapper; //參數(shù)中的ChatMapper 是單例池中的ChatMapper @Autowired public void setChatMapper(ChatMapper chatMapperBean){WebSocket.chatMapper = chatMapperBean; } //當(dāng)前連接數(shù) private static int onLinePersonNum; //定義為Map結(jié)構(gòu)，key值代表用戶名稱或其他唯一標(biāo)識，Value代表對應(yīng)的WebSocket連接。 //ConcurrentHashMap 保證線程安全，用來存放每個客戶端對應(yīng)的WebSocket對象 private static Map<String,WebSocket> webSocketMap = new ConcurrentHashMap<String, WebSocket>(); //用戶名 private String username; //當(dāng)前httpSession private Session session; /** * 打開鏈接 * @param username * @param session */ @OnOpen public void openConnect(@PathParam('username')String username, Session session){this.session = session;this.username = username;//在線連接數(shù)+1onlinePerNumAdd();//用戶名和當(dāng)前用戶WebSocket對象放進(jìn)Map中webSocketMap.put(this.username,this);log.info('{}連接服務(wù)器成功。。。。',this.username); } /** * 關(guān)閉連接 * @param username * @param session * @PathParam 用來獲取路徑中的動態(tài)參數(shù)Key值 */ @OnClose public void closeConnect(@PathParam('username')String username, Session session){webSocketMap.remove(username);//在線連接數(shù)-1onlinePerNumSub();log.info('{} 斷開連接。。。',username); } /** * 錯誤提示 */ @OnError public void errorConnect(Session session, Throwable error){log.error('websocket連接異常：{}',error.getMessage()); } @OnMessage public void send(String message, Session session) throws IOException {ObjectMapper objectMapper = new ObjectMapper();Map map = objectMapper.readValue(message, Map.class);sendMessage(map.get('username').toString(),message); } /** * 點對點發(fā)送 * @param username * @param message * @throws IOException */ private void sendMessage(String username,String message) throws IOException {WebSocket webSocket = webSocketMap.get(username);webSocket.session.getBasicRemote().sendText(message); } /** * 廣播類型發(fā)送 * @param message * @throws IOException */ private void sendMessage(String message) throws IOException {Set<String> keys = webSocketMap.keySet();for (String key : keys) { WebSocket webSocket = webSocketMap.get(key); webSocket.sendMessage(message);} } private synchronized static void onlinePerNumAdd(){WebSocket.onLinePersonNum ++; } private synchronized static void onlinePerNumSub(){WebSocket.onLinePersonNum --; } private synchronized static int getOnLinePerNum(){return WebSocket.onLinePersonNum; }}

4.webSocket客戶端

chat1.html

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title>  <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.js'></script></head><body><input type='text'/><input type='text'/><button onclick='send()'>發(fā)送</button><div id='message'></div></body><script type='text/javascript'> var websocket = null; // function connect() { //判斷當(dāng)前瀏覽器是否支持WebSocket ,主要此處要更換為自己的地址 if(’WebSocket’ in window){ websocket = new WebSocket('ws://localhost:8089/chat/bbb'); } else{ alert(’Not support websocket’) } //連接發(fā)生錯誤的回調(diào)方法 websocket.onerror = function(){ // setMessageInnerHTML('error'); }; //連接成功建立的回調(diào)方法 websocket.onopen = function(event){ console.log('連接成功！！！') // setMessageInnerHTML('open'); $('#link').val('連接成功！！') } //連接關(guān)閉的回調(diào)方法 websocket.onclose = function(){ // setMessageInnerHTML('close'); } //監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。 window.onbeforeunload = function(){ websocket.close(); } //發(fā)送消息 function send(){ websocket.send('aaa'); // onmessage(); } //接收到消息的回調(diào)方法 // function onmessage(){ websocket.onmessage = function(event){ console.log(event.data) // setMessageInnerHTML(event.data); $('#message').append('<h1>'+ event.data + '</h1>') // } }</script></html>

chat2.html

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.js'></script></head><body><input type='text'/><input type='text'/><button onclick='send()'>發(fā)送</button><div id='message'></div></body><script type='text/javascript'> var websocket = null; // function connect() {//判斷當(dāng)前瀏覽器是否支持WebSocket ,主要此處要更換為自己的地址if(’WebSocket’ in window){ websocket = new WebSocket('ws://localhost:8089/pushMsg/aaa');}else{ alert(’Not support websocket’)}//連接發(fā)生錯誤的回調(diào)方法websocket.onerror = function(){ // setMessageInnerHTML('error');};//連接成功建立的回調(diào)方法websocket.onopen = function(event){ console.log('連接成功！！！') // setMessageInnerHTML('open'); $('#link').val('服務(wù)器連接成功！！')}//連接關(guān)閉的回調(diào)方法websocket.onclose = function(){ // setMessageInnerHTML('close');}//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。window.onbeforeunload = function(){ websocket.close();} //發(fā)送消息 function send(){websocket.send('bbb');// onmessage(); } //接收到消息的回調(diào)方法 // function onmessage(){websocket.onmessage = function(event){ console.log(event.data) // setMessageInnerHTML(event.data); $('#message').append('<h1>'+ event.data + '</h1>')// } }</script></html>

以上就是具體的代碼實現(xiàn)，對于如果用戶離線，websocket斷開連接的情況，可以采用持久化的存儲方式。例如使用mysql關(guān)系型數(shù)據(jù)庫或Redis緩存等等保存用戶的讀取狀態(tài)，當(dāng)用戶登錄后查詢用戶是否有未讀消息，然后進(jìn)行推送。

到此這篇關(guān)于Springboot+WebSocket實現(xiàn)一對一聊天和公告的示例代碼的文章就介紹到這了,更多相關(guān)Springboot WebSocket一對一聊天內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

Spring

上一條：SpringBoot之使用Redis實現(xiàn)分布式鎖(秒殺系統(tǒng))下一條：SpringBoot+Docker+IDEA 實現(xiàn)一鍵構(gòu)建+推送、運行、同鏡像多容器啟動(推薦)

相關(guān)文章：

1. IntelliJ IDEA導(dǎo)入jar包的方法2. docker鏡像完全卸載的操作步驟3. IntelliJ IDEA配置Tomcat服務(wù)器的方法4. idea刪除項目的操作方法5. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程6. IntelliJ IDEA調(diào)整字體大小的方法7. idea打開多個窗口的操作方法8. idea導(dǎo)入maven項目的方法9. IntelliJ IDEA設(shè)置自動提示功能快捷鍵的方法10. IntelliJ IDEA安裝插件的方法步驟

排行榜

					
					docker鏡像完全卸載的操作步驟
IntelliJ IDEA導(dǎo)入jar包的方法
使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程
IntelliJ IDEA配置Tomcat服務(wù)器的方法
idea刪除項目的操作方法
IntelliJ IDEA恢復(fù)刪除文件的方法
IntelliJ IDEA調(diào)整字體大小的方法
IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法
IntelliJ IDEA安裝插件的方法步驟
idea打開多個窗口的操作方法
Docker 部署 Prometheus的安裝詳細(xì)教程
				