SpringBoot2.0集成WebSocket，實現後臺向前端推送信息

時間 2019-11-18

標籤 springboot2.0 springboot 集成 websocket 實現後臺向前推送信息欄目 Spring 简体版

原文原文鏈接

什麼是WebSocket?前端

WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——容許服務器主動發送信息給客戶端。java

爲何須要 WebSocket？
初次接觸 WebSocket 的人，都會問一樣的問題：咱們已經有了 HTTP 協議，爲何還須要另外一個協議？它能帶來什麼好處？jquery

答案很簡單，由於 HTTP 協議有一個缺陷：通訊只能由客戶端發起，HTTP 協議作不到服務器主動向客戶端推送信息。web

舉例來講，咱們想要查詢當前的排隊狀況，只能是頁面輪詢向服務器發出請求，服務器返回查詢結果。輪詢的效率低，很是浪費資源（由於必須不停鏈接，或者 HTTP 鏈接始終打開）。所以WebSocket 就是這樣發明的。
話很少說，立刻進入乾貨時刻。spring

maven依賴
SpringBoot2.0對WebSocket的支持簡直太棒了，直接就有包能夠引入瀏覽器

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

WebSocketConfig
啓用WebSocket的支持也是很簡單，幾句代碼搞定安全

 1 import org.springframework.context.annotation.Bean;
 2 import org.springframework.context.annotation.Configuration;
 3 import org.springframework.web.socket.server.standard.ServerEndpointExporter;
 4 
 5 /**
 6  * 開啓WebSocket支持
 7  * @author zhengkai
 8  */
 9 @Configuration  
10 public class WebSocketConfig {  
11     
12     @Bean  
13     public ServerEndpointExporter serverEndpointExporter() {  
14         return new ServerEndpointExporter();  
15     }  
16   
17 }

WebSocketServer
由於WebSocket是相似客戶端服務端的形式(採用ws協議)，那麼這裏的WebSocketServer其實就至關於一個ws協議的Controller
直接@ServerEndpoint("/websocket")@Component啓用便可，而後在裏面實現@OnOpen,@onClose,@onMessage等方法

