devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot websocket_SpringBoot+Vue+WebSocket 实现在线聊天

作者：羊村懒王 | 2024-05-06 09:10:09

赞

踩

spring boot + vue 集成 websocket 在线聊天

ae5a76e4555156ddc467a94e3c6d2bb3.png

一、前言

本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能

页面如下:

8644076f5426d11da2a92f7be5612633.png

在线体验地址：http://www.zhengqingya.com:8101

二、SpringBoot + Vue + WebSocket 实现在线聊天

1、引入websocket依赖

  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-websocket</artifactId>
  4. </dependency>

2、websocket 配置类

  1. @Configuration
  2. public class WebSocketConfig {
  3.     @Bean
  4.     public ServerEndpointExporter serverEndpointExporter() {
  5.         return new ServerEndpointExporter();
  6.     }
  7. }

3、websocket 处理类Controller

  1. @Slf4j
  2. @Component
  3. @ServerEndpoint("/groupChat/{sid}/{userId}")
  4. public class WebSocketServerController {
  5.  
  6.     /**
  7.      * 房间号 -> 组成员信息
  8.      */
  9.     private static ConcurrentHashMap<String, List<Session>> groupMemberInfoMap = new ConcurrentHashMap<>();
  10.     /**
  11.      * 房间号 -> 在线人数
  12.      */
  13.     private static ConcurrentHashMap<String, Set<Integer>> onlineUserMap = new ConcurrentHashMap<>();
  15.     /**
  16.      * 收到消息调用的方法，群成员发送消息
  17.      *
  18.      * @param sid:房间号
  19.      * @param userId：用户id
  20.      * @param message：发送消息
  21.      */
  22.     @OnMessage
  23.     public void onMessage(@PathParam("sid") String sid, @PathParam("userId") Integer userId, String message) {
  24.         List<Session> sessionList = groupMemberInfoMap.get(sid);
  25.         Set<Integer> onlineUserList = onlineUserMap.get(sid);
  26.         // 先一个群组内的成员发送消息
  27.         sessionList.forEach(item -> {
  28.             try {
  29.                 // json字符串转对象
  30.                 MsgVO msg = JSONObject.parseObject(message, MsgVO.class);
  31.                 msg.setCount(onlineUserList.size());
  32.                 // json对象转字符串
  33.                 String text = JSONObject.toJSONString(msg);
  34.                 item.getBasicRemote().sendText(text);
  35.             } catch (IOException e) {
  36.                 e.printStackTrace();
  37.             }
  38.         });
  39.     }
  40.  
  41.     /**
  42.      * 建立连接调用的方法，群成员加入
  43.      *
  44.      * @param session
  45.      * @param sid
  46.      */
  47.     @OnOpen
  48.     public void onOpen(Session session, @PathParam("sid") String sid, @PathParam("userId") Integer userId) {
  49.         List<Session> sessionList = groupMemberInfoMap.computeIfAbsent(sid, k -> new ArrayList<>());
  50.         Set<Integer> onlineUserList = onlineUserMap.computeIfAbsent(sid, k -> new HashSet<>());
  51.         onlineUserList.add(userId);
  52.         sessionList.add(session);
  53.         // 发送上线通知
  54.         sendInfo(sid, userId, onlineUserList.size(), "上线了~");
  55.     }
  56.  
  57.  
  58.     public void sendInfo(String sid, Integer userId, Integer onlineSum, String info) {
  59.         // 获取该连接用户信息
  60.         User currentUser = ApplicationContextUtil.getApplicationContext().getBean(UserMapper.class).selectById(userId);
  61.         // 发送通知
  62.         MsgVO msg = new MsgVO();
  63.         msg.setCount(onlineSum);
  64.         msg.setUserId(userId);
  65.         msg.setAvatar(currentUser.getAvatar());
  66.         msg.setMsg(currentUser.getNickName() + info);
  67.         // json对象转字符串
  68.         String text = JSONObject.toJSONString(msg);
  69.         onMessage(sid, userId, text);
  70.     }
  71.  
  72.     /**
  73.      * 关闭连接调用的方法，群成员退出
  74.      *
  75.      * @param session
  76.      * @param sid
  77.      */
  78.     @OnClose
  79.     public void onClose(Session session, @PathParam("sid") String sid, @PathParam("userId") Integer userId) {
  80.         List<Session> sessionList = groupMemberInfoMap.get(sid);
  81.         sessionList.remove(session);
  82.         Set<Integer> onlineUserList = onlineUserMap.get(sid);
  83.         onlineUserList.remove(userId);
  84.         // 发送离线通知
  85.         sendInfo(sid, userId, onlineUserList.size(), "下线了~");
  86.     }
  87.  
  88.     /**
  89.      * 传输消息错误调用的方法
  90.      *
  91.      * @param error
  92.      */
  93.     @OnError
  94.     public void OnError(Throwable error) {
  95.         log.info("Connection error");
  96.     }
  97. }

