SpringBoot使用WebSocket

苟富貴?發表於2019-06-14
Spring BootWeb

WebSocket是啥

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。

WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

在 WebSocket API 中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

java怎麼寫

配置Bean

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
複製程式碼

java連結

/**
 * token為前端連線時的標識，後端根據此token維護使用者與webSocket的繫結
 */
@Component
@ServerEndpoint("/webSocket/{token}")
public class WebSocket {

    private Session session;

    private static ConcurrentHashMap<String, WebSocket> webSocketMap = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(@PathParam(value = "token") String token, Session session) {
        this.session = session;
        webSocketMap.put(token, this);
        System.out.println("new connect：" + token + ". total :" + webSocketMap.size());
    }

    @OnClose
    public void onClose(@PathParam(value = "token") String token) {
        webSocketMap.remove(token);
        System.out.println("disconnect:" + token + ", total:" + webSocketMap.size());
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println("get message: " + message);
    }

    public void sendMessage(String message) {
        // 根據業務邏輯，找到token指向的webSocket
        WebSocket webSocket = webSocketMap.get(String.valueOf(message.charAt(0)));
        // 找不到返回
        if (webSocket == null) {
            return;
        }
        try {
            webSocket.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
複製程式碼

前端怎麼寫

    /**
     * WebSocket客戶端
     *
     * 使用說明：
     * 1、WebSocket客戶端通過回撥函式來接收服務端訊息。例如：webSocket.onmessage
     * 2、WebSocket客戶端通過send方法來傳送訊息給服務端。例如：webSocket.send();
     */
    function getWebSocket() {
        /**
         * WebSocket客戶端 PS：URL開頭表示WebSocket協議 中間是域名埠 結尾是服務端對映地址
         */
        var webSocket = new WebSocket(/*[[${webSocketUrl}]]*/ 'ws://localhost:8080/webSocket/2');
        /**
         * 當服務端開啟連線
         */
        webSocket.onopen = function (event) {
            console.log('WebSocket開啟連線');
        };

        /**
         * 當服務端發來訊息：1.廣播訊息 2.更新線上人數
         */
        webSocket.onmessage = function (event) {
            console.log('WebSocket收到訊息：%c' + event.data, 'color:green');
        };

        /**
         * 關閉連線
         */
        webSocket.onclose = function (event) {
            console.log('WebSocket關閉連線');
        };

        /**
         * 通訊失敗
         */
        webSocket.onerror = function (event) {
            console.log('WebSocket發生異常');

        };
        return webSocket;
    }
複製程式碼

github地址

github.com/eizmoo/webs…

相關文章