文地址：https://dwz.cn/87Mq3Br1

作者：yizhiwazi

推薦WebSocket的三大理由：

• 1、采用全雙工通信，擺脫傳統HTTP輪詢的窘境。
• 2、采用W3C國際標準，完美支持HTML5。
• 3、簡單高效，容易上手。

學習目標

快速學會通過WebSocket編寫簡單聊天功能。

溫馨提示：

1、WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

2、瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。

3、當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。

使用教程

一、打造 WebSocket 聊天客戶端

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

使用說明：

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

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

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

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

使用步驟：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。2. 如果使用外部容器部署war包，則不要提供提供ServerEndpointExporter，因為此時SpringBoot默認將掃描服務端的行為交給外部容器處理。】

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

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

核心思路：

• ① 通過注解@ServerEndpoint來聲明實例化WebSocket服務端。
• ② 通過注解@OnOpen、@OnMessage、@OnClose、@OnError 來聲明回調函數。

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

@Component
@ServerEndpoint("/chat")//標記此類為服務端
public class WebSocketChatServer {
 /**
 * 全部在線會話 PS: 基于場景考慮 這里使用線程安全的Map存儲會話對象。
 */
 private static Map<String, Session> onlineSessions = new ConcurrentHashMap<>();
 /**
 * 當客戶端打開連接：1.添加會話對象 2.更新在線人數
 */
 @OnOpen
 public void onOpen(Session session) {
 onlineSessions.put(session.getId(), session);
 sendMessageToAll(Message.jsonStr(Message.ENTER, "", "", onlineSessions.size()));
 }
 /**
 * 當客戶端發送消息：1.獲取它的用戶名和消息 2.發送消息給所有人
 * <p>
 * PS: 這里約定傳遞的消息為JSON字符串 方便傳遞更多參數！
 */
 @OnMessage
 public 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.更新在線人數
 */
 @OnClose
 public void onClose(Session session) {
 onlineSessions.remove(session.getId());
 sendMessageToAll(Message.jsonStr(Message.QUIT, "", "下線了！", onlineSessions.size()));
 }
 /**
 * 當通信發生異常：打印錯誤日志
 */
 @OnError
 public 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 聊天消息類
 */
package com.hehe.chat;
import com.alibaba.fastjson.JSON;
/**
 * WebSocket 聊天消息類
 */
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));
 }
 public Message(String type, String username, String msg, int onlineCount) {
 this.type = type;
 this.username = username;
 this.msg = msg;
 this.onlineCount = onlineCount;
 }
 //這里省略get/set方法 請自行補充
}

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

1、源碼下載

至此，我們完成了客戶端和服務端的編碼，由于篇幅有限，本教程的頁面代碼并未完整貼上，想要完整的體驗效果請在Github下載源碼。

2、視頻演示

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

四、全文總結

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

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

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

們使用springboot和webSocket結合來編寫聊天室。

首先先了解下什么是WebSocket

WebSocket 是什么？

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標準。WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

為什么需要 WebSocket ？

了解計算機網絡協議的人，應該都知道：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。大多數 Web 應用程序將通過頻繁的異步JavaScript和XML（AJAX）請求實現長輪詢。輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。WebSocket 連接允許客戶端和服務器之間進行全雙工通信，以便任一方都可以通過建立的連接將數據推送到另一端。WebSocket 只需要建立一次連接，就可以一直保持連接狀態。這相比于輪詢方式的不停建立連接顯然效率要大大提高。

WebSocket 如何工作？

Web瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接。由于 WebSockets 連接長期存在，與典型的HTTP連接不同，對服務器有重要的影響?；诙嗑€程或多進程的服務器無法適用于 WebSockets，因為它旨在打開連接，盡可能快地處理請求，然后關閉連接。任何實際的 WebSockets 服務器端實現都需要一個異步服務器。

一.使用idea創建springboot項目

如果不使用上述方法導入maven的 請使用

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

二.spring注入bean

package com.example.websocket.demo;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
 @Bean
 public ServerEndpointExporter serverEndpointExporter() {
 return new ServerEndpointExporter();
 }
}

三.編寫websocket服務類

