SpringBoot2 集成 WebSocket

 

 

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

2. package me.abdusalam.websocket.demo.config;
   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.socket.server.standard.ServerEndpointExporter;
   
   // 開啟 WebSocket 支持
   @Configuration
   public class WebSocketConfig {
   
       @Bean
       public ServerEndpointExporter serverEndpointExporter() {
           return new ServerEndpointExporter();
       }
   
   }

3. package me.abdusalam.websocket.demo.dao;
   import me.abdusalam.websocket.demo.server.WebSocketServer;
   import java.util.concurrent.CopyOnWriteArraySet;
   
   // 模擬數據庫
   public class DB {
   
       /**
        * 記錄 有多少個客戶端【前端瀏覽器】與服務端【后端】創建連接 的個數
        * 應該把它設計成線程安全的 , 使用 synchronized 進行操作
        */
       private static Integer connectedClientNum = 0;
       public static synchronized void increaseConnectedClientNum() {
           connectedClientNum++;
       }
       public static synchronized void decreaseConnectedClientNum() {
           connectedClientNum--;
       }
       
       /**
        * java.util.concurrent 包的線程安全的 Set 集合
        * 客戶端【前端瀏覽器】 每次 使用 new WebSocket("ws://localhost:8080/websocket") 時，即與服務端【后端】創建連接時，后端 new 一個 WebSocketServer
        *      【 可見 WebSocketServer 是多例的 --> 前端有多少個 new WebSocket("ws://localhost:8080/websocket")   就后端有多少個 new WebSocketServer 】
        * WebSocketServers 用來存儲 總共有多少個 WebSocketServer 被 new 了
        */
       public static CopyOnWriteArraySet<WebSocketServer> webSocketServers = new CopyOnWriteArraySet<>();
   
   }

4. package me.abdusalam.websocket.demo.server;
   import java.io.IOException;
   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 me.abdusalam.websocket.demo.dao.DB;
   import org.springframework.stereotype.Component;
   
   @Component 13 @ServerEndpoint("/WebSocketServer") 14 public class WebSocketServer {
   
       /**
        * 與某一個客戶端的連接會話
        * 用這個 session 向客戶端發消息
        */
       private Session session;
   
       // 向所有客戶端【瀏覽器】發消息
       public static void sendMessage2allClients(String message){
           for (WebSocketServer item : DB.webSocketServers) {
               try {
                   // 發消息
                   item.session.getBasicRemote().sendText(message);
               } catch (IOException e) {
                   // 給某一個客戶端【瀏覽器】發消息拋異常，沒關系，繼續給下一個客戶端【瀏覽器】發消息
                   continue;
               }
           }
       }
   
   
       // 當前端創建連接【 new WebSocket("ws://localhost:8080/websocket") 】時，調用的方法
       @OnOpen
       public void clientConnected(Session session) {
           DB.increaseConnectedClientNum();
           DB.webSocketServers.add(this);
           this.session = session;
           sendMessage2allClients("系統消息：SESSION_ID 為 " + this.session.getId() + " 的客戶端連接成功");
       }
   
   
       // 收到客戶端【瀏覽器】消息后調用的方法
       @OnMessage
       public void receiveMessageFromClient(String message) {
           sendMessage2allClients("SESSION_ID " + this.session.getId() + " : " + message);
       }
   
   
       //
       @OnError
       public void onError(Throwable error) {
           error.printStackTrace();
       }
   
   
       // 連接關閉調用的方法
       @OnClose
       public void onClose() {
           DB.decreaseConnectedClientNum();
           DB.webSocketServers.remove(this);
           sendMessage2allClients("系統消息：SESSION_ID 為 " + this.session.getId() + " 的客戶端斷開了連接");
       }
   
   }

5. package me.abdusalam.websocket.demo.controller;
   import me.abdusalam.websocket.demo.server.WebSocketServer;
   import org.springframework.web.bind.annotation.*;
   
   @RestController
   @RequestMapping("/controller")
   public class Controller {
   
       //推送數據接口
       @PostMapping("/sendMessage2allClients")
       public void sendMessage2allClients(String message) {
           WebSocketServer.sendMessage2allClients( message );
       }
   }

6. <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>WebSocket Demo</title>
       <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
   
       <h1 style="text-align: center" id="h1"></h1>
       <h3 style="padding: 10px">消息展示區：</h3>
       <div style="border: 5px solid blue;padding: 10px;" id="div"></div>
   
       <button onclick="send()">發送</button>
   
       <script>
           if(typeof(WebSocket) == "undefined") {
               alert("您的瀏覽器不支持WebSocket");
           }else{
   
               // 實例化 WebSocket 對象，指定要連接的服務器地址與端口  建立連接
               var ws = new WebSocket("ws://localhost:8080/WebSocketServer");
   
               // 用來消息展示的 div
               var div = document.getElementById("div");
   
               // 打開事件
               ws.onopen = function() {
                   document.getElementById("h1").innerText = "您已經成功連上服務端了";
   
                   // 可以使用 ws.send("消息內容") 向服務端發消息
               };
   
               // 獲得消息事件
               ws.onmessage = function(msg) {
                   div.innerHTML = div.innerHTML + "<div style='margin: 10px;'>" + msg.data + "</div>";
               };
   
               // 關閉事件
               // ws.onclose = function() {
               //    console.log("已關閉");
               // };
   
               // 發生了錯誤事件
               ws.onerror = function() {
                   alert("發生了錯誤");
                   //此時可以嘗試刷新頁面
               }
   
               function send() {
                   $.post( '/controller/sendMessage2allClients', {message:prompt("請輸入：")}, function(response){} );
               }
           }
       </script>
   </body>
   </html>

   

    

   ---

   

    

   ---

   

    

   ---

   

    

   ---