SpringBoot和Vue2集成WebSocket，实现聊天室功能

忘是亡心i 2024-03-22 09:59 108阅读 0赞

## SpringBoot和Vue2集成WebSocket，实现聊天室功能 ##

1.加入依赖
    2.后端建立socket服务端
    3.前端建立客户端

### 后端 ###

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
            </dependency>
    		<dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.76</version>
            </dependency>

// 配置开启WebSocket
    @Configuration
    public class WebSocketConfig {
        
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
        
            return new ServerEndpointExporter();
        }
    
    }

/**
     * @author websocket服务
     */
    @ServerEndpoint(value = "/imserver/{userId}")
    @Component
    public class WebSocketServer {
        
    
    
        private static UserService userService;
    
        private static RedisTemplate redisTemplate;
    
        public static void setUserService(ApplicationContext context){
        
            userService = context.getBean(UserServiceImpl.class);
            redisTemplate = (RedisTemplate) context.getBean("redisTemplate");
        }
    
    
        private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
        /**
         * 记录当前在线连接数
         */
        public static final Map<String, Session> sessionMap = new ConcurrentHashMap<>();
        /**
         * 连接建立成功调用的方法
         */
        // 当前用户
        private UserVo userVo;
        // 连接上服务端触发的方法
        @OnOpen
        public void onOpen(Session session, @PathParam("userId") String userId) {
        
            if (StringUtils.hasText(userId)){
        
                // 加入新用户
                if (sessionMap.containsKey(userId)){
        
                    sessionMap.remove(userId);
                }
                sessionMap.put(userId, session);
                this.userVo = userService.findById(Long.valueOf(userId));
                // 统计所有在线用户
                List<UserVo> list = new LinkedList<>();
                sessionMap.forEach((userId1,session1) -> {
        
                    UserVo userVo = userService.findById(Long.valueOf(userId1));
                    list.add(userVo);
                });
                try {
        
                    // 发送给所有在线的用户,更新在线人数
                    sendAllMessage(JSON.toJSONString(list));
                } catch (Exception e) {
        
                    e.printStackTrace();
                }
                log.info("有新用户加入，userId={}, 当前在线人数为：{}", userId, sessionMap.size());
            }
    
        }
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose(Session session, @PathParam("userId") String userId) {
        
            sessionMap.remove(userId);
            // 统计所有在线用户
            List<UserVo> list = new LinkedList<>();
            sessionMap.forEach((userId1,session1) -> {
        
                UserVo userVo = userService.findById(Long.valueOf(userId1));
                list.add(userVo);
            });
            sendAllMessage(JSON.toJSONString(list));
            log.info("有一连接关闭，移除userId={}的用户session, 当前在线人数为：{}", userId, sessionMap.size());
        }
        /**
         * 收到客户端消息后调用的方法
         * 后台收到客户端发送过来的消息
         * onMessage 是一个消息的中转站
         * 接受 浏览器端 socket.send 发送过来的 json数据
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session, @PathParam("userId") String userId) {
        
            userVo = userService.findById(Long.valueOf(userId));
            log.info("服务端收到用户username={},id={}的消息:{}", userVo.getNickname(),userId, message);
            // 解析消息
            JSONObject jsonObject1 = JSON.parseObject(message);
            String toUserId = jsonObject1.getString("toUserId");
            String text = jsonObject1.getString("text");
            // 判断是给指定人发,还是群发
            if (StringUtils.hasText(toUserId)){
        
                // {"to": "admin", "text": "聊天文本"}
                Session toSession = sessionMap.get(toUserId); // 根据 to用户名来获取 session，再通过session发送消息文本
                if (toSession != null) {
        
                    // 服务器端 再把消息组装一下，组装后的消息包含发送人和发送的文本内容
                    // {"from": "zhang", "text": "hello"}
                    JSONObject jsonObject = new JSONObject();
                    jsonObject.put("fromUser",userVo);
                    jsonObject.put("toUser",userService.findById(Long.valueOf(toUserId)));
                    jsonObject.put("text",text);
                    this.sendMessage(jsonObject.toJSONString(), toSession);
                    log.info("发送给用户userId={}，消息：{}", toUserId, jsonObject.toJSONString());
                } else {
        
                    log.info("发送失败，未找到用户username={}的session", toUserId);
                }
            }else{
        
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("fromUser",userVo);
                jsonObject.put("text",text);
                this.sendAllMessage(jsonObject.toJSONString());
                // 将消息存入redis
                redisTemplate.opsForList().rightPush("messageList",jsonObject.toJSONString());
                redisTemplate.expire("messageList",60*60, TimeUnit.SECONDS); // 过期时间
    
                log.info("发送给所有用户，消息：{}", toUserId, jsonObject.toJSONString());
    
            }
        }
        @OnError
        public void onError(Session session, Throwable error) {
        
            log.error("发生错误");
            error.printStackTrace();
        }
        /**
         * 服务端发送消息给客户端
         */
        private void sendMessage(String message, Session toSession) {
        
            try {
        
                log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
                toSession.getBasicRemote().sendText(message);
            } catch (Exception e) {
        
                log.error("服务端发送消息给客户端失败", e);
            }
        }
        /**
         * 服务端发送消息给所有客户端
         */
        private void sendAllMessage(String message) {
        
            try {
        
                for (Session session : sessionMap.values()) {
        
                    log.info("服务端给客户端[{}]发送消息{}", session.getId(), message);
                    session.getBasicRemote().sendText(message);
    
                }
            } catch (Exception e) {
        
                log.error("服务端发送消息给客户端失败", e);
            }
        }
    }
    
    // WebSocket服务类无法进行bean的注入,所以要自己调用ApplicationContext获取bean再注入
    
    @SpringBootApplication
    public class BlogApplication {
        
    
        public static void main(String[] args) {
        
            ConfigurableApplicationContext applicationContext = SpringApplication.run(BlogApplication.class, args);
            WebSocketServer.setUserService(applicationContext);
        }
    }

