點擊上方“好好學java”，選擇“置頂公眾號”

優秀學習資源、干貨第一時間送達！

?精彩內容?

java實戰練習項目教程

2018微服務資源springboot、springcloud、docker、dubbo實戰等傾心分享

2018年java架構師全套學習教程

最新大數據培訓完整視頻教程

2018年java最新全套培訓學習教程

一、打造 WebSocket 聊天客戶端

溫馨提示：得益于W3C國際標準的實現，我們在瀏覽器JS就能直接創建WebSocket對象，再通過簡單的回調函數就能完成WebSocket客戶端的編寫，非常簡單！接下來讓我們一探究竟。

使用說明

使用步驟：1、獲取WebSocket客戶端對象。

例如：var webSocket = new WebSocket(url);

使用步驟：2、獲取WebSocket回調函數。

例如：webSocket.onmessage = function (event) {console.log('WebSocket收到消息：' + event.data);

事件類型WebSocket回調函數事件描述

open	webSocket.onopen	當打開連接后觸發
message	webSocket.onmessage	當客戶端接收服務端數據時觸發
error	webSocket.onerror	當通信異常時觸發
close	webSocket.onclose	當連接關閉時觸發

使用步驟：3、發送消息給服務端

例如：webSokcet.send(jsonStr)結合實際場景 本案例采用JSON字符串進行消息通信。

具體實現

下面是本案例在線聊天的客戶端實現的JS代碼，附帶詳細注釋。

<script>/***?WebSocket客戶端**?使用說明：*?1、WebSocket客戶端通過回調函數來接收服務端消息。例如：webSocket.onmessage*?2、WebSocket客戶端通過send方法來發送消息給服務端。例如：webSocket.send();*/function?getWebSocket()?{/***?WebSocket客戶端?PS：URL開頭表示WebSocket協議?中間是域名端口?結尾是服務端映射地址*/var?webSocket?=?new?WebSocket('ws://localhost:8080/chat');/***?當服務端打開連接*/webSocket.onopen?=?function?(event)?{console.log('WebSocket打開連接');};/***?當服務端發來消息：1.廣播消息?2.更新在線人數*/webSocket.onmessage?=?function?(event)?{console.log('WebSocket收到消息：%c'?+?event.data,?'color:green');//獲取服務端消息var?message?=?JSON.parse(event.data)?||?{};var?$messageContainer?=?$('.message-container');//喉嚨發炎if?(message.type?===?'SPEAK')?{$messageContainer.append('<div?class="mdui-card"?style="margin:?10px?0;">'?+'<div?class="mdui-card-primary">'?+'<div?class="mdui-card-content?message-content">'?+?message.username?+?"："?+?message.msg?+?'</div>'?+'</div></div>');}$('.chat-num').text(message.onlineCount);//防止刷屏var?$cards?=?$messageContainer.children('.mdui-card:visible').toArray();if?($cards.length?>?5)?{$cards.forEach(function?(item,?index)?{index?<?$cards.length?-?5?&&?$(item).slideUp('fast');});}};/***?關閉連接*/webSocket.onclose?=?function?(event)?{console.log('WebSocket關閉連接');};/***?通信失敗*/webSocket.onerror?=?function?(event)?{console.log('WebSocket發生異常');};return?webSocket;}var?webSocket?=?getWebSocket();/***?通過WebSocket對象發送消息給服務端*/function?sendMsgToServer()?{var?$message?=?$('#msg');if?($message.val())?{webSocket.send(JSON.stringify({username:?$('#username').text(),?msg:?$message.val()}));$message.val(null);}}/***?清屏*/function?clearMsg(){$(".message-container").empty();}/***?使用ENTER發送消息*/document.onkeydown?=?function?(event)?{var?e?=?event?||?window.event?||?arguments.callee.caller.arguments[0];e.keyCode?===?13?&&?sendMsgToServer();}; </script>

二、打造 WebSocket 聊天服務端

溫馨提示：得益于SpringBoot提供的自動配置，我們只需要通過簡單注解@ServerEndpoint就就能創建WebSocket服務端，再通過簡單的回調函數就能完成WebSocket服務端的編寫，比起客戶端的使用同樣非常簡單！

使用說明：

首先在POM文件引入spring-boot-starter-websocket 、thymeleaf 、FastJson等依賴。

使用步驟：1、開啟WebSocket服務端的自動注冊。

這里需要特別提醒： ServerEndpointExporter 是由Spring官方提供的標準實現，用于掃描ServerEndpointConfig配置類和@ServerEndpoint注解實例。

使用規則也很簡單：
1.如果使用默認的嵌入式容器 比如Tomcat 則必須手工在上下文提供ServerEndpointExporter。

如果使用外部容器部署war包，則不要提供提供ServerEndpointExporter，因為此時SpringBoot默認將掃描服務端的行為交給外部容器處理。

@Configuration public?class?WebSocketConfig?{@Beanpublic?ServerEndpointExporter?serverEndpointExporter()?{return?new?ServerEndpointExporter();} }

使用步驟：2、創建WebSocket服務端。

核心思路：

• ① 通過注解@ServerEndpoint來聲明實例化WebSocket服務端。

• ② 通過注解@OnOpen、@OnMessage、@OnClose、@OnError 來聲明回調函數。

事件類型WebSocket服務端注解事件描述

open	@OnOpen	當打開連接后觸發
message	@OnMessage	當客戶端接收服務端數據時觸發
error	@OnClose	當通信異常時觸發
close	@OnError	當連接關閉時觸發

• ③ 通過ConcurrentHashMap保存全部在線會話對象。

@Component @ServerEndpoint("/chat")//標記此類為服務端 public?class?WebSocketChatServer?{/***?全部在線會話??PS:?基于場景考慮?這里使用線程安全的Map存儲會話對象。*/private?static?Map<String,?Session>?onlineSessions?=?new?ConcurrentHashMap<>();/***?當客戶端打開連接：1.添加會話對象?2.更新在線人數*/@OnOpenpublic?void?onOpen(Session?session)?{onlineSessions.put(session.getId(),?session);sendMessageToAll(Message.jsonStr(Message.ENTER,?"",?"",?onlineSessions.size()));}/***?當客戶端發送消息：1.獲取它的用戶名和消息?2.發送消息給所有人*?<p>*?PS:?這里約定傳遞的消息為JSON字符串?方便傳遞更多參數！*/@OnMessagepublic?void?onMessage(Session?session,?String?jsonStr)?{Message?message?=?JSON.parseObject(jsonStr,?Message.class);sendMessageToAll(Message.jsonStr(Message.SPEAK,?message.getUsername(),?message.getMsg(),?onlineSessions.size()));}/***?當關閉連接：1.移除會話對象?2.更新在線人數*/@OnClosepublic?void?onClose(Session?session)?{onlineSessions.remove(session.getId());sendMessageToAll(Message.jsonStr(Message.QUIT,?"",?"下線了！",?onlineSessions.size()));}/***?當通信發生異常：打印錯誤日志*/@OnErrorpublic?void?onError(Session?session,?Throwable?error)?{error.printStackTrace();}/***?公共方法：發送信息給所有人*/private?static?void?sendMessageToAll(String?msg)?{onlineSessions.forEach((id,?session)?->?{try?{session.getBasicRemote().sendText(msg);}?catch?(IOException?e)?{e.printStackTrace();}});}}

• ④ 通過會話對象 javax.websocket.Session 來發消息給客戶端。

/***?WebSocket?聊天消息類*/ @AllArgsConstructor @Data public?class?Message?{public?static?final?String?ENTER?=?"ENTER";public?static?final?String?SPEAK?=?"SPEAK";public?static?final?String?QUIT?=?"QUIT";private?String?type;//消息類型private?String?username;?//發送人private?String?msg;?//發送消息private?int?onlineCount;?//在線用戶數public?static?String?jsonStr(String?type,?String?username,?String?msg,?int?onlineTotal)?{return?JSON.toJSONString(new?Message(type,?username,?msg,?onlineTotal));}}

三、WebSocket在線聊天案例的視頻演示

1、源碼下載

至此，我們完成了客戶端和服務端的編碼，由于篇幅有限，本教程的頁面代碼并未完整貼上，想要完整的體驗效果請在Github下載源碼。傳送門：https://github.com/yizhiwazi/springboot-socks/tree/master/springboot-websocket-chat

2、視頻演示

上面一頓操作猛如虎，實際到底是啥樣子呢，接下來由哈士奇童鞋為我們演示最終版的在線聊天案例：

image

四、全文總結

1、使用WebSocket用于實時雙向通訊的場景，常見的如聊天室、跨系統消息推送等。

2、創建WebSocket客戶端使用JS內置對象+回調函數+send方法發送消息。

3、創建WebSocket服務端使用注解聲明實例+使用注解聲明回調方法+使用Session發送消息。

作者：yizhiwazi
出處：https://www.jianshu.com/p/55cfc9fcb69e

推薦閱讀

1.?解密微信小程序登錄全過程（ssm實現）

2.?springmvc入門

3.?java高并發容器詳情

4.?重溫javaweb過濾器filter

附上熱門QQ群，存放資源和歷史資料，2000容量（低門檻付費群），長按二維碼入群

總結

以上是生活随笔為你收集整理的SpringBoot 使用WebSocket打造在线聊天室（基于注解）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。