Springboor+websocket +vue 整合二（stompjs方式）

灰太狼 2024-04-03 12:54 40阅读 0赞

上一篇已经写了一个传统方式的websocket实现，在浏览过程看到也有使用stomp 方式 所以很想尝试一下  
**代码里面有详细使用的说明**

### 主要代码 ###

#### 后端代码 ####

##### 配置 #####

import org.springframework.context.annotation.Configuration;
    import org.springframework.messaging.simp.config.MessageBrokerRegistry;
    import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
    import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
    import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
    
    /**
     * @Author: lkz
     * @Title: WebSocketBrokerConfig
     * @Description: 另外一种方法
     * //@EnableWebSocketMessageBroker注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。
     * @Date: 2022/10/14 9:42
     * https://github.com/JustCoding-Hai/subtlechat-vue/wiki/3.%E4%BD%BF%E7%94%A8websocket%E5%AE%9E%E7%8E%B0%E7%BE%A4%E8%81%8A
     */
    @Configuration
    @EnableWebSocketMessageBroker
    public class WebSocketBrokerConfig implements WebSocketMessageBrokerConfigurer {
        
    
        /**
         * 配置消息代理，哪种路径的消息会进行代理处理
         * configureMessageBroker方法用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/topic
         * 作用：1.消息代理会处理前缀为“/topic”的消息
         *      2.客户端发送到服务端的消息需要带有“/app”前缀
         * @param registry
         * //在topic和user这两个域上服务端可以向客户端发消息 设置广播节点
         *         registry.enableSimpleBroker("/topic", "/user");
         *         //客户端向服务器端发送时的主题上面需要加"/app"作为前缀
         *         registry.setApplicationDestinationPrefixes("/app");
         *         //服务端给客户端指定用户发送一对一的主题，前缀是"/user"
         *         registry.setUserDestinationPrefix("/user");
         */
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) {
        
            //服务端发送消息将消息传入带有topic开头订阅的客户端 ，
            registry.enableSimpleBroker("/topic");
            // 客户端发送消息时 ，需要以app作为前缀
            registry.setApplicationDestinationPrefixes("/app"); //这个是客户端发消息时使用 ，作用不同于 registry.addEndpoint()
        }
    
        /**
         * 作用：注册STOMP协议的节点（端点），并指定映射的URL。
         * 将“/ws/websocket”注册为端点，客户端订阅消息或发送消息到目的地前要连接该端点
         * 添加这个Endpoint，这样在网页中就可以通过websocket连接上服务,也就是我们配置websocket的服务地址,并且可以指定是否使用socketjs
         * @param registry
         */
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
        
            //注册STOMP协议节点，同时指定使用SockJS协议。
            registry.addEndpoint("/wsWeb") // 确保客户端可以正常连接，同@ServerEndpoint("/ws")方式一样 如果有安全拦截 放行即可
                    .setAllowedOrigins("*") //处理跨域 单体需要打开 微服务如果在网关中配置了就不需要
                    .withSockJS();
        }
    
        /**
         * 上面以ws的消息都会被路由到带有@MessageMapping
         * 以topic的消息都会发送到STOMP代理中，给根据所选择的stomp代理不同，选择的前缀也有限制
         * 以user开头的消息会将消息重路由到某个用户独有的目的地上
         * 接收客户端发来的消息，参数就是消息本身message
         * @MessageMapping 或者 @SubscribeMapping 注解可以处理客户端发送过来的消息，并选择方法是否有返回值。
         * @MessageMapping 指定目的地是“/app/test”（“/app”前缀是隐含的，因为我们将其配置为应用的目的地前缀）。
         * 通信协议可以自定义——可自定义参数的格式
         * 可以接收json格式的数据,传递josn数据时不需要添加额外注解@Requestbody
         * 消息发送者不是从前端传递过来的，而是从springsecurity中获取的,防止前端冒充
         * 如果 @MessageMapping 注解的控制器方法有返回值的话，返回值会被发送到消息代理，只不过会添加上"/topic"前缀。
         * 通过为方法添加@SendTo注解，重载目的地
         *
         * @MessageMapping 用在@Controller注解的类中，根据目的地路由消息的方法
         *
         * @SendTo 自定义要将有效内容发送到的目标，一般用于广播消息
         *
         * @SendToUser 是仅向与消息关联的用户发送消息
         *
         */
    
    }

