springboot websocket 一篇足夠了

什么是WebSocket

WebSocket是一種在單個TCP連接上進行全雙工通信的協議 …

為什么要實現握手監控管理

如果說，連接隨意創建，不管的話，會存在錯誤，broken pipe

表面看單純報錯，並沒什么功能缺陷等，但實際，請求數增加，容易導致系統奔潰。這邊畫重點。

出現原因有很多種，目前我這邊出現的原因，是因為客戶端已關閉連接，服務端還持續推送導致。

如何使用

下面將使用springboot集成的webSocket

導入Maven

首先SpringBoot版本

 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
    </parent>

 

集成websocket

        // 加個web集成吧
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>

Java代碼

Config配置

首先，我們需要重寫WebSocketHandlerDecoratorFactory

主要用來監控客戶端握手連接進來以及揮手關閉連接

代碼

需要一個管理Socket的類

package com.li.manager;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.socket.WebSocketSession;

import java.util.concurrent.ConcurrentHashMap;

/**
 * socket管理器
 */
@Slf4j
public class SocketManager {
    private static ConcurrentHashMap<String, WebSocketSession> manager = new ConcurrentHashMap<String, WebSocketSession>();

    public static void add(String key, WebSocketSession webSocketSession) {
        log.info("新添加webSocket連接 {} ", key);
        manager.put(key, webSocketSession);
    }

    public static void remove(String key) {
        log.info("移除webSocket連接 {} ", key);
        manager.remove(key);
    }

    public static WebSocketSession get(String key) {
        log.info("獲取webSocket連接 {}", key);
        return manager.get(key);
    }


}

 

package com.li.factory;

import com.li.manager.SocketManager;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.WebSocketHandlerDecorator;
import org.springframework.web.socket.handler.WebSocketHandlerDecoratorFactory;

import java.security.Principal;

/**
 * 服務端和客戶端在進行握手揮手時會被執行
 */
@Component
@Slf4j
public class WebSocketDecoratorFactory implements WebSocketHandlerDecoratorFactory {
    @Override
    public WebSocketHandler decorate(WebSocketHandler handler) {
        return new WebSocketHandlerDecorator(handler) {
            @Override
            public void afterConnectionEstablished(WebSocketSession session) throws Exception {
                log.info("有人連接啦  sessionId = {}", session.getId());
                Principal principal = session.getPrincipal();
                if (principal != null) {
                    log.info("key = {} 存入", principal.getName());
                    // 身份校驗成功，緩存socket連接
                    SocketManager.add(principal.getName(), session);
                }


                super.afterConnectionEstablished(session);
            }

            @Override
            public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
                log.info("有人退出連接啦  sessionId = {}", session.getId());
                Principal principal = session.getPrincipal();
                if (principal != null) {
                    // 身份校驗成功，移除socket連接
                    SocketManager.remove(principal.getName());
                }
                super.afterConnectionClosed(session, closeStatus);
            }
        };
    }
}

 

注意：以上session變量，需要注意兩點，一個是getId(),一個是getPrincipal().getName()

getId() ： 返回的是唯一的會話標識符。

getPrincipal() : 經過身份驗證，返回Principal實例，未經過身份驗證，返回null

Principal: 委托人的抽象概念,可以是公司id，名字，用戶唯一識別token等

當你按上面代碼使用，你會發現getPrincipal()返回null，為什么？這邊還需要重寫一個DefaultHandshakeHandler

代碼

package com.li.handler;

import lombok.extern.slf4j.Slf4j;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;

import javax.servlet.http.HttpServletRequest;
import java.security.Principal;
import java.util.Map;

/**
 * 我們可以通過請求信息，比如token、或者session判用戶是否可以連接，這樣就能夠防范非法用戶
 */
@Slf4j
@Component
public class PrincipalHandshakeHandler extends DefaultHandshakeHandler {
    @Override
    protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
        /**
         * 這邊可以按你的需求，如何獲取唯一的值，既unicode
         * 得到的值，會在監聽處理連接的屬性中，既WebSocketSession.getPrincipal().getName()
         * 也可以自己實現Principal()
         */
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest servletServerHttpRequest = (ServletServerHttpRequest) request;
            HttpServletRequest httpRequest = servletServerHttpRequest.getServletRequest();
            /**
             * 這邊就獲取你最熟悉的陌生人,攜帶參數，你可以cookie，請求頭，或者url攜帶，這邊我采用url攜帶
             */
            final String token = httpRequest.getParameter("token");
            if (StringUtils.isEmpty(token)) {
                return null;
            }
            return new Principal() {
                @Override
                public String getName() {
                    return token;
                }
            };
        }
        return null;
    }
}

 

需要的東西都有了，那准備裝載吧

代碼

package com.li.config;

import com.li.factory.WebSocketDecoratorFactory;
import com.li.handler.PrincipalHandshakeHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketTransportRegistration;


/**
 * WebSocketConfig配置
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Autowired
    private WebSocketDecoratorFactory webSocketDecoratorFactory;
    @Autowired
    private PrincipalHandshakeHandler principalHandshakeHandler;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /**
         * myUrl表示 你前端到時要對應url映射
         */
        registry.addEndpoint("/myUrl")
                .setAllowedOrigins("*")
                .setHandshakeHandler(principalHandshakeHandler)
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        /**
         * queue 點對點
         * topic 廣播
         * user 點對點前綴
         */
        registry.enableSimpleBroker("/queue", "/topic");
        registry.setUserDestinationPrefix("/user");
    }

    @Override
    public void configureWebSocketTransport(WebSocketTransportRegistration registration) {
        registration.addDecoratorFactory(webSocketDecoratorFactory);
        super.configureWebSocketTransport(registration);
    }
}

 

