WebSocket詳解WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。 WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸?？梢哉fWebSocket的出現(xiàn)，使得瀏覽器具備了實(shí)時(shí)雙向通信的能力 在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。 原來為了實(shí)現(xiàn)推送，很多公司用的是Ajax 輪詢，即按照特定的時(shí)間間隔，由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。而websocket就可以解決這些問題。 在Spring Boot中使用WebSocket1.pom文件增加依賴 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>
2.增加配置 @Configurationpublic 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");}// 傳輸消息錯(cuò)誤調(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其實(shí)很簡單，前后端各寫4個(gè)事件方法就行了（當(dāng)然你也可以省略一些方法） 1.建立連接
2.收到消息
3.傳輸消息失敗
4.關(guān)閉連接 事件和具體會(huì)話關(guān)聯(lián) 如果事件想和具體會(huì)話關(guān)聯(lián)，方法上只要加Session參數(shù)就行（4種事件類型的方法上都可加） 舉個(gè)例子，直接將用戶發(fā)送給服務(wù)端的話再返回給客戶端 // 收到消息調(diào)用的方法@OnMessagepublic 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
@OnOpenpublic void onOpen(@PathParam("sid") String sid) {
System.out.println("Client connected");}
實(shí)現(xiàn)一個(gè)在線群聊后端接口 @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);// 先一個(gè)群組內(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());}// 傳輸消息錯(cuò)誤調(diào)用的方法@OnErrorpublic void OnError(Throwable error) {log.info("Connection error");}}
前端代碼很簡單，放github了
地址為：https://github.com/erlieStar/spring-boot-websocket 下面來看效果
注意先連接，后發(fā)送
在線開房地址：
http://www.:8090/ 參考博客好文
[1]https://blog.csdn.net/moshowgame/article/details/80275084
[2]https://www.jianshu.com/p/d79bf8174196
[3]https://www./tutorials/java-ee-html5-websocket-example
一個(gè)群聊程序
[4]https://blog.csdn.net/moshowgame/article/details/80275084
|