##### 控制层 #####

@Controller
    public class WebsocketController {
        
    
        @Resource
        private SimpMessagingTemplate simpMessagingTemplate;
    	
        @MessageMapping("/test")
        public void test(String message){
        
            System.out.println("接收到客户端发送来的消息:"+message);
            simpMessagingTemplate.convertAndSend("/topic/sub",message); // 前端订阅
    
        }
    
    
    }

##### 后端控制台 #####

![在这里插入图片描述][ce1ebb5fe58a48d3b3d688264c77fcc6.png]

#### 前端代码 ####

##### 首先vue需要安装依赖 stomp js 和sockjs依赖 ，我感觉只要安装stomp依赖即可 #####

npm install --save stompjs

##### 在需要使用的地方导入 #####

import SockJS from "sockjs-client";
    import Stomp from "stompjs";

主要业务代码

myInfo(){
        
    
           // this.initWebsocket();
            this.initStompSocket();
          },
          //websocket 相关开始
          // stomp方式
          initStompSocket(){
        
            //使用sockjs建立连接,并发起请求
           var stompClients= Stomp.over(new SockJS("http://localhost:8603"+"/wsWeb",null,{
        timeout: 15000}));
            this.stompClient=stompClients;
           // 连接成功回调 参考请求头填 待测试 https://www.cnblogs.com/wwxdxgb/p/16261720.html
           //  const headers={
        
           //    Authorization: ""
           //  }
          // 参考 方法 https://www.likecs.com/ask-2883310.html?sc=1800
            stompClients.connect({
        },success=>{
        
              //订阅服务端发送过来的消息  这里是广播
              console.log("连接成功")
              // 同下面的都可以发送，唯一不同的是 箭头函数指向当前对象,function,如果使用this指向的当前window ,调用下面的发送消息 会找不到方法 ，所以function函数的时候 我是用的是stompClients本身
              //stompClients.subscribe("/topic/sub",function (msg) { 
              this.stompClient.subscribe("/topic/sub", msg=> {
        
                console.log('成功订阅到消息:'+msg.body)
                //同时发送一条消息给服务端
               var token= getCookie("token");
                var st="订阅成功后发送的数据";
               // this.sendMsg(st) // 下面这两种方式都是往服务端发送消息 主要是测试使用 不然会一直发送消息，接收消息
                //stompClients.send("/app/test",{},JSON.stringify(st))
              });
              //点对点 一般用于发送指定用户 ，可以自行百度
              // this.stompClient.subscribe("/user",function (msg) {
        
              //   //this.stompClient.subscribe("/topic/sub", msg=> {
        
              //   console.log('成功订阅到消息:'+msg.body)
              //   //同时发送一条消息给服务端
              //   var token= getCookie("token");
              //   var st="订阅成功后发送的数据";
              //   // this.sendMsg(st)
              // })
    
            },fail=>{
        
              console.log("建立连接失败")
              //异常时重连
              // if(this.stompCount>10){
        
              //   console.log("温馨提示: 您的连接已经断开,请重新登录")
              //   this.stompCount=0;
              // }else{
        
              //   this.wsReconnect && clearTimeout(this.wsReconnect);
              //   this.wsReconnect = setTimeout(function () {
        
              //     console.log("开始重连...");
              //     this.initStompSocket();
              //     console.log("重连完毕...");
              //     this.stompCount++;
              //   }, 1000);
              // }
              this.stompClient.disconnect();
            })
    
    
    
          },
          //这里是方便调用 发送的消息转换格式发送 确保后端能收到信息
          sendMsg(data){
        
            this.stompClient.send("/app/test",{
        },JSON.stringify(data))
    
          },

##### 控制台打印结果 #####

![在这里插入图片描述][fe11f653bece4508b9add3b4c104a513.png]  
参考的博客：  
https://blog.csdn.net/u013041642/article/details/108154230  
https://fulongyuanjushi.blog.csdn.net/article/details/123970860  
https://blog.csdn.net/qq\_43581790/article/details/124791002

[ce1ebb5fe58a48d3b3d688264c77fcc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cccd61b34e2244b2bb383c25d6ab7e1c.png
[fe11f653bece4508b9add3b4c104a513.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/eb5d3be5e647499dbad1c0448a341250.png