4、websocket 消息显示类

  1. @Data
  2. @ApiModel(description = "websocket消息内容")
  3. public class MsgVO {
  4.  
  5.     @ApiModelProperty(value = "用户id")
  6.     private Integer userId;
  7.  
  8.     @ApiModelProperty(value = "用户名")
  9.     private String username;
  10.  
  11.     @ApiModelProperty(value = "用户头像")
  12.     private String avatar;
  13.  
  14.     @ApiModelProperty(value = "消息")
  15.     private String msg;
  16.  
  17.     @ApiModelProperty(value = "在线人数")
  18.     private int count;
  19.  
  20. }

5、前端页面

温馨小提示：当用户登录成功之后，可以发起websocket连接，存在store中...

下面只是单页面的简单实现

  1. <template>
  2.   <div class="chat-box">
  3.     <header>聊天室 (在线:{{count}}人)</header>
  4.     <div class="msg-box" ref="msg-box">
  5.       <div
  6.         v-for="(i,index) in list"
  7.         :key="index"
  8.         class="msg"
  9.         :style="i.userId == userId?'flex-direction:row-reverse':''"
  10.       >
  11.         <div class="user-head">
  12.           <img :src="i.avatar" height="30" width="30" :title="i.username">
  13.         </div>
  14.         <div class="user-msg">
  15.           <span :style="i.userId == userId?' float: right;':''" :class="i.userId == userId?'right':'left'">{{i.content}}</span>
  16.         </div>
  17.       </div>
  18.     </div>
  19.     <div class="input-box">
  20.       <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" />
  21.       <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div>
  22.     </div>
  23.   </div>
  24. </template>
  25.  
  26. <script>
  27.   export default {
  28.     data() {
  29.       return {
  30.         ws: null,
  31.         count: 0,
  32.         userId: this.$store.getters.id, // 当前用户ID
  33.         username: this.$store.getters.name, // 当前用户昵称
  34.         avatar: this.$store.getters.avatar, // 当前用户头像
  35.         list: [], // 聊天记录的数组
  36.         contentText: "" // input输入的值
  37.       };
  38.     },
  39.     mounted() {
  40.       this.initWebSocket();
  41.     },
  42.     destroyed() {
  43.       // 离开页面时关闭websocket连接
  44.       this.ws.onclose(undefined);
  45.     },
  46.     methods: {
  47.       // 发送聊天信息
  48.       sendText() {
  49.         let _this = this;
  50.         _this.$refs["sendMsg"].focus();
  51.         if (!_this.contentText) {
  52.           return;
  53.         }
  54.         let params = {
  55.           userId: _this.userId,
  56.           username: _this.username,
  57.           avatar: _this.avatar,
  58.           msg: _this.contentText,
  59.           count: _this.count
  60.         };
  61.         _this.ws.send(JSON.stringify(params)); //调用WebSocket send()发送信息的方法
  62.         _this.contentText = "";
  63.         setTimeout(() => {
  64.           _this.scrollBottm();
  65.         }, 500);
  66.       },
  67.       // 进入页面创建websocket连接
  68.       initWebSocket() {
  69.         let _this = this;
  70.         // 判断页面有没有存在websocket连接
  71.         if (window.WebSocket) {
  72.           var serverHot =  window.location.hostname;
  73.           let sip = '房间号'
  74.           // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
  75.           var url = 'ws://' + serverHot + ':9101' + '/groupChat/' + sip + '/' + this.userId; // `ws://127.0.0.1/9101/groupChat/10086/聊天室`
  76.           let ws = new WebSocket(url);
  77.           _this.ws = ws;
  78.           ws.onopen = function(e) {
  79.             console.log("服务器连接成功: " + url);
  80.           };
  81.           ws.onclose = function(e) {
  82.             console.log("服务器连接关闭: " + url);
  83.           };
  84.           ws.onerror = function() {
  85.             console.log("服务器连接出错: " + url);
  86.           };
  87.           ws.onmessage = function(e) {
  88.             //接收服务器返回的数据
  89.             let resData = JSON.parse(e.data)
  90.             _this.count = resData.count;
  91.             _this.list = [
  92.               ..._this.list,
  93.               { userId: resData.userId, username: resData.username, avatar: resData.avatar, content: resData.msg }
  94.             ];
  95.           };
  96.         }
  97.       },
  98.       // 滚动条到底部
  99.       scrollBottm() {
  100.           let el = this.$refs["msg-box"];
  101.           el.scrollTop = el.scrollHeight;
  102.       }
  103.     }
  104.   };
  105. </script>
  106.  
  107. <style lang="scss" scoped>
  108.   .chat-box {
  109.     margin: 0 auto;
  110.     background: #fafafa;
  111.     position: absolute;
  112.     height: 100%;
  113.     width: 100%;
  114.     max-width: 700px;
  115.   header {
  116.     position: fixed;
  117.     width: 100%;
  118.     height: 3rem;
  119.     background: #409eff;
  120.     max-width: 700px;
  121.     display: flex;
  122.     justify-content: center;
  123.     align-items: center;
  124.     font-weight: bold;
  125.     color: white;
  126.     font-size: 1rem;
  127.   }
  128.   .msg-box {
  129.     position: absolute;
  130.     height: calc(100% - 6.5rem);
  131.     width: 100%;
  132.     margin-top: 3rem;
  133.     overflow-y: scroll;
  134.   .msg {
  135.     width: 95%;
  136.     min-height: 2.5rem;
  137.     margin: 1rem 0.5rem;
  138.     position: relative;
  139.     display: flex;
  140.     justify-content: flex-start !important;
  141.   .user-head {
  142.     min-width: 2.5rem;
  143.     width: 20%;
  144.     width: 2.5rem;
  145.     height: 2.5rem;
  146.     border-radius: 50%;
  147.     background: #f1f1f1;
  148.     display: flex;
  149.     justify-content: center;
  150.     align-items: center;
  151.   .head {
  152.     width: 1.2rem;
  153.     height: 1.2rem;
  154.   }
  155.   // position: absolute;
  156.   }
  157.   .user-msg {
  158.     width: 80%;
  159.   // position: absolute;
  160.     word-break: break-all;
  161.     position: relative;
  162.     z-index: 5;
  163.   span {
  164.     display: inline-block;
  165.     padding: 0.5rem 0.7rem;
  166.     border-radius: 0.5rem;
  167.     margin-top: 0.2rem;
  168.     font-size: 0.88rem;
  169.   }
  170.   .left {
  171.     background: white;
  172.     animation: toLeft 0.5s ease both 1;
  173.   }
  174.   .right {
  175.     background: #53a8ff;
  176.     color: white;
  177.     animation: toright 0.5s ease both 1;
  178.   }
  179.   @keyframes toLeft {
  180.     0% {
  181.       opacity: 0;
  182.       transform: translateX(-10px);
  183.     }
  184.     100% {
  185.       opacity: 1;
  186.       transform: translateX(0px);
  187.     }
  188.   }
  189.   @keyframes toright {
  190.     0% {
  191.       opacity: 0;
  192.       transform: translateX(10px);
  193.     }
  194.     100% {
  195.       opacity: 1;
  196.       transform: translateX(0px);
  197.     }
  198.   }
  199.   }
  200.   }
  201.   }
  202.   .input-box {
  203.     padding: 0 0.5rem;
  204.     position: absolute;
  205.     bottom: 0;
  206.     width: 100%;
  207.     height: 3.5rem;
  208.     background: #fafafa;
  209.     box-shadow: 0 0 5px #ccc;
  210.     display: flex;
  211.     justify-content: space-between;
  212.     align-items: center;
  213.   input {
  214.     height: 2.3rem;
  215.     display: inline-block;
  216.     width: 100%;
  217.     padding: 0.5rem;
  218.     border: none;
  219.     border-radius: 0.2rem;
  220.     font-size: 0.88rem;
  221.   }
  222.   .btn {
  223.     height: 2.3rem;
  224.     min-width: 4rem;
  225.     background: #e0e0e0;
  226.     padding: 0.5rem;
  227.     font-size: 0.88rem;
  228.     color: white;
  229.     text-align: center;
  230.     border-radius: 0.2rem;
  231.     margin-left: 0.5rem;
  232.     transition: 0.5s;
  233.   }
  234.   .btn-active {
  235.     background: #409eff;
  236.   }
  237.   }
  238.   }
  239. </style>

本文案例demo源码

https://gitee.com/zhengqingya/xiao-xiao-su

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/543497
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号