[WebSocket長連接]SpringBoot2.0集成WebSocket，實現后台向前端推送信息

感謝作者,支持原創: https://blog.csdn.net/moshowgame/article/details/80275084

什么是WebSocket?

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

 

為什么需要 WebSocket？

初次接觸 WebSocket 的人，都會問同樣的問題：我們已經有了 HTTP 協議，為什么還需要另一個協議？它能帶來什么好處？

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

舉例來說，我們想要查詢當前的排隊情況，只能是頁面輪詢向服務器發出請求，服務器返回查詢結果。輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此WebSocket 就是這樣發明的。

 

Maven依賴

        <!--springboot的高級組件會自動引用基礎的組件-->
        <!--，像spring-boot-starter-websocket就引入了spring-boot-starter-web和spring-boot-starter，-->
        <!--所以不要重復引入。-->
        <!--JavaEE標准-->
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <!--websocket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

 

WebSocket配置類

package com.zr.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @Author: Hujh
 * @Date: 2019/7/16 11:10
 * @Description: WebSocket配置類
 */
@Configuration
public class WebSocketConfig {

    /*使用@ServerEndpoint創立websocket endpoint*/
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

 

WebSocketServer

因為WebSocket是類似客戶端服務端的形式(采用ws協議)，那么這里的WebSocketServer其實就相當於一個ws協議的Controller直接@ServerEndpoint("/websocket")@Component啟用即可，然后在里面實現@OnOpen,@onClose,@onMessage等方法

 

package com.zr.demo.socket;

import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @Author: Hujh
 * @Date: 2019/7/16 11:13
 * @Description: webSocket實現類
 */
@ServerEndpoint(value = "/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;   //加入set中
        webSocketSet.add(this);
        addOnlineCount();  //在線數加1
        System.out.println("有新連接加入！當前在線人數為：" + getOnlineCount());
        try {
            sendMessage("連接成功");
        } 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();
     }

    /*
     * @Title: sendMessage
     * @Author : Hujh
     * @Date: 2019/7/17 10:52
     * @Description : 發送消息
     * @param : message
     * @Return : void
     */
     public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
     //this.session.getAsyncRemote().sendText(message);
     }


     /*
      * @Title: sendInfo
      * @Author : Hujh
      * @Date: 2019/7/17 10:52
      * @Description : 群發自定義消息
      * @param : message
      * @Return : void
      */
    public static void sendInfo(String message) throws IOException {
        for (WebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

    /*
     * @Title: getOnlineCount
     * @Author : Hujh
     * @Date: 2019/7/17 10:51
     * @Description : 獲得當前在線人數
     * @param :
     * @Return : int
     */
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    /*
     * @Title: addOnlineCount
     * @Author : Hujh
     * @Date: 2019/7/17 10:51
     * @Description : 在線人數+1
     * @param :
     * @Return : void
     */
    public static synchronized void addOnlineCount() {
        WebSocket.onlineCount++;
    }

    /*
     * @Title: subOnlineCount
     * @Author : Hujh
     * @Date: 2019/7/17 10:52
     * @Description :在線人數-1
     * @param :
     * @Return : void
     */
    public static synchronized void subOnlineCount() {
        WebSocket.onlineCount--;
    }

}

 

消息推送

至於推送新信息，可以再自己的Controller寫個方法調用WebSocket.sendInfo();

package com.zr.demo.controller;

import com.zr.demo.socket.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author: Hujh
 * @Date: 2019/7/19 15:40
 * @Description: 消息發送控制器
 */
@RestController
public class SendMessageController {

    @Autowired
    private WebSocket webSocket;

    @RequestMapping("sendInfo")
    public String sendInfo(@RequestParam String msg) {
        try {
            webSocket.sendInfo(msg);
        } catch (Exception e) {
            e.printStackTrace();
            return "信息發送異常!";
        }

        return "發送成功~";
    }

}

 

頁面代碼

<!DOCTYPE HTML>
<html>
<head>
    <title>WebSocket</title>
</head>

<body>
<div style="width: 800px;height: 100%; margin: 0px auto;">
    <span style="color: coral; font-size: 22px;"> Welcome WebSocket</span><br/><br/>
    <div id="message">
    </div>
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判斷當前瀏覽器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8082/webSocket");
    }else{
        alert('連接失敗!!')
    }

    //連接發生錯誤的回調方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //連接成功建立的回調方法
    websocket.onopen = function(event){
        setMessageInnerHTML("webSocket 連接成功~");
    }

    //接收到消息的回調方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //連接關閉的回調方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，
    // 防止連接還沒斷開就關閉窗口，server端會拋異常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //將消息顯示在網頁上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //關閉連接
    function closeWebSocket(){
       websocket.close();
    }

  61 </script>
</html>

 

測試效果

1.建立兩個連接

 

2.消息推送

 

 

 

 注：本文僅作為個人學習記錄,不提供任何參考價值!