Spring Boot + DD小程式 超級簡單的webscoket

    任務目標：
        實現移動端兩個不同頁面間的實時傳值。
    操作環境：
         Spring Boot     釘釘小程式開發工具
    最終效果如下圖：

---

按照個人理解來說，把本地（127.0.0.1）作為伺服器端，然後裡面有個webscoket組，開啟A專案中的頁面A後以及B專案的頁面B，A、B連線進去了webscoket，然後點選A頁面的按鈕後，給後端發一條訊息資料，後端傳送這條訊息資料給webscoket中的所有人，這時候B收到了訊息，經過判斷訊息資料後，展示彈出框效果。

釘釘開發文件中有介紹webscoket，但是沒有後端介面的實現列子，這讓我很難受。不過看了看，發現前端很容易寫出來，於是先不管介面怎麼實現，把前端弄出來。
文件地址連線

先寫A頁面，新建了一個專案，建立了頁面ws1。

#axml就直接加了按鈕
<view>
      <button type="default" onTap="cj" >抽獎</button>
</view>



#js程式碼
Page({
  data: {},
  onLoad() {
    let _this = this;
    //建立一個 WebSocket 的連線
    dd.connectSocket({
      url: 'ws://127.0.0.1:8080/websocket', // 開發者伺服器介面地址，必須是 wss 協議，且域名必須是後臺配置的合法域名
      success: (res) => {
        dd.showToast({
          content: 'success', // 文字內容
        });
      },
      fail:()=>{
        dd.showToast({
          content: 'fail', // 文字內容
        });
      }
    });
    //監聽WebSocket連線開啟事件
    dd.onSocketOpen(function(res) {
        console.log('WebSocket 連線已開啟！');
    });
    //監聽WebSocket錯誤
    dd.onSocketError(function(res){
     console.log('WebSocket 連線開啟失敗，請檢查！');
    });
 },
 //抽獎點選事件
 cj(){
   //傳送訊息
   dd.sendSocketMessage({
    data: "this is my ider", // 需要傳送的內容
    success: (res) => {
        console.log("傳送成功");
    },
  });
 },
});

再新建了B專案，新建了頁面ws2

#頁面可以沒內容，直接寫js
Page({
  data: {},
  onLoad() {
   let _this = this;
    dd.connectSocket({
      url: 'ws://127.0.0.1:8080/websocket', // 開發者伺服器介面地址，必須是 wss 協議，且域名必須是後臺配置的合法域名
      success: (res) => {
        dd.showToast({
          content: 'success', // 文字內容
        });
      },
      fail:()=>{
        dd.showToast({
          content: 'fail', // 文字內容
        });
      }
    });
    dd.onSocketOpen(function(res) {
        console.log('WebSocket 連線已開啟！');
    });
    dd.onSocketError(function(res){
     console.log('WebSocket 連線開啟失敗，請檢查！');
    });
//監聽WebSocket接受到伺服器的訊息事件。
    dd.onSocketMessage(function(res) {
      console.log('收到伺服器內容：' + res.data);
      if(res.data == "this is my ider"){
        _this.cj();
      }
    });
 },
 cj(){
    dd.alert({
        title:"恭喜你，小夥子，你中了500塊磚頭！！！",
    });
 }

});

前端頁面程式碼完成，現在看一下怎麼寫介面。終於找到一篇能看懂的文章了。
文章地址連線

第一步：

使用springBoot建立webSocket,首先要注入ServerEndpointExporter，這個bean會自動註冊使用了@ServerEndpoint註解宣告的Websocket endpoint。要注意，如果使用獨立的servlet容器，而不是直接使用springboot的內建容器,就不要注入ServerEndpointExporter，因為它將由容器自己提供和管理。

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

第二步：

編寫具體實現類。

@ServerEndpoint("/websocket")
@Component
public class WebSocket {
    //靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。
     private static int onlineCount = 0;
    //concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。 
     private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>(); 
     //與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
     private Session session;
     /**
      * 連線建立成功呼叫的方法
      * 連線時會自動呼叫
      */
     @OnOpen
     public void onOpen(Session session) {
         this.session = session;
         webSocketSet.add(this);  //加入set中
         addOnlineCount(); //線上數加1
         System.out.println("有新連線加入！當前線上人數為"+getOnlineCount());
         try {
             sendMessage("HEllo world");
         }catch(IOException e){
             System.out.println("io異常");
         }
     }
     /**
      * 連線關閉呼叫的方法
      * 關閉時自動呼叫
      * */
     @OnClose
     public void onClose() {
         webSocketSet.remove(this); //從set中刪除
         subOnlineCount();  //線上人數減少1
         System.out.println("有一連線關閉！當前線上人數為"+getOnlineCount());
     }
     /**
      * 收到客戶端訊息後呼叫的方法
      *
      * @param message 客戶端傳送過來的訊息
      * 客戶端向服務端主動傳送訊息時呼叫
      */
     @OnMessage
     public void onMessage(String message,Session session) {
         System.out.println("來自客戶端的訊息:" + message);
        //群發訊息 
         for (WebSocket item : webSocketSet) { 
             try { item.sendMessage(message); 
             } catch (IOException e) { 
                 e.printStackTrace(); 
                 } 
             }

     }
     
     /**
      * 發生錯誤時呼叫
      */
     @OnError 
     public void onError(Session session, Throwable error) { 
         System.out.println("發生錯誤"); 
         error.printStackTrace(); 
         }
   //向客戶端推送訊息 
     public void sendMessage(String message) throws IOException { 
         this.session.getAsyncRemote().sendText(message); 
         }
     /**
      * 群發自定義訊息
      * 可以在controller中呼叫該方法來實時推送訊息
      */ 
     public static void sendInfo(String message) throws IOException { 
         for (WebSocket item : webSocketSet) { 
             try { item.sendMessage(message); 
             } catch (IOException e) { 
                 continue; 
                 } 
             } 
         }

     public static synchronized int getOnlineCount() {
         return onlineCount; 
         } 
     public static synchronized void addOnlineCount() { 
         WebSocket.onlineCount++; 
         } 
     public static synchronized void subOnlineCount() { 
         WebSocket.onlineCount--; 
         }

}

東西寫到這，其實已經結束了，執行spring boot ，再啟動兩個移動端後，可以發現，後端控制檯會顯示

   有新連線加入！當前線上人數為2

然後點選抽獎按鈕後，控制檯會接著輸出：

  來自客戶端的訊息:this is my ider

---

GAME OVER