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

在线聊天室（Vue+Springboot+WebSocket）_springboot和vue如何实现实时在线聊天

作者：从前慢现在也慢 | 2024-05-16 03:25:34

赞

踩

springboot和vue如何实现实时在线聊天

实现了一个简单的在线聊天室的前后端。前端用Vue实现，后端用Springboot实现。

一、项目描述

1. 整体功能描述

        在线聊天室的功能包括创建用户和显示在线用户列表、发送消息和显示消息列表、用户和消息列表实时更新这几点。以下是整体功能的活动图：

2. 实现思路

用户身份

        进入聊天室的用户需要有一个身份，为了简便，只需要一个唯一的id和一个用户名即可。用户名由用户自定义，id由服务端分配。

        客户端通过将id和用户名记录在sessionStorage来保存用户信息，而服务端通过用户的id及session来区分用户，为此，服务端需要维护一个在线用户列表，来记录用户的信息。

        如活动图所示，当用户第一次进入聊天室时，需要输入用户名，请求服务端分配id，服务端分配id后，客户端进行记录。而用户曾进入过聊天室时，可以直接从sessionStorage中获取id和用户名。

通信方式

        客户端和服务端的通信方式有两种，首先，在线聊天需要两端的全双工通信，因此需要建立websocket连接。通过websocket进行通信。

        但是，如活动图所示，websocket的连接需要用到用户id，而用户在首次进入聊天室时还没有id，此时就需要客户端直接发送http请求到服务端，来获取一个id。

实时更新

        聊天室中的在线用户列表以及消息列表需要实时更新。此功能可以通过websocket实现，每当用户进入、退出聊天室，或发送消息时，客户端会通过websocket向服务端发送消息。服务端会维护一个在线用户列表和消息列表，当收到用户消息时，就会更新这个列表，并向所有用户发送更新消息，以达到实时更新的效果。

二、具体实现

1. 前端整体布局

        因为是一个在线聊天室，所以就参考了微信聊天的页面，左侧显示在线用户列表，右侧显示消息窗口。如下图：

        如图所示，左侧用简单卡片列表的形式展示在线用户列表，右侧是消息列表，通过调整样式，使自己的消息靠右显示，别人的消息靠左显示。以下是部分代码：

  1. <template>
  2.   <div class="chatRoom">
  3.     <div class="personList">
  4.       <div class="title">
  5.         <h1>在线聊天室</h1>
  6.       </div>
  7.       <!-- 在线用户列表 -->
  8.       <div class="online-person">
  9.         <span class="title">在线用户</span>
  10.         <div class="person-cards-wrapper">
  11.           <div
  12.             class="personList"
  13.             v-for="personInfo in personList"
  14.             :key="personInfo.id"
  15.           >
  16.             <PersonCard :personInfo="personInfo"></PersonCard>
  17.           </div>
  18.         </div>
  19.       </div>
  20.     </div>
  21.     <!-- 聊天窗口 -->
  22.     <div class="chatContent">
  23.       <ChatWindow></ChatWindow>
  24.     </div>
  25.   </div>
  26. </template>
  27.  
  28. <!-- 聊天窗口组件 -->
  29. <template>
  30.   <div class="chat-window">
  31.     <div class="bottom">
  32.       <!-- 聊天信息列表 -->
  33.       <div class="chat-content" ref="chatContent">
  34.         <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
  35.           <!-- 通过uid判断是自己的消息还是别人的 -->
  36.           <div class="chat-friend" v-if="item.uid != $store.state.id">
  37.             <div class="chat-text">
  38.               {{ item.msg }}
  39.             </div>
  40.             <div class="info-time">
  41.               <span>{{ item.name }}</span>
  42.               <span>{{ item.time }}</span>
  43.             </div>
  44.           </div>
  45.           <div class="chat-me" v-else>
  46.             <!-- 略 -->
  47.           </div>
  48.         </div>
  49.       </div>
  50.       <div class="chatInputs">
  51.         <input class="inputs" v-model="inputMsg" @keyup.enter="sendText" />
  52.         <div class="send box" @click="sendText">
  53.           <span class="sendText">发送</span>
  54.         </div>
  55.       </div>
  56.     </div>
  57.   </div>
  58. </template>

