springboot整合websocket实现一对一消息推送和广播消息推送

爱被打了一巴掌 2021-12-03 14:39 488阅读 0赞

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi05YjgzMzE5OWVmZWU2NGZmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

springboot基础环境

请参考springboot文档

maven依赖

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

代码准备

准备常量类

//webSocket相关配置
        //链接地址
        public static String WEBSOCKETPATHPERFIX = "/ws-push";
        public static String WEBSOCKETPATH = "/endpointWisely";
        //消息代理路径
        public static String WEBSOCKETBROADCASTPATH = "/topic";
        //前端发送给服务端请求地址
        public static final String FORETOSERVERPATH = "/welcome";
        //服务端生产地址,客户端订阅此地址以接收服务端生产的消息
        public static final String PRODUCERPATH = "/topic/getResponse";
        //点对点消息推送地址前缀
        public static final String P2PPUSHBASEPATH = "/user";
        //点对点消息推送地址后缀,最后的地址为/user/用户识别码/msg
        public static final String P2PPUSHPATH = "/msg";

接收前端消息实体

public class WiselyMessage {
        private String name;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    }

后台发送消息实体

private String responseMessage;
    
        public WiselyResponse(String responseMessage){
            this.responseMessage = responseMessage;
        }
    
        public String getResponseMessage() {
            return responseMessage;
        }
    
        public void setResponseMessage(String responseMessage) {
            this.responseMessage = responseMessage;
        }
    配置websocket
    @Configuration
    // @EnableWebSocketMessageBroker注解用于开启使用STOMP协议来传输基于代理（MessageBroker）的消息，这时候控制器（controller）
    // 开始支持@MessageMapping,就像是使用@requestMapping一样。
    @EnableWebSocketMessageBroker
    public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    
        @Override
        public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
            //注册一个Stomp的节点（endpoint）,并指定使用SockJS协议。
            stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).withSockJS();
        }
    
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) {
            //服务端发送消息给客户端的域,多个用逗号隔开
            registry.enableSimpleBroker(Constant.WEBSOCKETBROADCASTPATH, Constant.P2PPUSHBASEPATH);
            //定义一对一推送的时候前缀
            registry.setUserDestinationPrefix(Constant.P2PPUSHBASEPATH);
            //定义websoket前缀
            registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);
        }
    }
    service
    @Service
    public class WebSocketService {
    
        @Autowired
        private SimpMessagingTemplate template;
    
        /**
         * 广播
         * 发给所有在线用户
         *
         * @param msg
         */
        public void sendMsg(WiselyResponse msg) {
            template.convertAndSend(Constant.PRODUCERPATH, msg);
        }
    
        /**
         * 发送给指定用户
         * @param users
         * @param msg
         */
        public void send2Users(List<String> users, WiselyResponse msg) {
            users.forEach(userName -> {
                template.convertAndSendToUser(userName, Constant.P2PPUSHPATH, msg);
            });
        }
    }

控制器

@Controller
    public class WsController {
    
        @Resource
        WebSocketService webSocketService;
    
        @MessageMapping(Constant.FORETOSERVERPATH)//@MessageMapping和@RequestMapping功能类似，用于设置URL映射地址，浏览器向服务器发起请求，需要通过该地址。
        @SendTo(Constant.PRODUCERPATH)//如果服务器接受到了消息，就会对订阅了@SendTo括号中的地址传送消息。
        public WiselyResponse say(WiselyMessage message) throws Exception {
            List<String> users = Lists.newArrayList();
            users.add("d892bf12bf7d11e793b69c5c8e6f60fb");//此处写死只是为了方便测试,此值需要对应页面中订阅个人消息的userId
            webSocketService.send2Users(users, new WiselyResponse("admin hello"));
    
            return new WiselyResponse("Welcome, " + message.getName() + "!");
        }
    }

页面

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Spring Boot+WebSocket+广播式</title>
    
    </head>
    <body onload="disconnect()">
    <noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
    <div>
        <div>
            <button id="connect" onclick="connect();">连接</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
        </div>
        <div id="conversationDiv">
            <label>输入你的名字</label><input type="text" id="name" />
            <button id="sendName" onclick="sendName();">发送</button>
            <p id="response"></p>
            <p id="response1"></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.2.1/jquery.min.js"></script>
    <script th:inline="javascript">
        var stompClient = null;
        //此值有服务端传递给前端,实现方式没有要求
        var userId = [[${userId}]];
    
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            $('#response').html();
        }
    
        function connect() {
            var socket = new SockJS('/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
            stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
            stompClient.connect({}, function(frame) {//3连接webSocket的服务端。
                setConnected(true);
                console.log('开始进行连接Connected: ' + frame);
                //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
                stompClient.subscribe('/topic/getResponse', function(respnose){
                    showResponse(JSON.parse(respnose.body).responseMessage);
                });
                //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
                stompClient.subscribe('/user/' + userId + '/msg', function(respnose){
                    console.log(respnose);
                    showResponse1(JSON.parse(respnose.body).responseMessage);
                });
            });
        }
    
    
        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }
    
        function sendName() {
            var name = $('#name').val();
            //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
            stompClient.send("/ws-push/welcome", {}, JSON.stringify({ 'name': name }));
        }
    
        function showResponse(message) {
            var response = $("#response");
            response.html(message);
        }
        function showResponse1(message) {
            var response = $("#response1");
            response.html(message);
        }
    </script>
    </body>
    </html>

