花了20分钟，给女朋友们写了一个web版群聊程序
WebSocket詳解
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。WebSocket 使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。可以說WebSocket的出現(xiàn)，使得瀏覽器具備了實時雙向通信的能力
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
原來為了實現(xiàn)推送，很多公司用的是Ajax 輪詢，即按照特定的時間間隔，由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。而websocket就可以解決這些問題。
在Spring Boot中使用WebSocket
1.pom文件增加依賴
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>2.增加配置
@Configuration public?class?WebSocketConfig?{@Beanpublic?ServerEndpointExporter?serverEndpointExporter()?{return?new?ServerEndpointExporter();}}3.Java代碼
@Component @ServerEndpoint("/websocket") public?class?WebSocketServerController?{//?收到消息調(diào)用的方法@OnMessagepublic?void?onMessage(String?message)?{System.out.println("收到的消息為?"?+?message);}//?建立連接調(diào)用的方法@OnOpenpublic?void?onOpen()?{System.out.println("Client?connected");}//?關(guān)閉連接調(diào)用的方法@OnClosepublic?void?onClose()?{System.out.println("Connection?closed");}//?傳輸消息錯誤調(diào)用的方法@OnErrorpublic?void?OnError(Throwable?error)?{System.out.println("Connection?error");} }4.前端代碼
<!DOCTYPE?html> <html> <head> <title>Testing?websockets</title> </head> <body><div><textarea?rows="3"?cols="20"?id="content"></textarea><br><input?type="submit"?value="Start"?onclick="start()"?/></div><div?id="messages"></div><script?type="text/javascript">var?webSocket?=?new?WebSocket('ws://localhost:8080/websocket');webSocket.onerror?=?function(event)?{onError(event)};webSocket.onopen?=?function(event)?{onOpen(event)};webSocket.onmessage?=?function(event)?{onMessage(event)};webSocket.onclose?=?function(event)?{onClose(event)};function?onMessage(event)?{document.getElementById('messages').innerHTML?+=?'<br?/>'?+?event.data;}function?onOpen(event)?{document.getElementById('messages').innerHTML?=?'Connection?established';}function?onError(event)?{alert(event);}function?onClose(event)?{alert(event);}function?start()?{var?text?=?document.getElementById('content').value;webSocket.send(text);}</script> </body> </html>所以你看websocket其實很簡單，前后端各寫4個事件方法就行了（當然你也可以省略一些方法）
1.建立連接
2.收到消息
3.傳輸消息失敗
4.關(guān)閉連接
事件和具體會話關(guān)聯(lián)
如果事件想和具體會話關(guān)聯(lián)，方法上只要加Session參數(shù)就行（4種事件類型的方法上都可加）
舉個例子，直接將用戶發(fā)送給服務端的話再返回給客戶端
//?收到消息調(diào)用的方法 @OnMessage public?void?onMessage(Session?session,?String?message)?{try?{session.getBasicRemote().sendText(message);}?catch?(IOException?e)?{e.printStackTrace();} }傳遞參數(shù)
方法上加@PathParam參數(shù)即可
@Component @ServerEndpoint("/websocket/{sid}") public?class?WebSocketServerController @OnOpen public?void?onOpen(@PathParam("sid")?String?sid)?{System.out.println("Client?connected"); }實現(xiàn)一個在線群聊
后端接口
@Slf4j @Component @ServerEndpoint("/groupChat/{sid}/{username}") public?class?GroupChatController?{//?保存?組id->組成員?的映射關(guān)系private?static?ConcurrentHashMap<String,?List<Session>>?groupMemberInfoMap?=?new?ConcurrentHashMap<>();//?收到消息調(diào)用的方法，群成員發(fā)送消息@OnMessagepublic?void?onMessage(@PathParam("sid")?String?sid,@PathParam("username")?String?username,?String?message)?{List<Session>?sessionList?=?groupMemberInfoMap.get(sid);//?先一個群組內(nèi)的成員發(fā)送消息sessionList.forEach(item?->?{try?{String?text?=?username?+?":?"?+?message;item.getBasicRemote().sendText(text);}?catch?(IOException?e)?{e.printStackTrace();}});}//?建立連接調(diào)用的方法，群成員加入@OnOpenpublic?void?onOpen(Session?session,?@PathParam("sid")?String?sid)?{List<Session>?sessionList?=?groupMemberInfoMap.get(sid);if?(sessionList?==?null)?{sessionList?=?new?ArrayList<>();groupMemberInfoMap.put(sid,sessionList);}sessionList.add(session);log.info("Connection?connected");log.info("sid:?{},?sessionList?size:?{}",?sid,?sessionList.size());}//?關(guān)閉連接調(diào)用的方法，群成員退出@OnClosepublic?void?onClose(Session?session,?@PathParam("sid")?String?sid)?{List<Session>?sessionList?=?groupMemberInfoMap.get(sid);sessionList.remove(session);log.info("Connection?closed");log.info("sid:?{},?sessionList?size:?{}",?sid,?sessionList.size());}//?傳輸消息錯誤調(diào)用的方法@OnErrorpublic?void?OnError(Throwable?error)?{log.info("Connection?error");} }前端代碼很簡單，放github了
地址為：https://github.com/erlieStar/spring-boot-websocket
下面來看效果
注意先連接，后發(fā)送
在線開房地址：
http://www.javashitang.com:8090/
有道無術(shù)，術(shù)可成；有術(shù)無道，止于術(shù)
歡迎大家關(guān)注Java之道公眾號
好文章，我在看??
總結(jié)
以上是生活随笔為你收集整理的花了20分钟，给女朋友们写了一个web版群聊程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NYOJ 636 世界末日
- 下一篇： 性能优越的轻量级日志收集工具，微软、亚马