服務器

  1 import java.io.IOException;
  2 import java.util.concurrent.CopyOnWriteArraySet;
  3 
  4 import javax.websocket.OnClose;
  5 import javax.websocket.OnError;
  6 import javax.websocket.OnMessage;
  7 import javax.websocket.OnOpen;
  8 import javax.websocket.Session;
  9 import javax.websocket.server.ServerEndpoint;
 10 import org.springframework.stereotype.Component;
 11 import cn.hutool.log.Log;
 12 import cn.hutool.log.LogFactory;
 13 import lombok.extern.slf4j.Slf4j;
 14 
 15 
 16 @ServerEndpoint("/websocket/{sid}")
 17 @Component
 18 public class WebSocketServer {
 19     
 20     static Log log=LogFactory.get(WebSocketServer.class);
 21     //靜態變量，用來記錄當前在線鏈接數。應該把它設計成線程安全的。
 22     private static int onlineCount = 0;
 23     //concurrent包的線程安全Set，用來存放每一個客戶端對應的MyWebSocket對象。
 24     private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
 25 
 26     //與某個客戶端的鏈接會話，須要經過它來給客戶端發送數據
 27     private Session session;
 28 
 29     //接收sid
 30     private String sid="";
 31     /**
 32      * 鏈接創建成功調用的方法*/
 33     @OnOpen
 34     public void onOpen(Session session,@PathParam("sid") String sid) {
 35         this.session = session;
 36         webSocketSet.add(this);     //加入set中
 37         addOnlineCount();           //在線數加1
 38         log.info("有新窗口開始監聽:"+sid+",當前在線人數爲" + getOnlineCount());
 39         this.sid=sid;
 40         try {
 41              sendMessage("鏈接成功");
 42         } catch (IOException e) {
 43             log.error("websocket IO異常");
 44         }
 45     }
 46 
 47     /**
 48      * 鏈接關閉調用的方法
 49      */
 50     @OnClose
 51     public void onClose() {
 52         webSocketSet.remove(this);  //從set中刪除
 53         subOnlineCount();           //在線數減1
 54         log.info("有一鏈接關閉！當前在線人數爲" + getOnlineCount());
 55     }
 56 
 57     /**
 58      * 收到客戶端消息後調用的方法
 59      *
 60      * @param message 客戶端發送過來的消息*/
 61     @OnMessage
 62     public void onMessage(String message, Session session) {
 63         log.info("收到來自窗口"+sid+"的信息:"+message);
 64         //羣發消息
 65         for (WebSocketServer item : webSocketSet) {
 66             try {
 67                 item.sendMessage(message);
 68             } catch (IOException e) {
 69                 e.printStackTrace();
 70             }
 71         }
 72     }
 73 
 74     /**
 75      * 
 76      * @param session
 77      * @param error
 78      */
 79     @OnError
 80     public void onError(Session session, Throwable error) {
 81         log.error("發生錯誤");
 82         error.printStackTrace();
 83     }
 84     /**
 85      * 實現服務器主動推送
 86      */
 87     public void sendMessage(String message) throws IOException {
 88         this.session.getBasicRemote().sendText(message);
 89     }
 90 
 91 
 92     /**
 93      * 羣發自定義消息
 94      * */
 95     public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
 96         log.info("推送消息到窗口"+sid+"，推送內容:"+message);
 97         for (WebSocketServer item : webSocketSet) {
 98             try {
 99                 //這裏能夠設定只推送給這個sid的，爲null則所有推送
100                 if(sid==null) {
101                     item.sendMessage(message);
102                 }else if(item.sid.equals(sid)){
103                     item.sendMessage(message);
104                 }
105             } catch (IOException e) {
106                 continue;
107             }
108         }
109     }
110 
111     public static synchronized int getOnlineCount() {
112         return onlineCount;
113     }
114 
115     public static synchronized void addOnlineCount() {
116         WebSocketServer.onlineCount++;
117     }
118 
119     public static synchronized void subOnlineCount() {
120         WebSocketServer.onlineCount--;
121     }
122 }

消息推送
至於推送新信息，能夠再本身的Controller寫個方法調用WebSocketServer.sendInfo();便可websocket

@Controller
@RequestMapping("/checkcenter")
public class CheckCenterController {

    //頁面請求
    @GetMapping("/socket/{cid}")
    public ModelAndView socket(@PathVariable String cid) {
        ModelAndView mav=new ModelAndView("/socket");
        mav.addObject("cid", cid);
        return mav;
    }
    //推送數據接口
    @ResponseBody
    @RequestMapping("/socket/push/{cid}")
    public ApiReturnObject pushToWeb(@PathVariable String cid,String message) {  
        try {
            WebSocketServer.sendInfo(message,cid);
        } catch (IOException e) {
            e.printStackTrace();
            return ApiReturnUtil.error(cid+"#"+e.getMessage());
        }  
        return ApiReturnUtil.success(cid);
    } 
}

頁面發起socket請求
而後在頁面用js代碼調用socket，固然，太古老的瀏覽器是不行的，通常新的瀏覽器或者谷歌瀏覽器是沒問題的。還有一點，記得協議是ws的哦，若是像我這樣封裝了一些basePath的路徑類，能夠replace(「http」,「ws」)來替換協議