2. 用户身份

        用户身份的实现方式在实现思路中已经给出，这里不再说明。此外，前端除了在sessionStorage中存储用户信息，还会利用Vuex存储用户信息。


3. 前后端通信

        前后端的通信有两种方式，首先是直接发送http请求，比如用户请求分配id时，这里是采用axios的方式像后端接口发送请求。

        然后是websocket连接，前端需要始终与后端保持websocket连接。需要注意的是，建立连接的时机需要保证在用户得到id后。以下是部分代码：

 前端：

  1.     <!-- 输入用户名的对话框 -->
  2.     <div v-if="showDialog" class="dialog-wrapper">
  3.       <div class="dialog">
  4.         <h2 class="dialog-title">请输入您的昵称</h2>
  5.         <el-input
  6.           v-model="inputName"
  7.           class="dialog-content"
  8.           placeholder="请输入内容"
  9.           maxlength="10"
  10.         ></el-input>
  11.         <button @click="closeDialog" class="dialog-button">确定</button>
  12.       </div>
  13.     </div>
  14.  
  15. <script>
  16.   mounted() {
  17.     // 如果sessionStorage中无用户id，则需输入用户名，分配id
  18.     if (!sessionStorage.hasOwnProperty("id")) {
  19.       this.openDialog();
  20.     } else {
  21.       // 如果sessionStorage中有，则无需分配，直接用vuex存储
  22.       this.$store.dispatch("setUserId", sessionStorage.getItem("id"));
  23.       this.$store.dispatch("setUserName", sessionStorage.getItem("name"));
  24.       console.log("增加已有用户：" + this.$store.state.name);
  25.       addUser({ id: this.$store.state.id, name: this.$store.state.name }).then(
  26.         (res) => {
  27.           // 建立websocket连接，要保证addUser后服务端才发送更新消息
  28.           this.$store.dispatch("connect");
  29.         }
  30.       );
  31.     }
  32.   },
  33.  
  34.   methods: {
  35.     openDialog() {
  36.       this.showDialog = true;
  37.     },
  38.     closeDialog() {
  39.       if (this.inputName.length == 0) {
  40.         this.$message({
  41.           message: "用户名不能为空",
  42.           type: "warning",
  43.         });
  44.       } else {
  45.         newUser(this.inputName).then((res) => {
  46.           // 将获取到的id用vuex存储
  47.           this.$store.dispatch("setUserId", res);
  48.           this.$store.dispatch("setUserName", this.inputName);
  49.           // 将数据存储到sessionStorage
  50.           sessionStorage.setItem("id", res);
  51.           sessionStorage.setItem("name", this.inputName);
  52.           // 建立websocket连接，需要用户id, 因此在分配id后进行
  53.           this.$store.dispatch("connect");
  54.         });
  55.         this.showDialog = false;
  56.       }
  57.     },
  58.   },
  59.  
  60. </script>
  1. export const newUser = (param) => {
  2.   return axios({
  3.     method: 'post',
  4.     baseURL: `${baseUrl}/user/new/${param}`,
  5.   }).then(res => res.data)
  6. }
  7.  
  8. export const addUser = (param) =>{
  9.   return axios({
  10.     method: 'post',
  11.     baseURL: `${baseUrl}/user/add`,
  12.     data: param,
  13.   }).then(res => res.data)
  14. }

