SpringBoot、Websocket、Vue.js实现在线聊天

今天药忘吃喽~ 2022-10-05 05:50 246阅读 0赞

### SpringBoot、Websocket、Vue.js实现在线聊天 ###

*   *  写在前面
     *  1. 导入相关jar包
     *  2. 准备一些配置
     *   *  2.1. WebSocketConfig配置类
         *  2.2. 准备一个消息实体类
     *  3. 编写WebsocketService类
     *   *  3.1. 启动类配置
     *  4.前端Vue.js
     *   *  4.1. data中的一些数据
         *  4.2连接的方法
         *  4.3. 发送消息

## 写在前面 ##

在自己的一个demo中想要加一个在线聊天的功能，于是就看了一下Websocket相关的帖子，然后实现了简单的在线聊天功能。就在这里记录一下大概的过程，因为我也是看着别人的帖子实现的，所以可能对这个东西的理解还不够，如果下文中有描述不正确的，欢迎在评论区中指出来，谢谢！

## 1. 导入相关jar包 ##

<dependency>
    	<groupId>com.google.code.gson</groupId>
    	<artifactId>gson</artifactId>
    	<version>2.8.2</version>
    </dependency>
    
    <dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>

## 2. 准备一些配置 ##

### 2.1. WebSocketConfig配置类 ###

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /** * WebSocketConfig配置类，注入对象ServerEndpointExporter， * 这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint * @ServerEndpoint注解的作用大概和@Controller是一样的，用来接收websocket的请求 */
    @Configuration
    public class WebSocketConfig { 
        @Bean
        public ServerEndpointExporter serverEndpointExporter() { 
            return new ServerEndpointExporter();
        }
    }

### 2.2. 准备一个消息实体类 ###

这里可以根据自己前后端设置的消息格式而设置相关的属性。

import lombok.Data;
    /** *WebSocket消息类，即前端与后端传递消息的类 */
    @Data
    public class MsgVO { 
        //用户发送者ID fromUserId
        private String fromUserId;
    
        //用户接收者ID toUserID
        private String toUserID;
    
        //消息内容
        private String message;
    
        //消息时间
        private String messageDate;
    }

## 3. 编写WebsocketService类 ##

