SpringBoot+WebSocket搭建簡(jiǎn)單的多人聊天系統(tǒng)
前言
今天閑來(lái)無(wú)事,就來(lái)了解一下WebSocket協(xié)議。來(lái)簡(jiǎn)單了解一下吧。
WebSocket是什么
首先了解一下WebSocket是什么?WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議。這是一種比較官方的說(shuō)法,簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是,在一次TCP連接中,通信的雙方可以相互通信。比如A和B在打電話,A說(shuō)話的時(shí)候,B也可以說(shuō)話來(lái)進(jìn)行信息的交互,這就叫做全雙工通信。對(duì)應(yīng)的是單工通信,和半雙工通信,單工通信就是只能由A向B通信,比如電腦和打印機(jī)。半雙工通信是可以AB可以互相通信,但是同一時(shí)間只能進(jìn)行單向通信,比如對(duì)講機(jī)。
WebSocket與http有啥區(qū)別
相同點(diǎn)
都建立在TCP之上,通過(guò)TCP協(xié)議來(lái)傳輸數(shù)據(jù)。
不同點(diǎn)
HTTP協(xié)議為單向協(xié)議,即瀏覽器只能向服務(wù)器請(qǐng)求資源,服務(wù)器才能將數(shù)據(jù)傳送給瀏覽器,而服務(wù)器不能主動(dòng)向?yàn)g覽器傳遞數(shù)據(jù)。分為長(zhǎng)連接和短連接,短連接是每次http請(qǐng)求時(shí)都需要三次握手才能發(fā)送自己的請(qǐng)求,每個(gè)request對(duì)應(yīng)一個(gè)response;長(zhǎng)連接是短時(shí)間內(nèi)保持連接,保持TCP不斷開(kāi),指的是TCP連接。
WebSocket一種雙向通信協(xié)議,在建立連接后,WebSocket服務(wù)器和客戶端都能主動(dòng)的向?qū)Ψ桨l(fā)送或接收數(shù)據(jù),就像Socket一樣,不同的是WebSocket是一種建立在Web基礎(chǔ)上的一種簡(jiǎn)單模擬Socket的協(xié)議;WebSocket需要通過(guò)握手連接,類似于TCP它也需要客戶端和服務(wù)器端進(jìn)行握手連接,連接成功后才能相互通信。WebSocket在建立握手連接時(shí),數(shù)據(jù)是通過(guò)http協(xié)議傳輸?shù)?,“GET/chat HTTP/1.1”,這里面用到的只是http協(xié)議一些簡(jiǎn)單的字段。但是在建立連接之后,真正的數(shù)據(jù)傳輸階段是不需要http協(xié)議參與的。
用處
WebSocket解決客戶端發(fā)起多個(gè)http請(qǐng)求到服務(wù)器資源瀏覽器必須要經(jīng)過(guò)長(zhǎng)時(shí)間的輪詢問(wèn)題。
使用WebSocket搭建一個(gè)多人聊天系統(tǒng)
引入WebSocket的jar包
Gradle:
compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.RELEASE'
Maven:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.1.8.RELEASE</version> </dependency>
添加對(duì)WebSocket的支持
注入ServerEndpointExporter,這個(gè)bean會(huì)自動(dòng)注冊(cè)使用了@ServerEndpoint注解聲明的Websocket endpoint。
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * @author: zp * @Date: 2019-09-18 10:03 * @Description: */ @Configuration public class AppConfiguration { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }
創(chuàng)建WebSocket的實(shí)現(xiàn)類
@ServerEndpoint("/webSocket/{page}")中的值就是需要訪問(wèn)的地址,和Controller中的@RequestMapping有點(diǎn)類似。然后實(shí)現(xiàn)@OnOpen(打開(kāi)連接),@OnClose(關(guān)閉連接),@onMessage(收到消息),@Error(觸發(fā)異常)。
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.Map; import java.util.Set; import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.CopyOnWriteArraySet; import java.util.concurrent.atomic.AtomicInteger; /** * @author: zp * @Date: 2019-09-20 15:12 * @Description: */ @Component @ServerEndpoint("/webSocket/{page}") public class WebSocket { private Logger log = LoggerFactory.getLogger(this.getClass()); /** * 用來(lái)記錄房間的人數(shù) */ private static AtomicInteger onlinePersons = new AtomicInteger(0); /** * 用來(lái)記錄房間及人數(shù) */ private static Map<String,Set> roomMap = new ConcurrentHashMap(8); @OnOpen public void open(@PathParam("page") String page, Session session) throws IOException { Set set = roomMap.get(page); // 如果是新的房間,則創(chuàng)建一個(gè)映射,如果房間已存在,則把用戶放進(jìn)去 if(set == null){ set = new CopyOnWriteArraySet(); set.add(session); roomMap.put(page,set); }else{ set.add(session); } // 房間人數(shù)+1 onlinePersons.incrementAndGet(); log.info("新用戶{}進(jìn)入聊天,房間人數(shù):{}",session.getId(),onlinePersons); } @OnClose public void close(@PathParam("page") String page, Session session){ // 如果某個(gè)用戶離開(kāi)了,就移除相應(yīng)的信息 if(roomMap.containsKey(page)){ roomMap.get(page).remove(session); } // 房間人數(shù)-1 onlinePersons.decrementAndGet(); log.info("用戶{}退出聊天,房間人數(shù):{}",session.getId(),onlinePersons); } @OnMessage public void reveiveMessage(@PathParam("page") String page, Session session,String message) throws IOException { log.info("接受到用戶{}的數(shù)據(jù):{}",session.getId(),message); // 拼接一下用戶信息 String msg = session.getId()+" : "+ message; Set<Session> sessions = roomMap.get(page); // 給房間內(nèi)所有用戶推送信息 for(Session s : sessions){ s.getBasicRemote().sendText(msg); } } @OnError public void error(Throwable throwable){ try { throw throwable; } catch (Throwable e) { log.error("未知錯(cuò)誤"); } } }
寫(xiě)個(gè)超級(jí)簡(jiǎn)單的頁(yè)面測(cè)試一下
前端有點(diǎn)菜,寫(xiě)不出好看的ui,見(jiàn)諒~
<html> <head> <meta charset="UTF-8"></meta> <title>springboot項(xiàng)目WebSocket測(cè)試demo</title> </head> <body> <h3>springboot項(xiàng)目websocket測(cè)試demo</h3> <h4>測(cè)試說(shuō)明</h4> <h5>文本框中數(shù)據(jù)數(shù)據(jù),點(diǎn)擊‘發(fā)送測(cè)試',文本框中的數(shù)據(jù)會(huì)發(fā)送到后臺(tái)websocket,后臺(tái)接受到之后,會(huì)再推送數(shù)據(jù)到前端,展示在下方;點(diǎn)擊關(guān)閉連接,可以關(guān)閉該websocket;可以跟蹤代碼,了解具體的流程;代碼上有詳細(xì)注解</h5> <br /> <input id="text" type="text" /> <button onclick="send()">發(fā)送測(cè)試</button> <hr /> <button onclick="clos()">關(guān)閉連接</button> <hr /> <div id="message"></div> <script> var websocket = null; if('WebSocket' in window){ websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1"); }else{ alert("您的瀏覽器不支持websocket"); } websocket.onerror = function(){ setMessageInHtml("send error!"); } websocket.onopen = function(){ setMessageInHtml("連接成功!") setTimeout(function(){setMessageInHtml("歡迎來(lái)到這里!") },2000) } websocket.onmessage = e => setMessageInHtml(e.data) websocket.onclose = function(){ setMessageInHtml("連接斷開(kāi)!") } window.onbeforeunload = function(){ clos(); } function setMessageInHtml(message){ document.getElementById('message').innerHTML += message+"</br>"; } function clos(){ websocket.close(3000,"強(qiáng)制關(guān)閉"); } function send(){ var msg = document.getElementById('text').value; websocket.send(msg); } </script> </body> </html>
測(cè)試
總結(jié)
以上所述是小編給大家介紹的SpringBoot+WebSocket搭建簡(jiǎn)單的多人聊天系統(tǒng),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
java連接mysql數(shù)據(jù)庫(kù)實(shí)現(xiàn)單條插入和批量插入
這篇文章主要為大家詳細(xì)介紹了java連接mysql數(shù)據(jù)庫(kù)實(shí)現(xiàn)單條插入和批量插入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08Spring @Lookup深入分析實(shí)現(xiàn)原理
這篇文章主要介紹了Spring @Lookup實(shí)現(xiàn)原理,我們知道在spring容器中單獨(dú)的一個(gè)抽象類是不能成為一個(gè)bean的,那么有沒(méi)有辦法呢?這個(gè)時(shí)候我們可以使用Lookup注解2023-01-01response.setContentType()參數(shù)以及作用詳解
這篇文章主要介紹了response.setContentType()參數(shù)以及作用詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Spring Boot利用Lombok減少Java中樣板代碼的方法示例
spring Boot是非常高效的開(kāi)發(fā)框架,lombok是一套代碼模板解決方案,將極大提升開(kāi)發(fā)的效率,下面這篇文章主要給大家介紹了關(guān)于Spring Boot利用Lombok減少Java中樣板代碼的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-09-09springboot整合vue項(xiàng)目(小試牛刀)
這篇文章主要介紹了springboot整合vue項(xiàng)目(小試牛刀),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09