package com.cloudkd.websocket;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
//@ServerEndpoint("/websocket/{user}")
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {
 private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
 //靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
 private static int onlineCount = 0;
 //concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
 private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
 //與某個客戶端的連接會話，需要通過它來給客戶端發送數據
 private Session session;
 /**
 * 連接建立成功調用的方法
 */
 @OnOpen
 public void onOpen(Session session) {
 this.session = session;
 //加入set中
 webSocketSet.add(this);
 //在線數加1
 addOnlineCount();
 log.info("有新連接加入！當前在線人數為" + getOnlineCount());
 try {
 sendMessage("連接成功");
 } catch (IOException e) {
 log.error("websocket IO異常");
 }
 }
 // //連接打開時執行
 // @OnOpen
 // public void onOpen(@PathParam("user") String user, Session session) {
 // currentUser = user;
 // System.out.println("Connected ... " + session.getId());
 // }
 /**
 * 連接關閉調用的方法
 */
 @OnClose
 public void onClose() {
 webSocketSet.remove(this); //從set中刪除
 subOnlineCount(); //在線數減1
 log.info("有一連接關閉！當前在線人數為" + getOnlineCount());
 }
 /**
 * 收到客戶端消息后調用的方法
 *
 * @param message 客戶端發送過來的消息
 */
 @OnMessage
 public void onMessage(String message, Session session) {
 log.info("來自客戶端的消息:" + message);
 //群發消息
 for (WebSocketServer item : webSocketSet) {
 try {
 item.sendMessage(message);
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 }
 /**
 * @param session
 * @param error
 */
 @OnError
 public void onError(Session session, Throwable error) {
 log.error("發生錯誤");
 error.printStackTrace();
 }
 public void sendMessage(String message) throws IOException {
 this.session.getBasicRemote().sendText(message);
 }
 /**
 * 群發自定義消息
 */
 public static void sendInfo(String message) {
 log.info(message);
 for (WebSocketServer item : webSocketSet) {
 try {
 item.sendMessage(message);
 } catch (IOException ignored) {
 }
 }
 }
 private static synchronized int getOnlineCount() {
 return onlineCount;
 }
 private static synchronized void addOnlineCount() {
 WebSocketServer.onlineCount++;
 }
 private static synchronized void subOnlineCount() {
 WebSocketServer.onlineCount--;
 }
}

四.編寫一個前端客戶端

圖中位置創建一個簡單的index.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 var websocket = null;
 //判斷當前瀏覽器是否支持WebSocket
 if ('WebSocket' in window) {
//這里ws://192.168.1.111:8080/websocket 寫自己的ip和端口號
 websocket = new WebSocket("ws://192.168.1.111:8080/websocket");
 }
 else {
 alert('Not support websocket')
 }
 //連接發生錯誤的回調方法
 websocket.onerror = function () {
 setMessageInnerHTML("error");
 };
 //連接成功建立的回調方法
 websocket.onopen = function (event) {
 setMessageInnerHTML("open");
 }
 //接收到消息的回調方法
 websocket.onmessage = function (event) {
 setMessageInnerHTML(event.data);
 }
 //連接關閉的回調方法
 websocket.onclose = function () {
 setMessageInnerHTML("close");
 }
 //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
 window.onbeforeunload = function () {
 websocket.close();
 }
 //將消息顯示在網頁上
 function setMessageInnerHTML(innerHTML) {
 document.getElementById('message').innerHTML += innerHTML + '<br/>';
 }
 //關閉連接
 function closeWebSocket() {
 websocket.close();
 }
 //發送消息
 function send() {
 var message = document.getElementById('text').value;
 websocket.send(message);
 }
 </script>
</head>
<body>
 <h3>Welcome</h3><br/>
 <input id="text" type="text"/>
 <button onclick="send()">Send</button>
 <button onclick="closeWebSocket()">Close</button>
 <div id="message"></div>
</body>
</html>

五.啟動項目,做個測試.

點擊啟動項目

Ok啟動完成

訪問index.html測試一下

Ok成功啟動

后臺日志也有記錄

說個話試試

也可以多開幾個頁面測試下.

Ok可以了. 下面完來完成服務端向客戶端推消息

六.服務端向客戶端推消息(后臺主動)

產生一個消息：產生消息場景有多種，http（s），定時任務，mq等，這里我用一個http請求的controller代碼完成

編寫一個pushWebController類

package com.example.websocket.demo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
public class PushWebController {
 private final Logger logger = LoggerFactory.getLogger(this.getClass());
 @GetMapping(value = "/pushWeb")
 public Map<String, Object> pushVideoListToWeb(String message) {
 Map<String, Object> result = new HashMap<String, Object>();
 try {
 WebSocketServer.sendInfo("有新客戶呼入,message:" + message);
 result.put("operationResult", true);
 } catch (Exception e) {
 result.put("operationResult", true);
 }
 return result;
 }
}

重新啟動項目.測試下

成功了

到此位置. demo已經成功實現了. 自己感受下樂趣把.

如果你恰好也有可以用WebSocket實現的類似場景，希望對你有幫助。

Github地址:https://github.com/liangyisen/springboot_websocket