<script> 
    var socket;  
    if(typeof(WebSocket) == "undefined") {  
        console.log("您的瀏覽器不支持WebSocket");  
    }else{  
        console.log("您的瀏覽器支持WebSocket");  
            //實現化WebSocket對象，指定要鏈接的服務器地址與端口  創建鏈接  
            //等同於socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");  
            socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));  
            //打開事件  
            socket.onopen = function() {  
                console.log("Socket 已打開");  
                //socket.send("這是來自客戶端的消息" + location.href + new Date());  
            };  
            //得到消息事件  
            socket.onmessage = function(msg) {  
                console.log(msg.data);  
                //發現消息進入    開始處理前端觸發邏輯
            };  
            //關閉事件  
            socket.onclose = function() {  
                console.log("Socket已關閉");  
            };  
            //發生了錯誤事件  
            socket.onerror = function() {  
                alert("Socket發生了錯誤");  
                //此時能夠嘗試刷新頁面
            }  
            //離開頁面時，關閉socket
            //jquery1.8中已經被廢棄，3.0中已經移除
            // $(window).unload(function(){  
            //     socket.close();  
            //});  
    }
    </script>

運行效果
v1.1的效果，剛剛修復了日誌，而且支持指定監聽某個端口，代碼已經所有更新，如今是這樣的效果

打開兩個頁面：
http://localhost:8083/checkcentersys/checkcenter/socket/20
http://localhost:8083/checkcentersys/checkcenter/socket/22
向前端推送數據：
http://localhost:8083/checkcentersys/checkcenter/socket/push/20?message=cccccccccc
http://localhost:8083/checkcentersys/checkcenter/socket/push/22?message=xxxxx123xxxx

先打開頁面，指定cid，啓用socket接收，而後再另外一個頁面調用剛纔Controller封裝的推送信息的方法到這個cid的socket，便可向前端推送消息。

後續
針對簡單IM的業務場景，進行了一些優化，能夠看後續的文章SpringBoot2+WebSocket之聊天應用實戰(優化版本)

主要變更是CopyOnWriteArraySet改成ConcurrentHashMap，保證多線程安全同時方便利用map.get(userId)進行推送到指定端口。

相比以前的Set，Set遍歷是費事且麻煩的事情，而Map的get是簡單便捷的，當WebSocket數量大的時候，這個小小的消耗就會聚少成多，影響體驗，因此須要優化。

Websocker注入Bean問題
關於這個問題，能夠看最新發表的這篇文章，在參考和研究了網上一些攻略後，項目已經經過該方法注入成功，你們能夠參考。
關於controller調用controller/service調用service/util調用service/websocket中autowired的解決方法

netty-websocket-spring-boot-starter
Springboot2構建基於Netty的高性能Websocket服務器(netty-websocket-spring-boot-starter)
只須要換個starter便可實現高性能websocket，趕忙使用吧

Springboot2+Netty+Websocket
Springboot2+Netty實現Websocket，使用官方的netty-all的包，比原生的websocket更加穩定更加高性能，同等配置狀況下能夠handle更多的鏈接。

代碼樣式所有已經更正，另外也感謝你們的閱讀和評論，一塊兒進步，謝謝！~~

serverEndpointExporter錯誤
org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘serverEndpointExporter’ defined in class path resource [com/xxx/WebSocketConfig.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available

若是tomcat部署一直報這個錯，請移除 WebSocketConfig 中@Bean ServerEndpointExporter 的注入。

ServerEndpointExporter 是由Spring官方提供的標準實現，用於掃描ServerEndpointConfig配置類和@ServerEndpoint註解實例。使用規則也很簡單：

若是使用默認的嵌入式容器好比Tomcat 則必須手工在上下文提供ServerEndpointExporter。
若是使用外部容器部署war包，則不須要提供提供ServerEndpointExporter，由於此時SpringBoot默認將掃描服務端的行爲交給外部容器處理，因此線上部署的時候要把WebSocketConfig中這段注入bean的代碼注掉。

文章轉自: http://www.javashuo.com/article/p-kvipcjjl-z.html

其餘參考:

1. http://www.javashuo.com/article/p-hjnemkkk-eo.html

2. http://www.javashuo.com/article/p-kbctzses-na.html

3. https://blog.csdn.net/qq_34409255/article/details/81010075