終於完成了

最后，來一個通過http請求，將其發送到客戶端

代碼

package com.li.controller;

import com.li.manager.SocketManager;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.socket.WebSocketSession;

import java.util.Map;

@RestController
@Slf4j
public class TestController {

    @Autowired
    private SimpMessagingTemplate template;

    /**
     * 服務器指定用戶進行推送,需要前端開通 var socket = new SockJS(host+'/myUrl' + '?token=1234');
     */
    @RequestMapping("/sendUser")
    public void sendUser(String token) {
        log.info("token = {} ,對其發送您好", token);
        WebSocketSession webSocketSession = SocketManager.get(token);
        if (webSocketSession != null) {
            /**
             * 主要防止broken pipe
             */
            template.convertAndSendToUser(token, "/queue/sendUser", "您好");
        }

    }

    /**
     * 廣播，服務器主動推給連接的客戶端
     */
    @RequestMapping("/sendTopic")
    public void sendTopic() {
        template.convertAndSend("/topic/sendTopic", "大家晚上好");

    }

    /**
     * 客戶端發消息，服務端接收
     *
     * @param message
     */
    // 相當於RequestMapping
    @MessageMapping("/sendServer")
    public void sendServer(String message) {
        log.info("message:{}", message);
    }

    /**
     * 客戶端發消息，大家都接收，相當於直播說話
     *
     * @param message
     * @return
     */
    @MessageMapping("/sendAllUser")
    @SendTo("/topic/sendTopic")
    public String sendAllUser(String message) {
        // 也可以采用template方式
        return message;
    }

    /**
     * 點對點用戶聊天，這邊需要注意，由於前端傳過來json數據，所以使用@RequestBody
     * 這邊需要前端開通var socket = new SockJS(host+'/myUrl' + '?token=4567');   token為指定name
     * @param map
     */
    @MessageMapping("/sendMyUser")
    public void sendMyUser(@RequestBody Map<String, String> map) {
        log.info("map = {}", map);
        WebSocketSession webSocketSession = SocketManager.get(map.get("name"));
        if (webSocketSession != null) {
            log.info("sessionId = {}", webSocketSession.getId());
            template.convertAndSendToUser(map.get("name"), "/queue/sendUser", map.get("message"));
        }
    }


}

 

前端代碼

可以直接啟動

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spring Boot WebSocket+廣播式</title>
</head>
<body>
    <noscript>
        <h2 style="color:#ff0000">貌似你的瀏覽器不支持websocket</h2>
    </noscript>
    <div>
        <div>
            <button id="connect" onclick="connect()">連接</button>
            <button id="disconnect"  onclick="disconnect();">斷開連接</button>
        </div>
        <div id="conversationDiv">
            <label>輸入你的名字</label> <input type="text" id="name" />
            <br>
            <label>輸入消息</label> <input type="text" id="messgae" />
            <button id="send" onclick="send();">發送</button>
            <p id="response"></p>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        //gateway網關的地址
        var host="http://127.0.0.1:8888";
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            $('#response').html();
        }
        // SendUser ***********************************************
        function connect() {
            //地址+端點路徑，構建websocket鏈接地址,注意，對應config配置里的addEndpoint
            var socket = new SockJS(host+'/myUrl' + '?token=4567');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected:' + frame);
                //監聽的路徑以及回調
                stompClient.subscribe('/user/queue/sendUser', function(response) {
                    showResponse(response.body);
                });
            });
        }
        /*
        function connect() {
            //地址+端點路徑，構建websocket鏈接地址,注意，對應config配置里的addEndpoint
            var socket = new SockJS(host+'/myUrl');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected:' + frame);
                //監聽的路徑以及回調
                stompClient.subscribe('/topic/sendTopic', function(response) {
                    showResponse(response.body);
                });
            });
        }*/
        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
        function send() {
            var name = $('#name').val();
            var message = $('#messgae').val();
            /*//發送消息的路徑,由客戶端發送消息到服務端 
            stompClient.send("/sendServer", {}, message);
            */
            /*// 發送給所有廣播sendTopic的人,客戶端發消息，大家都接收，相當於直播說話 注：連接需開啟 /topic/sendTopic
            stompClient.send("/sendAllUser", {}, message);
            */
            /* 這邊需要注意，需要啟動不同的前端html進行測試，需要改不同token ，例如 token=1234，token=4567
            * 然后可以通過寫入name 為token  進行指定用戶發送
            */
            stompClient.send("/sendMyUser", {}, JSON.stringify({name:name,message:message}));
        }
        function showResponse(message) {
            var response = $('#response');
            response.html(message);
        }
    </script>
</body>
</html>

 

注意，記得要自己嘗試，好記性不如爛筆頭。

版權聲明：本文為不會代碼的小白原創文章，轉載需添加小白地址 ： https://www.ccode.live/bertonlee/list/8?from=art

源代碼：https://github.com/bertonlee/webSocket-01 歡迎Star

歡迎關注

歡迎關注公眾號“碼上開發”，每天分享最新技術資訊