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

推薦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代碼，附帶詳細註釋。

========================================================================

二、打造 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> 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.發送消息給所有人
 * 

 * 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();
 }
 });
 }
}
/<string>

• ④ 通過會話對象 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發送消息。