Springboot+Vue+websocket整合及遇到问题解决

Bertha 。 2024-04-03 12:09 92阅读 0赞

### 出现的问题 ###

1.websocket 不能注入redisTemplate 问题？  
2. 注入注解使用问题？  
3. 前后端分离 传输的参数格式问题？

#### 项目主要代码 ####

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

###### 依赖 ######

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

###### websocket配置 ######

@Configuration
    @EnableWebSocket //开启支持websocket
    public class WebSocketConfig {
        
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
        
            return new ServerEndpointExporter();
        }
    
    }

package com.moxi.mogublog.web.websocket;
    
    
    
    
    
    import com.alibaba.fastjson.JSON;
    import com.moxi.mogublog.utils.*;
    import com.moxi.mogublog.web.global.RedisConf;
    import com.moxi.mogublog.web.global.SysConf;
    import com.moxi.mougblog.base.global.Constants;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.data.redis.core.StringRedisTemplate;
    import org.springframework.stereotype.Component;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import javax.annotation.Resource;
    import javax.websocket.*;
    
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.concurrent.ConcurrentHashMap;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    
    /**
     * @Author: lkz
     * @Title: WebSocketServer
     * @Description: TODO
     * @Date: 2022/10/11 23:10
     */
    @ServerEndpoint("/ws/websocket/{token}")
    @Component  // 该注解只能放@ServerEndpoint下面 否则会注册失败
    @Slf4j
    public class WebSocketServer {
        
    	/**
    	** websocket不能注入问题，通过工具类获取，网上资料说在项目启动的时候 依赖加载优先级的问题 
    	还有的说websocket本身不支持注入 
    	**/
        @Resource
        private StringRedisTemplate stringRedisTemplate=SpringBeanUtils.getBean("stringRedisTemplate");
    
    
        private static Map<String,Session> sessionPool = new HashMap<>();
        private String userId;
        /**静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/
        private static int onlineCount = 0;
        /**concurrent包的线程安全Set，用来存放每个客户端对应的WebSocket对象。*/
        private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
        /**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
        private Session session;
    
        /**
         * 打开新的连接
         * 这里转token 我是为了根据token获取用户信息 貌似只能通过这种路径的方式传参
         */
        @OnOpen
        public void onOpen(Session session,@PathParam("token") String token) {
        
            try {
        
                if(StringUtils.isNotEmpty(token)){
        
                    String userInfo=  stringRedisTemplate.opsForValue().get(RedisConf.USER_TOKEN + Constants.SYMBOL_COLON + token);
                    Map<String, Object> map = JsonUtils.jsonToMap(userInfo);
                    String uid  = (String)map.get(SysConf.UID);
                    this.userId=uid;
                    this.session = session;
                    if(webSocketMap.containsKey(userId)){
        
                        webSocketMap.remove(userId); //至于这里为什么这样每次都删除 ，如果每次都是直接添加的话，map中的数量好像一直在增加
                        webSocketMap.put(userId,this);
                    }else{
        
                        webSocketMap.put(userId,this);
                        sessionPool.put(token, session);
                        addOnlineCount();
                    }
                    System.out.println("【websocket消息】有新的连接，总数为:"+webSocketMap.size());
                    /**
                    *发送的消息 我这里是转换了json个格式 这样前端 可以通过JSON.parse(res.data)获取 否则会出错，或者其他方式,
                    */
                    this.sendAllMessage(JSON.toJSONString("恭喜您上线")); 
                }
            }catch (Exception e){
        
                this.onClose();
            }
    
        }
    
        @OnClose
        public void onClose() {
        
            webSocketMap.remove(this);
            System.out.println("【websocket消息】连接断开，总数为:"+webSocketMap.size());
        }
    
        @OnMessage
        public void onMessage(String message) {
        
            System.out.println("【websocket消息】收到客户端消息:"+message);
    
            this.sendAllMessage(JSON.toJSONString(message));
        }
    
        // 此为广播消息
        public void sendAllMessage(String message) {
        
    
            for(WebSocketServer webSocket : webSocketMap.values()) {
        
                // System.out.println("群发   【websocket消息】广播消息:"+message);
                try {
        
                    webSocket.session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
        
                    e.printStackTrace();
                }
            }
        }
    
        // 此为单点消息
        public void sendOneMessage(String code, String message) {
        
            Session session = sessionPool.get(code);
            // System.out.println("单点消息  【websocket消息】 唯一标识" +code);
            // 在发送数据之前先确认 session是否已经打开 使用session.isOpen() 为true 则发送消息
            if (session != null && session.isOpen()) {
        
                try {
        
                    // System.out.println("单点消息  【websocket消息】广播消息:" + message);
                    session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
        
                    e.printStackTrace();
                }
            }
        }
    
        /**
         * 获得此时的
         * 在线人数
         * @return
         */
        public static synchronized int getOnlineCount() {
        
            return onlineCount;
        }
    
        /**
         * 在线人
         * 数加1
         */
        public static synchronized void addOnlineCount() {
        
            WebSocketServer.onlineCount++;
        }
    
        /**
         * 在线人
         * 数减1
         */
        public static synchronized void subOnlineCount() {
        
            WebSocketServer.onlineCount--;
        }
    
    }