### 前端 ###

<template>
      <div class="socket">
        <el-row>
          <el-col :span="6" class="online">
              <h3 style="background:linear-gradient(to left,#cae9ff,#c7d8ff);text-align:center;padding:5px;">在线用户</h3>
              <el-scrollbar style="height:280px">
              <div v-for="user in onlineUser" :key="user.id" style="padding:5px" class="onlineUser">
                <el-avatar shape="square" size="medium" :src="user.avatar"></el-avatar>
                <span style="margin-left:8px">{
       {user.account}}</span>
              </div>
              </el-scrollbar>
          </el-col>
          <el-col :span="17" class="container">
              <h3 style="background:linear-gradient(to left,#cae9ff,#c7d8ff);text-align:center;padding:5px;">当前用户(<span style="color:#66b1ff">{
       {user.account}}</span>)</h3>
              <el-scrollbar style="height:420px" ref="scroll">
              <div class="content">
                <div class="message" v-for="item,index in messageList" :key="index" style="margin-top:5px;margin-left:5px;position:relative" :style="{justifyContent: item.fromUser.id == user.id ? 'flex-end' : 'flex-start'}">
                  <el-avatar shape="square" size="medium" :src="item.fromUser.avatar" :style="{order:user.id == item.fromUser.id ? '1':'0'}"></el-avatar>
                  <span style="margin-left:8px;" class="text">{
       {item.text}}</span>
                </div>
              </div>
              </el-scrollbar>
              <div style="margin-top: 15px;" class="write">
                <el-input placeholder="请输入内容" maxlength="100" clearable v-model="text" class="input-with-select">
                  <el-button slot="append" type="primary" @click="sendMessage">发送</el-button>
                </el-input>
              </div>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
      import config from '@/utils/config'
      import {getCacheMessage} from '@/api/socket'
      import {mapState} from 'vuex'
      export default {
        name:'lm',
        data(){
          return {
            text:'',
            onlineUser:[],
            messageList:[],
            socket:'',
            baseUrl:config.socketUrl     
          }
        },
        computed:{
          ...mapState(['user'])
        },
        methods:{
          // 连接socket
          onOpen(){
            if (typeof WebSocket == 'undefined'){
              console.log('你的浏览器不支持webSocket')
              return;
            }
            const url = this.baseUrl+this.user.id
            
            this.socket = new WebSocket(url);
    
            this.socket.onopen = ()=>{
              console.log('websocket打开了,'+this.user.id+'连接成功')
            }
            this.socket.onmessage = (data)=>{
              var message = JSON.parse(data.data)
              if(message.hasOwnProperty("text")){
                this.messageList.push(message)
                this.text = ''
                let scroll = this.$refs['scroll'].$refs['wrap']
                this.$nextTick(() =>{
                  scroll.scrollTop = scroll.scrollHeight
                })
              }else{
                // 统计在线人数
                this.onlineUser = message
                
              }
            }
            this.socket.onclose = function(){
              console.log('断开连接成功')
            }
          },
          sendMessage(){
            const message = {
              text:this.text,
              userId:this.user.id
            }
            if(this.text == ''||this.text == null){
              this.$message.warning('请输入内容')
            }else{
              this.socket.send(JSON.stringify(message))
            }
          },
          // 初始化,缓存的消息
          getCacheMessage(){
            getCacheMessage().then(
              res => {
                const data = res.data
                for(var i in data){
                  this.messageList.push(JSON.parse(data[i]))
                }
              }
            )
          }
        },
        mounted(){
          this.getCacheMessage()
          this.onOpen()
        },
        beforeDestroy(){
          this.socket.close() // 关闭socket
        }
    
      }
    </script>
    
    <style scoped>
      .socket{
        width: 1200px;
        height: 600px;
        padding:26px;
        background-color: #fff;
        border-radius: 5px;
      }
      .socket .online{
        background-color: #f5f5f5;
        height: 300px;
        border-radius: 5px;
        overflow: hidden;
      }
      .socket .online .onlineUser{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;  
      }
      .socket .container{
        position: relative;
        margin-left: 26px;
        background-color: #f5f5f5;
        height: 500px;
        border-radius: 5px;
      }
      .socket .el-button--primary{
        background-color: #66b1ff;
        color: #fff;
      }
      .socket .container .content{
        min-height: 400px;
        border: 1px solid #d6d6d6;
        border-radius: 4px;
      }
      .socket .container .content .message{
        display: flex;
        align-content: flex-start;
      }
      .socket .write{
        position:absolute;
        bottom: 10px;
        width: 500px;
        right: 50%;
        transform: translateX(50%);
      }
    
      .socket .text{
        min-height: 24px;
        line-height: 20px;
        padding: 8px;
        font-size: 16px;
        background-color: #fff;
        border-radius: 5px;
        max-width: 280px;
        overflow-wrap:break-word;
        word-wrap:break-word;
        word-break: bread-all;
        white-space:pre-wrap;
        overflow: hidden;
      }
    </style>

> springboot集成websocket实现聊天室的功能。如有不足之处，还望大家斧正。