我帶着小程序和Springboot終於打敗了WebSocket!!!勝利( •̀ ω •́ )y

WebSocket項目筆記 

1. What is WebSocket?

　 (如下內容來源於百度百科）

• WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議
• WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。
• 在WebSocket API中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。
• 背景：
  • 推送技術的演進發展：輪詢 ---> Comet ---> WebSocket

• 握手協議:

1. WebSocket 是獨立的、建立在 TCP 上的協議。
2.  Websocket 經過HTTP/1.1 協議的101狀態碼進行握手。
3. 爲了建立Websocket鏈接，須要經過瀏覽器發出請求，以後服務器進行迴應，這個過程一般稱爲「握手」（handshaking）。 

2. Let's try!

　　　由於項目要求，個人小程序須要與後端服務器進行長鏈接，以傳送數據。因此我須要在我配置好的Springboot框架中添加WebSocket。十分慶幸的是，Springboot已經集成好了WebSocket了。因此過程並不複雜。看了不少博客，內容都大同小異。

　　　我有點懵，由於我發現你們都在說的是，客戶端與服務器創建鏈接的過程的實現。因此有幾個問題：

1. 既然是服務器主動發送消息，那麼服務器到底  「到底何時發送消息呢？怎麼發送？」 
2. 如何傳參數，傳的參數如何接收與使用。
3. 我只須要針對某個客戶端發消息，在同時有多個socket鏈接的時候我怎麼標識該客戶端？

　　大概就有這些。下面咱們在配置過程當中將問題逐個擊破！

• 開發環境：Springboot 1.5.19  Java1.8
• 配置pom文件

<!-- 引入 websocket 依賴類-->
         <dependency>
           <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

• 配置Springboot開啓WebSocket支持

package com.cuc.happyseat.config.websocket; 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(); } } 

• WebSocket服務類編寫

　　　　這裏對照下面的代碼看：

1. 1. 第20行，@ServerEndpoint("/websocket/{userID}")，括號中的內容就是客戶端請求Socket鏈接時的訪問路徑，userID是我要求客戶端傳來的參數，我這裏算是爲了標識該客戶端吧。
   2. 第28行，在該類中添加屬性 userID，並添加對應的getUserID()方法。
   3. 第46行，在onOpen()方法即創建鏈接的時候就接收參數userID，須要標識@PathParam("userID") 。接收參數後直接賦值給屬性userID。
      
   4. 第140-157行，是針對特定客戶端發送消息。服務器和客戶端在創建鏈接成功後就生成了一個WebSocket對象，並存在集合中，對象裏特有的屬性是咱們設置的userID。因此經過惟一的userID就能標識服務器與該客戶端創建的那個鏈接啦！這樣要求發送消息時，傳入userID與消息，服務器在本身的WebSocket鏈接集合中遍歷找到對應客戶端的鏈接，就能夠直接發消息過去啦~~

 1 package com.cuc.happyseat.websocket;  2 
 3 import java.io.IOException;  4 import java.util.concurrent.CopyOnWriteArraySet;  5 
 6 import javax.websocket.EncodeException;  7 import javax.websocket.OnClose;  8 import javax.websocket.OnError;  9 import javax.websocket.OnMessage;  10 import javax.websocket.OnOpen;  11 import javax.websocket.Session;  12 import javax.websocket.server.PathParam;  13 import javax.websocket.server.ServerEndpoint;  14 
 15 import org.springframework.stereotype.Component;  16 
 17 /*@ServerEndpoint註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket服務器端,  18 * 註解的值將被用於監聽用戶鏈接的終端訪問URL地址,客戶端能夠經過這個URL來鏈接到WebSocket服務器端  19 */
 20 @ServerEndpoint("/websocket/{userID}")  21 @Component  22 public class WebSocketServer {  23     
 24         //每一個客戶端都會有相應的session,服務端能夠發送相關消息
 25         private Session session;  26 
 27         //接收userID
 28         private Integer userID;  29         
 30         //J.U.C包下線程安全的類，主要用來存放每一個客戶端對應的webSocket鏈接
 31         private static CopyOnWriteArraySet<WebSocketServer> copyOnWriteArraySet = new CopyOnWriteArraySet<WebSocketServer>();  32 
 33         public Integer getUserID() {  34             return userID;  35  }  36          
 37        /**
 38  * @Name：onOpen  39  * @Description：打開鏈接。進入頁面後會自動發請求到此進行鏈接  40  * @Author：mYunYu  41  * @Create Date：14:46 2018/11/15  42  * @Parameters：@PathParam("userID") Integer userID  43  * @Return：  44        */
 45  @OnOpen  46         public void onOpen(Session session, @PathParam("userID") Integer userID) {  47             this.session = session;  48             this.userID = userID;  49             System.out.println(this.session.getId());  50             //System.out.println("userID:" + userID);
 51             copyOnWriteArraySet.add(this);  52             System.out.println("websocket有新的鏈接, 總數:"+ copyOnWriteArraySet.size());  53 
 54  }  55 
 56        /**
 57  * @Name：onClose  58  * @Description：用戶關閉頁面，即關閉鏈接  59  * @Author：mYunYu  60  * @Create Date：14:46 2018/11/15  61  * @Parameters：  62  * @Return：  63        */
 64  @OnClose  65         public void onClose() {  66             copyOnWriteArraySet.remove(this);  67             System.out.println("websocket鏈接斷開, 總數:"+ copyOnWriteArraySet.size());  68  }  69 
 70         /**
 71  * @Name：onMessage  72  * @Description：測試客戶端發送消息，測試是否聯通  73  * @Author：mYunYu  74  * @Create Date：14:46 2018/11/15  75  * @Parameters：  76  * @Return：  77         */
 78  @OnMessage  79         public void onMessage(String message) {  80             System.out.println("websocket收到客戶端發來的消息:"+message);  81  }  82 
 83         /**
 84  * @Name：onError  85  * @Description：出現錯誤  86  * @Author：mYunYu  87  * @Create Date：14:46 2018/11/15  88  * @Parameters：  89  * @Return：  90         */
 91  @OnError  92         public void onError(Session session, Throwable error) {  93             System.out.println("發生錯誤：" + error.getMessage() + "; sessionId:" + session.getId());  94  error.printStackTrace();  95  }  96 
 97         public void sendMessage(Object object){  98             //遍歷客戶端
 99             for (WebSocketServer webSocket : copyOnWriteArraySet) { 100                 System.out.println("websocket廣播消息：" + object.toString()); 101                 try { 102                     //服務器主動推送
103  webSocket.session.getBasicRemote().sendObject(object) ; 104                 } catch (Exception e) { 105  e.printStackTrace(); 106  } 107  } 108  } 109 
110         /**
111  * @Name：sendMessage 112  * @Description：用於發送給客戶端消息（羣發） 113  * @Author：mYunYu 114  * @Create Date：14:46 2018/11/15 115  * @Parameters： 116  * @Return： 117         */
118         public void sendMessage(String message) { 119             //遍歷客戶端
120             for (WebSocketServer webSocket : copyOnWriteArraySet) { 121                 System.out.println("websocket廣播消息：" + message); 122                 try { 123                     //服務器主動推送
124  webSocket.session.getBasicRemote().sendText(message); 125                 } catch (Exception e) { 126  e.printStackTrace(); 127  } 128  } 129  } 130 
131         /**
132  * @throws Exception 133  * @Name：sendMessage 134  * @Description：用於發送給指定客戶端消息 135  * @Author：mYunYu 136  * @Create Date：14:47 2018/11/15 137  * @Parameters： 138  * @Return： 139         */
140         public void sendMessage(Integer userID, String message) throws Exception { 141             Session session = null; 142             WebSocketServer tempWebSocket = null; 143             for (WebSocketServer webSocket : copyOnWriteArraySet) { 144                 if (webSocket.getUserID() == userID) { 145                     tempWebSocket = webSocket; 146                     session = webSocket.session; 147                     break; 148  } 149  } 150             if (session != null) { 151                 //服務器主動推送
152  tempWebSocket.session.getBasicRemote().sendText(message); 153                 
154             } else { 155                 System.out.println("沒有找到你指定ID的會話：{}"+ "; userId:" + userID); 156  } 157  } 158 
159 
160     
161 }