测试

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0xMTk4NDBhNmQ2YmFjYzc1P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

点击连接控制台输出

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0xMzg4YjUyZDlkNTJjMGRiP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

表示连接成功并且订阅了两个地址

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yOGQ2ZjViYTNlNzkwNjZkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

此时在文本框内输入任意值，结果如图所示则代表成功

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yZGI0NWQ0ZWNlOTY2NGI2P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

![aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9lUVB5QmZmWWJ1ZHR4MXE5TmUzdHFqSEM2TFl5STJOZGw3cWFibWFMVTl0S0pNdmVhQTFyb1IzMzM5cnlpY1M0YmxTUUduZkViTEtKWXhHTG1WZnRtNWcvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ][]

控制台中显示依次为,发送信息,目标长度内容

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0zZWUyNGRjYWNiMmMyOGJkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

此时服务端控制器接收到请求

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi1mNGI1Y2U3OTA1ZDNkNzFlP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

同时给指定用户发送了消息,所以控制台接收到消息

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0zMDk1YzcyNTQyM2M0Nzg1P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

同时因为控制器有注解@SendTo所以会向@SendTo的地址广播消息,客户端订阅了广播地址所有控制台显示接收了消息

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi01M2ZiMzVkNjBlM2M3YzJjP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

***扩展阅读***

[Spring Boot教你一种方法生成全局唯一ID][Spring Boot_ID]

[Spring Boot 配置随机数那些小技巧][Spring Boot]

[RabbitMQ之消息确认机制（事务+Confirm）][RabbitMQ_Confirm]

[分布式服务（RPC）+分布式消息队列（MQ）面试题精选][RPC_MQ]

[为什么要进行URL编码][URL]

> 作者：kunm
> 
> 来源：https://segmentfault.com/a/1190000011908831

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yYzhhZmFhMjFlYjI3MGFkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi05YjgzMzE5OWVmZWU2NGZmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/cbad5d1b281540898ee04340249e37f9.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0xMTk4NDBhNmQ2YmFjYzc1P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/223baa6764fd4e28b811a116e6886752.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0xMzg4YjUyZDlkNTJjMGRiP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/637afcd5bedd43f598b99bedea9a8c4d.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yOGQ2ZjViYTNlNzkwNjZkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/57f6cfeff0c3498f8155164485d6ff41.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yZGI0NWQ0ZWNlOTY2NGI2P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/25fb7b8471f549d9adbb90049ca7d60e.png
[aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9lUVB5QmZmWWJ1ZHR4MXE5TmUzdHFqSEM2TFl5STJOZGw3cWFibWFMVTl0S0pNdmVhQTFyb1IzMzM5cnlpY1M0YmxTUUduZkViTEtKWXhHTG1WZnRtNWcvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ]: /images/20211203/91ca0b90bb8749fb90c7dd26b2b7157b.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0zZWUyNGRjYWNiMmMyOGJkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/4f1b7cdb1b3b45918bef5b3a3d7cd7e8.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi1mNGI1Y2U3OTA1ZDNkNzFlP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/6824b00119d34ff3ab4cc02315a6be71.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0zMDk1YzcyNTQyM2M0Nzg1P2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/463394ad1aba404c8a1eceeb113b702e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi01M2ZiMzVkNjBlM2M3YzJjP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/6c54b88f8bbd4b3abaff9e19f36e29cf.png
[Spring Boot_ID]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485856&idx=1&sn=c78caf01dbba47e9980b3d609a42a006&chksm=fe795878c90ed16ecfd670cc88e2b8952ec724cd94ff13114d88be36ad3790a357bd27332528&scene=21#wechat_redirect
[Spring Boot]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485329&idx=3&sn=905381dfd6fae780263b05a10c472c27&chksm=fe795649c90edf5fb3fae7f996980fa7446fa72dcdd210adcd905f8d830f960f2fa1544c3ee3&scene=21#wechat_redirect
[RabbitMQ_Confirm]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247485200&idx=2&sn=a577b258a93be9d90d039ec903937293&chksm=fe7956c8c90edfde516ebe7ccd9c3034f7f0d7245754f43a3a8a78b722f2eac117095223faba&scene=21#wechat_redirect
[RPC_MQ]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486746&idx=1&sn=b1d5fe39bea46c908019bcea2db2cd0a&chksm=fe795cc2c90ed5d412f8e245e8f8882ee26d96bc061f625b4c72378fcf45ceaae5ed00b7ac7d&scene=21#wechat_redirect
[URL]: http://mp.weixin.qq.com/s?__biz=MzU5NTAzNjM0Mw==&mid=2247486802&idx=2&sn=641a4fd34a38c1e917f8f381d95b77d3&chksm=fe795c8ac90ed59caf496505b1ba7e8a33bffa0d9abd18e393a33d0386bc616fb0906dad2676&scene=21#wechat_redirect
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDI2NjYwMi0yYzhhZmFhMjFlYjI3MGFkP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20211203/51bb33f917a84e4bb59d80d5559ed485.png