Springboot+WebSocket實現一對一聊天和公告的示例代碼
1.POM文件導入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服務端實現
@ServerEndpoint 注解聲明為一個WebSocket服務，訪問地址為/chat/{username}，@Component將其注冊為Spring的一個組件，交給Spring進行管理
@ServerEndpoint('/chat/{username}')@Component@Slf4jpublic class WebSocket { //注入dao或者service，注意：因為dao層接口和service層都是單例的Bean //webSocket 不是單例的，所以在注入dao或者service時，需要用set方法對其進行注入，保證每一個都是獨立的 private static ChatMapper chatMapper; //參數中的ChatMapper 是 單例池中的ChatMapper @Autowired public void setChatMapper(ChatMapper chatMapperBean){WebSocket.chatMapper = chatMapperBean; } //當前連接數 private static int onLinePersonNum; //定義為Map結構，key值代表用戶名稱或其他唯一標識，Value代表對應的WebSocket連接。 //ConcurrentHashMap 保證線程安全，用來存放每個客戶端對應的WebSocket對象 private static Map<String,WebSocket> webSocketMap = new ConcurrentHashMap<String, WebSocket>(); //用戶名 private String username; //當前httpSession private Session session; /** * 打開鏈接 * @param username * @param session */ @OnOpen public void openConnect(@PathParam('username')String username, Session session){this.session = session;this.username = username;//在線連接數+1onlinePerNumAdd();//用戶名和當前用戶WebSocket對象放進Map中webSocketMap.put(this.username,this);log.info('{}連接服務器成功。。。。',this.username); } /** * 關閉連接 * @param username * @param session * @PathParam 用來獲取路徑中的動態參數Key值 */ @OnClose public void closeConnect(@PathParam('username')String username, Session session){webSocketMap.remove(username);//在線連接數-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); } /** * 點對點發送 * @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); } /** * 廣播類型發送 * @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://heerey525.github.io/layui-v2.4.3/layui/layui.js'></script>--> <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.js'></script></head><body><!--<button onclick='connect()'>連接</button>--><input type='text'/><input type='text'/><button onclick='send()'>發送</button><div id='message'></div></body><script type='text/javascript'> var websocket = null; // function connect() { //判斷當前瀏覽器是否支持WebSocket ,主要此處要更換為自己的地址 if(’WebSocket’ in window){ websocket = new WebSocket('ws://localhost:8089/chat/bbb'); } else{ alert(’Not support websocket’) } //連接發生錯誤的回調方法 websocket.onerror = function(){ // setMessageInnerHTML('error'); }; //連接成功建立的回調方法 websocket.onopen = function(event){ console.log('連接成功?。。?) // setMessageInnerHTML('open'); $('#link').val('連接成功??！') } //連接關閉的回調方法 websocket.onclose = function(){ // setMessageInnerHTML('close'); } //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function(){ websocket.close(); } //發送消息 function send(){ websocket.send('aaa'); // onmessage(); } //接收到消息的回調方法 // 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://heerey525.github.io/layui-v2.4.3/layui/layui.js'></script>--> <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.js'></script></head><body><!--<button onclick='connect()'>連接</button>--><input type='text'/><input type='text'/><button onclick='send()'>發送</button><div id='message'></div></body><script type='text/javascript'> var websocket = null; // function connect() {//判斷當前瀏覽器是否支持WebSocket ,主要此處要更換為自己的地址if(’WebSocket’ in window){ websocket = new WebSocket('ws://localhost:8089/pushMsg/aaa');}else{ alert(’Not support websocket’)}//連接發生錯誤的回調方法websocket.onerror = function(){ // setMessageInnerHTML('error');};//連接成功建立的回調方法websocket.onopen = function(event){ console.log('連接成功?。?！') // setMessageInnerHTML('open'); $('#link').val('服務器連接成功??！')}//連接關閉的回調方法websocket.onclose = function(){ // setMessageInnerHTML('close');}//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。window.onbeforeunload = function(){ websocket.close();} //發送消息 function send(){websocket.send('bbb');// onmessage(); } //接收到消息的回調方法 // function onmessage(){websocket.onmessage = function(event){ console.log(event.data) // setMessageInnerHTML(event.data); $('#message').append('<h1>'+ event.data + '</h1>')// } }</script></html>
以上就是具體的代碼實現，對于如果用戶離線，websocket斷開連接的情況，可以采用持久化的存儲方式。例如使用mysql關系型數據庫或Redis緩存等等保存用戶的讀取狀態，當用戶登錄后查詢用戶是否有未讀消息，然后進行推送。
到此這篇關于Springboot+WebSocket實現一對一聊天和公告的示例代碼的文章就介紹到這了,更多相關Springboot WebSocket一對一聊天內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備