###### 获取bean工具类， ######

可以通过getBean的方式获取，解决无法注入问题

@Repository
    public class SpringBeanUtils implements BeanFactoryPostProcessor {
        
    
    
        //Spring应用上下文环境
        private static ConfigurableListableBeanFactory beanFactory;
    
        @Override
        public void postProcessBeanFactory(ConfigurableListableBeanFactory beanFactory) throws BeansException {
        
            SpringBeanUtils.beanFactory = beanFactory;
        }
    
        public static ConfigurableListableBeanFactory getBeanFactory() {
        
            return beanFactory;
        }
    
        /**
         * 获取对象
         *
         * @param name
         * @return Object 一个以所给名字注册的bean的实例
         * @throws org.springframework.beans.BeansException
         *
         */
        @SuppressWarnings("unchecked")
        public static <T> T getBean(String name) throws BeansException {
        
            return (T) getBeanFactory().getBean(name);
        }
    
        /**
         * 获取类型为requiredType的对象
         *
         * @param clz
         * @return
         * @throws org.springframework.beans.BeansException
         *
         */
        public static <T> T getBean(Class<T> clz) throws BeansException {
        
            T result = (T) getBeanFactory().getBean(clz);
            return result;
        }
    
        /**
         * 如果BeanFactory包含一个与所给名称匹配的bean定义，则返回true
         *
         * @param name
         * @return boolean
         */
        public static boolean containsBean(String name) {
        
            return getBeanFactory().containsBean(name);
        }
    
        /**
         * 判断以给定名字注册的bean定义是一个singleton还是一个prototype。 如果与给定名字相应的bean定义没有被找到，将会抛出一个异常（NoSuchBeanDefinitionException）
         *
         * @param name
         * @return boolean
         * @throws org.springframework.beans.factory.NoSuchBeanDefinitionException
         *
         */
        public static boolean isSingleton(String name) throws NoSuchBeanDefinitionException {
        
            return getBeanFactory().isSingleton(name);
        }
    
        /**
         * @param name
         * @return Class 注册对象的类型
         * @throws org.springframework.beans.factory.NoSuchBeanDefinitionException
         *
         */
        public static Class<?> getType(String name) throws NoSuchBeanDefinitionException {
        
            return getBeanFactory().getType(name);
        }
    
        /**
         * 如果给定的bean名字在bean定义中有别名，则返回这些别名
         *
         * @param name
         * @return
         * @throws org.springframework.beans.factory.NoSuchBeanDefinitionException
         *
         */
        public static String[] getAliases(String name) throws NoSuchBeanDefinitionException {
        
            return getBeanFactory().getAliases(name);
        }
    }

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

//websocket 相关开始
    	//我这里是根据点击事件触发
          initWebsocket(){
        
            if ('WebSocket' in window) {
        
    
              var token=getCookie("token");
      
              this.websocket = new WebSocket('ws://localhost:8607/mogu-web/ws/websocket/'+token);
              this.websocket.onmessage = this.websocketOnMessage
              this.websocket.onerror = this.websocketOnerror
              this.websocket.onopen = this.websocketOnopen
              this.websocket.onclose = this.websocketClose
    
              // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
              window.onbeforeunload = this.onbeforeunload
    
            } else {
        
              alert('当前浏览器不支持WebSocket!!!')
            }
    
          },
          websocketOnopen(){
        
            //链接建立之后执行send方法发送数据
            console.log("websocket连接成功")
          },
          websocketOnerror(){
        
            console.log("websocket连接失败")
          },
          websocketOnMessage(res){
        
            //数据接收 建议数据格式未json
           var date= JSON.parse(res.data);
            console.log("数据接收:"+date)
          },
          //客户端发送数据给前端
          websocketSend(data){
        
            this.websocket.send(data);
          },
          websocketClose(){
        
            console.log("websocket关闭")
          },
    
          onbeforeunload() {
        
            this.closeWebSocket()
          },
          closeWebSocket() {
        
            this.websocket.close()
          },
          //websocket 相关结束

### Vue控制台 ###

![在这里插入图片描述][9eedf5202a5e4ad2a01e27530d4f57ab.png]  
![在这里插入图片描述][83268fa8480a4f88ad21c8a0db8c9388.png]

### Web测试页面 ###

websocket在线工具测试 ：http://websocket.jsonin.com/?[添加链接描述][Link 1]  
不同的浏览器 --浏览器一  
![在这里插入图片描述][ec763413a9ec4762b292c6b8bec2cf60.png]  
浏览器二；  
![在这里插入图片描述][4144bd996c4a462d89888d9b3477fdb2.png]

[9eedf5202a5e4ad2a01e27530d4f57ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0080215bd124415eaacab6cdfed0fe0d.png
[83268fa8480a4f88ad21c8a0db8c9388.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/911c2d2be1284488aa086aa6e8f0a949.png
[Link 1]: http://websocket.jsonin.com/?
[ec763413a9ec4762b292c6b8bec2cf60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7b60bed036e548679f39824ac3f66703.png
[4144bd996c4a462d89888d9b3477fdb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/98e24eb872294d859ae080669a9e38eb.png