后端：

  1. @RestController
  2. @RequestMapping("user")
  3. public class UserController {
  4.     // 用户第一次进入，分配id
  5.     @PostMapping("new/{name}")
  6.     public int newUser(@PathVariable String name) {
  7.         System.out.println(name);
  8.         User user = new User(++Storage.cur_id, name);
  9.         Storage.userList.put(user.getId(), user);
  10.         return Storage.cur_id;
  11.     }
  12.     
  13.     // 用户再次进入，无需分配id
  14.     @PostMapping("add")
  15.     public void addUser(@RequestBody User user) {
  16.         System.out.println(user);
  17.         Storage.userList.put(user.getId(), user);
  18.     }
  19. }
  1. public class MyWebSocket {
  2.     private Session session;
  3.  
  4.     private String userId;
  5.  
  6.     //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
  7.     private static final CopyOnWriteArraySet<MyWebSocket> webSockets = new CopyOnWriteArraySet<>();
  8.     // 用来存在线连接用户信息
  9.     private static final ConcurrentHashMap<String, Session> sessionPool = new ConcurrentHashMap<String, Session>();
  10.  
  11.     // 连接成功调用的方法
  12.     @OnOpen
  13.     public void onOpen(Session session, @PathParam(value = "userId") String userId) {
  14.         this.session = session;
  15.         this.userId = userId;
  16.         webSockets.add(this);
  17.         sessionPool.put(userId, session);   // 存储用户的session
  18.         // 有新用户连接后，需要通知所有用户更新在线用户列表
  19.         sendAllMessage(JSON.toJSONString(new SocketMessage(1, Storage.getUserList(), null)));
  20.         sendOneMessage(userId, JSON.toJSONString(new SocketMessage(2, null, Storage.getMsgList())));
  21.     }
  22.  
  23.     // 连接关闭调用的方法
  24.     @OnClose
  25.     public void onClose() {
  26.         webSockets.remove(this);
  27.         sessionPool.remove(this.userId);
  28.         // 将用户从在线列表中删掉，并通知所有用户
  29.         Storage.userList.remove(Integer.parseInt(this.userId));
  30.         sendAllMessage(JSON.toJSONString(new SocketMessage(1, Storage.getUserList(), null)));
  31.     }
  32.  
  33.     // 收到客户端消息后调用的方法
  34.     @OnMessage
  35.     public void onMessage(String message) {
  36.         Message msg = JSON.parseObject(message, Message.class);
  37.         Storage.msgList.add(msg);
  38.         sendAllMessage(JSON.toJSONString(new SocketMessage(2, null, Storage.getMsgList())));
  39.     }
  40.  
  41.     // 单点消息
  42.     public void sendOneMessage(String userId, String message) {
  43.         Session session = sessionPool.get(userId);
  44.         if (session != null && session.isOpen()) {
  45.             log.info("【websocket消息】 单点消息:" + message);
  46.             session.getAsyncRemote().sendText(message);
  47.         }
  48.     }
  49.  
  50.     // 广播消息
  51.     public void sendAllMessage(String message) {
  52.         for (MyWebSocket webSocket : webSockets) {
  53.             try {
  54.                 if (webSocket.session.isOpen()) {
  55.                     webSocket.session.getAsyncRemote().sendText(message);
  56.                 }
  57.             } catch (Exception e) {
  58.                 e.printStackTrace();
  59.             }
  60.         }
  61.     }
  62.  
  63.  
  64. }

