點(diǎn)擊上方“好好學(xué)java”，選擇“置頂公眾號(hào)”

優(yōu)秀學(xué)習(xí)資源、干貨第一時(shí)間送達(dá)！

?精彩內(nèi)容?

java實(shí)戰(zhàn)練習(xí)項(xiàng)目教程

2018微服務(wù)資源springboot、springcloud、docker、dubbo實(shí)戰(zhàn)等傾心分享

2018年java架構(gòu)師全套學(xué)習(xí)教程

最新大數(shù)據(jù)培訓(xùn)完整視頻教程

2018年java最新全套培訓(xùn)學(xué)習(xí)教程

一、打造 WebSocket 聊天客戶端

溫馨提示：得益于W3C國際標(biāo)準(zhǔn)的實(shí)現(xiàn)，我們?cè)跒g覽器JS就能直接創(chuàng)建WebSocket對(duì)象，再通過簡單的回調(diào)函數(shù)就能完成WebSocket客戶端的編寫，非常簡單！接下來讓我們一探究竟。

使用說明

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

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

使用步驟：2、獲取WebSocket回調(diào)函數(shù)。

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

事件類型WebSocket回調(diào)函數(shù)事件描述

open	webSocket.onopen	當(dāng)打開連接后觸發(fā)
message	webSocket.onmessage	當(dāng)客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
error	webSocket.onerror	當(dāng)通信異常時(shí)觸發(fā)
close	webSocket.onclose	當(dāng)連接關(guān)閉時(shí)觸發(fā)

使用步驟：3、發(fā)送消息給服務(wù)端

例如：webSokcet.send(jsonStr)結(jié)合實(shí)際場(chǎng)景 本案例采用JSON字符串進(jìn)行消息通信。

具體實(shí)現(xiàn)

下面是本案例在線聊天的客戶端實(shí)現(xiàn)的JS代碼，附帶詳細(xì)注釋。

<script>/***?WebSocket客戶端**?使用說明：*?1、WebSocket客戶端通過回調(diào)函數(shù)來接收服務(wù)端消息。例如：webSocket.onmessage*?2、WebSocket客戶端通過send方法來發(fā)送消息給服務(wù)端。例如：webSocket.send();*/function?getWebSocket()?{/***?WebSocket客戶端?PS：URL開頭表示W(wǎng)ebSocket協(xié)議?中間是域名端口?結(jié)尾是服務(wù)端映射地址*/var?webSocket?=?new?WebSocket('ws://localhost:8080/chat');/***?當(dāng)服務(wù)端打開連接*/webSocket.onopen?=?function?(event)?{console.log('WebSocket打開連接');};/***?當(dāng)服務(wù)端發(fā)來消息：1.廣播消息?2.更新在線人數(shù)*/webSocket.onmessage?=?function?(event)?{console.log('WebSocket收到消息：%c'?+?event.data,?'color:green');//獲取服務(wù)端消息var?message?=?JSON.parse(event.data)?||?{};var?$messageContainer?=?$('.message-container');//喉嚨發(fā)炎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');});}};/***?關(guān)閉連接*/webSocket.onclose?=?function?(event)?{console.log('WebSocket關(guān)閉連接');};/***?通信失敗*/webSocket.onerror?=?function?(event)?{console.log('WebSocket發(fā)生異常');};return?webSocket;}var?webSocket?=?getWebSocket();/***?通過WebSocket對(duì)象發(fā)送消息給服務(wù)端*/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發(fā)送消息*/document.onkeydown?=?function?(event)?{var?e?=?event?||?window.event?||?arguments.callee.caller.arguments[0];e.keyCode?===?13?&&?sendMsgToServer();}; </script>

二、打造 WebSocket 聊天服務(wù)端

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

使用說明：

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

使用步驟：1、開啟WebSocket服務(wù)端的自動(dòng)注冊(cè)。

這里需要特別提醒： ServerEndpointExporter 是由Spring官方提供的標(biāo)準(zhǔn)實(shí)現(xiàn)，用于掃描ServerEndpointConfig配置類和@ServerEndpoint注解實(shí)例。

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

如果使用外部容器部署war包，則不要提供提供ServerEndpointExporter，因?yàn)榇藭r(shí)SpringBoot默認(rèn)將掃描服務(wù)端的行為交給外部容器處理。

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

使用步驟：2、創(chuàng)建WebSocket服務(wù)端。

核心思路：

• ① 通過注解@ServerEndpoint來聲明實(shí)例化WebSocket服務(wù)端。

• ② 通過注解@OnOpen、@OnMessage、@OnClose、@OnError 來聲明回調(diào)函數(shù)。

事件類型WebSocket服務(wù)端注解事件描述

open	@OnOpen	當(dāng)打開連接后觸發(fā)
message	@OnMessage	當(dāng)客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
error	@OnClose	當(dāng)通信異常時(shí)觸發(fā)
close	@OnError	當(dāng)連接關(guān)閉時(shí)觸發(fā)

• ③ 通過ConcurrentHashMap保存全部在線會(huì)話對(duì)象。

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

• ④ 通過會(huì)話對(duì)象 javax.websocket.Session 來發(fā)消息給客戶端。

/***?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;?//發(fā)送人private?String?msg;?//發(fā)送消息private?int?onlineCount;?//在線用戶數(shù)public?static?String?jsonStr(String?type,?String?username,?String?msg,?int?onlineTotal)?{return?JSON.toJSONString(new?Message(type,?username,?msg,?onlineTotal));}}

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

1、源碼下載

至此，我們完成了客戶端和服務(wù)端的編碼，由于篇幅有限，本教程的頁面代碼并未完整貼上，想要完整的體驗(yàn)效果請(qǐng)?jiān)贕ithub下載源碼。傳送門：https://github.com/yizhiwazi/springboot-socks/tree/master/springboot-websocket-chat

2、視頻演示

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

image

四、全文總結(jié)

1、使用WebSocket用于實(shí)時(shí)雙向通訊的場(chǎng)景，常見的如聊天室、跨系統(tǒng)消息推送等。

2、創(chuàng)建WebSocket客戶端使用JS內(nèi)置對(duì)象+回調(diào)函數(shù)+send方法發(fā)送消息。

3、創(chuàng)建WebSocket服務(wù)端使用注解聲明實(shí)例+使用注解聲明回調(diào)方法+使用Session發(fā)送消息。

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

推薦閱讀

1.?解密微信小程序登錄全過程（ssm實(shí)現(xiàn)）

2.?springmvc入門

3.?java高并發(fā)容器詳情

4.?重溫javaweb過濾器filter

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。