WebSocketService类作用相当于是一个Controller，用来处理前端Websocket的请求。关键的代码都在下面注释出来了。

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.fasterxml.jackson.databind.JsonMappingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.google.gson.Gson;
    import com.google.gson.JsonParseException;
    
    import org.springframework.context.ApplicationContext;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.*;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    //这里相当于是一个controller，前端就用
    //"ws://localhost:9999/websocket/" + userID + '/' + toUserID
    //一个url链接，就链接到后端这个ServerEndpoint被处理
    //这里参数可以随意设置为自己想传递过去的userID、toUserID两个参数
    
    @ServerEndpoint(value = "/websocket/{userID}/{toUserID}")
    @Component
    public class WebSocketService { 
    	//这里如果有要用这种自动注入的userService的话，是直接拿不到的
    	//需要进行下行的处理，同时还要在主启动类中添加一个配置。
    	//userService = applicationContext.getBean(UserService.class);
        @Autowired
        UserService userService;
    
        @Autowired
        MessageService messageService;
    
        private static ApplicationContext applicationContext;
    
    	//每个用户的userID和session
        private Long userID;
        private Session session;
    
        //用来存放每个客户端对应的MyWebSocket对象。
        private static CopyOnWriteArraySet<WebSocketService> webSocketSet = new CopyOnWriteArraySet<WebSocketService>();
        //与某个客户端的连接会话，需要通过它来给客户端发送数据
        //用来记录userID和该session进行绑定
        private static Map<String, Session> map = new HashMap<String, Session>();
    
    	//解决本类即WebSocketService类中获取不到applicationContext对象
        public static void setApplicationContext(ApplicationContext applicationContext) { 
            WebSocketService.applicationContext = applicationContext;
        }
    
        /** * 连接建立成功调用的方法 * Session session这个参数不需要用自己传，可以理解为请求中自带的。 */
        @OnOpen
        public void onOpen(Session session, @PathParam("userID") Long userID) { 
        	//设置链接成功之后返回给前端的信息，这里简单的设置了一个返回在线人数
            Map<String, Object> message = new HashMap<String, Object>();
            //赋值给本类的session 和userID 两个属性
            this.session = session;
            this.userID = userID;
    		
    		//将这个用户的session放入总体的map集合中。并用他的userID作为键。
            map.put(userID.toString(), session);
            //将这个用户的webSocketSet对象放入总体的webSocketSet集合中
            webSocketSet.add(this);//加入set中
            message.put("people", webSocketSet.size()); //在线人数
            //通过这个用户的session发送消息给这个用户的前端。
            //new Gson().toJson(message)是将对象转化为JSON字符串。
            this.session.getAsyncRemote().sendText(new Gson().toJson(message));
        }
    
        /** * 连接关闭调用的方法 */
        @OnClose
        public void onClose() { 
        	//webSocketSet集合中去除掉这个用户的webSocketSet对象。
            webSocketSet.remove(this);
            System.out.println("有一连接关闭！当前在线人数为" + webSocketSet.size());
        }
    
        /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 * userID和toUserID是从@ServerEndpoint(value = "/websocket/{userID}/{toUserID}")这里获取的。 */
        @OnMessage
        public void onMessage(String message,
                              @PathParam("userID") Long userID,
                              @PathParam("toUserID") Long toUserID) { 
    
            //从客户端传过来的数据是json数据，所以这里使用jackson进行转换为SocketMsg对象，
            ObjectMapper objectMapper = new ObjectMapper();
            MsgVO msgVO;
            //获取到userService、messageService对象方便后续对数据库的操作。
            userService = applicationContext.getBean(UserService.class);
            messageService = applicationContext.getBean(MessageService.class);
            try { 
            	//将前端传过来的JSON字符串解析为一个对象
                msgVO = objectMapper.readValue(message, MsgVO.class);
    
    			//从map中获取对应的用户的Session对象fromSession 代表发送者
                Session fromSession = map.get(msgVO.getFromUserId());
                //获取接收者的session
                Session toSession = map.get(msgVO.getToUserID());
    
                //封装消息存入数据库，这里可以进行自己的数据库存储，将msgVO转化为自己数据库的实体对象进行存储。
                Message mess = new Message();
                messageService.save(mess);
    			
    			//将这条消息发送给发送者，进行回显
                fromSession.getAsyncRemote().sendText(new Gson().toJson(msgVO));
    
                //接受者在线就发送给接受者.
                if (toSession != null) { 
                    //发送给接受者
                    toSession.getAsyncRemote().sendText(new Gson().toJson(msgVO));
                } else { 
                    //发送给发送者.如果不发送会报错
                    fromSession.getAsyncRemote().sendText("对方不在线");
                }
            } catch (JsonParseException e) { 
                e.printStackTrace();
            } catch (JsonMappingException e) { 
                e.printStackTrace();
            } catch (IOException e) { 
                e.printStackTrace();
            }
        }
    
        /** * 发生错误时调用 */
        @OnError
        public void onError(Session session, Throwable error) { 
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
    }

### 3.1. 启动类配置 ###

为了让WebSocketService类中能够注入applicationContext对象，需要修改主启动类。

@SpringBootApplication
    public class GraprojectApplication { 
        public static void main(String[] args) { 
            SpringApplication springApplication = new SpringApplication(XXX.class);
            ConfigurableApplicationContext configurableApplicationContext = springApplication.run(args);
            //解决WebSocket不能注入的问题
            WebSocketService.setApplicationContext(configurableApplicationContext);
        }
    }

## 4.前端Vue.js ##

页面就不写了，主要就是将收到的消息push到需要展示的消息数组中就行。随便画个div然后判断一下是对方发的还是自己发的，然后在左边和右边展示数据就行。

### 4.1. data中的一些数据 ###

//封装消息实体的，chatMessage就是一条消息
    	chatMessage: { 
            fromUserId: this.$store.getters.getUserID,
            toUserID: '',
            message: '',
            messageDate: ''
          },
        //存储聊天记录的，里面存放很多个chatMessage消息
    	userMessage: [
            chatMessage,
            chatMessage,
            chatMessage
          ], 
        //websocket对象，用来连接和发送消息的
        websocket: null

### 4.2连接的方法 ###

这个可以放在你的组件的create中，也可以放在一个按钮触发的事件中，总之这个方法就是可以进行链接了，具体什么时候链接，看需求而定。

conectWebSocket() { 
    	  //这个window应该指的是整个页面
          if ("WebSocket" in window) { 
          //进行后端对应的url连接，使用的ws协议
          //this.$store.getters.getUserID和this.currentChatUserID都是我自己写的参数
            this.websocket = new WebSocket(
                "ws://localhost:8080/websocket/" + this.$store.getters.getUserID + '/' + this.currentChatUserID
            );
          } else { 
            alert("不支持建立socket连接");
          }
          //连接发生错误的回调方法
          this.websocket.onerror = function () { 
    
          };
          //连接成功建立的回调方法
          this.websocket.onopen = function (event) { 
    
          };
          //接收到消息的回调方法
          let that = this;
          this.websocket.onmessage = function (event) { 
            //将json字符串转换为json对象
            let object = eval("(" + event.data + ")");
            //判断一下是不是我发给目标用户，或者目标用户发给我的
            if ((object.toUserID == that.$store.getters.getUserID && object.fromUserId == that.currentChatUserID)
                || (object.toUserID == that.currentChatUserID && object.fromUserId == that.$store.getters.getUserID)) { 
              that.userMessage.push(object);
            }
          };
          //连接关闭的回调方法
          this.websocket.onclose = function () { 
          };
          //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
          window.onbeforeunload = function () { 
            this.websocket.close();
          };
          //窗口刷新
          window.onbeforeunload = function (event) { 
            this.websocket.close();
          };
        },

### 4.3. 发送消息 ###

//直接使用this.websocket.send方法就可以发送消息给后端了.
    //发送前先转换为JSON字符串.
    sendMessage() { 
          this.websocket.send(JSON.stringify(this.chatMessage));
        }