4. 发送消息与实时更新

        聊天室需要保证用户列表与消息列表的实时更新，这里利用了Vue的响应式数据与Vuex，通过Vuex存储用户列表与消息列表，然后在Vue组件中监听它们的变化，每当有变化时，就更新自身的数据，从而使页面实时更新。

        而Vuex中数据的变化，是通过WebSocket通信实现的，实现方式在实现思路部分已经给出，这里不再说明。以下是部分代码：

  1. import Vue from 'vue';
  2. import Vuex from 'vuex';
  3.  
  4. Vue.use(Vuex);
  5.  
  6. const state = {
  7.     socket: null,
  8.     id: "",
  9.     name: "",
  10.     userList: [],
  11.     msgList: [],
  12. };
  13.  
  14. const mutations = {
  15.     setSocket(state, socket) {
  16.         state.socket = socket;
  17.     },
  18.     setId(state, id) {
  19.         state.id = id;
  20.     },
  21.     setName(state, name) {
  22.         state.name = name;
  23.     },
  24.     setUserList(state, userList) {
  25.         state.userList = userList;
  26.     },
  27.     setMsgList(state, msgList) {
  28.         state.msgList = msgList;
  29.     },
  30. }
  31.  
  32. const actions = {
  33.     connect(context) {
  34.         const socket = new WebSocket('ws://localhost:8089/chat/' + context.state.id)
  35.         socket.onopen = () => {
  36.             console.log("建立websocket连接")
  37.         }
  38.         socket.onmessage = (event) => {
  39.             // 接收消息的情况有两种：更新用户列表和更新消息列表
  40.             console.log("收到服务端的消息：" + event.data);
  41.             let msg = JSON.parse(event.data);
  42.             if (msg.type == '1') {
  43.                 console.log("更新用户列表: ");
  44.                 context.commit("setUserList", msg.userList);
  45.             } else if (msg.type == '2') {
  46.                 console.log("更新消息列表");
  47.                 context.commit("setMsgList", msg.msgList);
  48.             }
  49.         }
  50.  
  51.         context.commit("setSocket", socket)
  52.     },
  53.  
  54.     setUserId(context, id) {
  55.         console.log("设置用户id为：" + id);
  56.         context.commit("setId", id);
  57.     },
  58.  
  59.     setUserName(context, name) {
  60.         console.log("设置用户name为：" + name);
  61.         context.commit("setName", name);
  62.     },
  63.  
  64.     sendMsg(context, msg) {
  65.         context.state.socket.send(msg);
  66.     }
  67. };
  68.  
  69. export default new Vuex.Store({
  70.     actions,
  71.     mutations,
  72.     state,
  73. });
  1. export default {
  2.   data() {
  3.     return {
  4.       chatList: [],
  5.       inputMsg: "",
  6.     };
  7.   },
  8.   methods: {
  9.     //获取窗口高度并滚动至最底层
  10.     scrollBottom() {
  11.       this.$nextTick(() => {
  12.         const scrollDom = this.$refs.chatContent;
  13.         scrollDom.scrollTop = scrollDom.scrollHeight;
  14.       });
  15.     },
  16.     //发送文字信息
  17.     sendText() {
  18.       if (this.inputMsg) {
  19.         const now = new Date();
  20.  
  21.         const year = now.getFullYear();
  22.         const month = ("0" + (now.getMonth() + 1)).slice(-2);
  23.         const day = ("0" + now.getDate()).slice(-2);
  24.         const hours = ("0" + now.getHours()).slice(-2);
  25.         const minutes = ("0" + now.getMinutes()).slice(-2);
  26.         const seconds = ("0" + now.getSeconds()).slice(-2);
  27.  
  28.         const formattedTime =
  29.           year +
  30.           "-" +
  31.           month +
  32.           "-" +
  33.           day +
  34.           "  " +
  35.           hours +
  36.           ":" +
  37.           minutes +
  38.           ":" +
  39.           seconds;
  40.  
  41.         let msg = {
  42.           name: this.$store.state.name,
  43.           time: formattedTime,
  44.           msg: this.inputMsg,
  45.           uid: this.$store.state.id,
  46.         };
  47.         // 向websocket服务端发送消息
  48.         this.$store.dispatch("sendMsg", JSON.stringify(msg));
  49.         this.inputMsg = "";
  50.       } else {
  51.         this.$message({
  52.           message: "消息不能为空",
  53.           type: "warning",
  54.         });
  55.       }
  56.     },
  57.   },
  58.  
  59.   computed: {
  60.     getChatMsgList() {
  61.       return this.$store.state.msgList;
  62.     },
  63.   },
  64.  
  65.   watch: {
  66.     // 更新消息列表
  67.     getChatMsgList: {
  68.       handler: function (newVal, oldVal) {
  69.         console.log("更新chatList");
  70.         this.chatList = this.getChatMsgList;
  71.         this.scrollBottom();
  72.       },
  73.       deep: true,
  74.     },
  75.   },
  76. };

三、代码仓库

ChatRoom: 简单的在线聊天网站的前后端

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

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

  

闽ICP备14008679号