• Controller類的編寫。

1. 1. 我在看博客的時候，發現有的博主寫了Controller類，有的沒寫，我就有點疑惑了。後來，咳咳，發現特意寫了一個Controller類只是爲了測試。。
   2. 通常在實際項目中，在確保創建鏈接過程沒有問題的狀況下，咱們就直接在一些寫好的接口中寫 WebSocketServer.sendMessage(param, message)語句就好了。
   3. 也所以，你寫的位置就決定了你何時給你的客戶端發消息，這樣也就實現了主動推送消息的功能咯~
   4. 前提是：在你的Controller類裏，以@Resource的方式注入WebSocket，而不是@Autowired方式哦(⊙o⊙)。

@Resource WebSocketServer webSocket; @Autowired UserService userService;

調用示例：

if(userID>0) { boolean location = userService.getLocation(userID); if(location==false) {//驗證用戶當前不在館內
                boolean i = userService.modifyLocation(userID, true); if(i==true) { modelMap.put("successEnter", true); //發消息給客戶端
                webSocket.sendMessage(userID, "success"); } }else { modelMap.put("successEnter", false); //發消息給客戶端
                webSocket.sendMessage(userID, "fail"); } }else { modelMap.put("successEnter", false); //發消息給客戶端
            webSocket.sendMessage(userID, "fail"); } 

• 前端測試

由於我只寫後端，前端部分小姐姐說看微信的官方文檔就能夠啦~ 連接：在此！微信封裝好了吧，好像不難。

3. Problems

• 前期我看不少博客，的確產生不少問題，想不通，主要就是上面幾個問題。而後我寫了讓前端先連WebSocket試了一下，想本身瞭解一下鏈接過程（也就是在控制檯輸出的文件中查），後來就慢慢通了。能夠說是一路順風了？？
• 不過我確保我沒問題不算，得前端說了算對吧。因此，，我背了鍋😭。

1. 1. 第一次，她給我截圖！啊餵你連WebSocket給我用https?嗯？
   2. 後來換成了ws，又說不行，我就想我哪又有問題了？而後我恰好在我打開的n篇類似的博客中找到了答案。由於小程序是隻支持https訪問的，因此得用wss。（感謝博主！）

　　　　　　　

　　　　　　3. 而後終於傳來了喜訊！開心~

　　　　　　  前端鏈接成功：

後端輸出記錄：

ps:紅框的1，2，3，4應該是每次鏈接時自增加的sessionid，即上面截圖中返回的socketTaskId，話說用這個來標識用戶應該也能夠。

服務器主動給該客戶端發消息，成功發送！

4. Summary

　　前期對WebSocket的知識瞭解估計還不夠吧，致使在理解問題的過程當中花費了很多時間。

　　不過是否是程序員都會有這種錯覺呢？：當你面前有一座大山，你以爲難以跨越，但當你成功翻山越嶺以後，就會以爲這座山不過爾爾？

　　嘿嘿嘿，下面是學習WebSocket過程當中參考的幾篇博文：

• springboot 學習之路 8 (整合websocket(1))
• 看完讓你完全搞懂Websocket原理
• HTML5 WebSocket

 

原文出處：https://www.cnblogs.com/codecheng/p/10657530.html