基于vue+springboot+websocket的多人聊天室

目录

1.介绍：

2.部分代码：

---

1.介绍

本项目是基于vue+springboot+websocket的多人聊天室，包括登陆注册，群聊通信，文件图片上传，创建群聊，加入退出群聊，个人信息展示和修改。

2.部分代码：

前端：

websocket通信(包括文件上传、图片上传）：

<template>
  <div class="rightSide">
    <!-- chatbox -->
    <div class="chat-box">
      <header>
        <span class="head_span">{
  { roomName }}</span></header>
      <div class="msg-box" ref="msg-box">
        <div v-if="list.length > 0">
          <div v-for="(i, index) in list" :key="index" class="msg" :style="i.userId === userId ? 'flex-direction: row-reverse' : ''">
            <div class="user-head">
              <img :src="i.avatar" height="30" width="30" :title="i.username" />
            </div>
            <div class="user-msg">
              <span :style="i.userId === userId ? 'float: right;' : ''" :class="i.userId === userId ? 'right' : 'left'">
               <!-- 判断内容是图片还是文件类型 -->
               <div v-if="i.fileUrl">
                  <template v-if="isImage(i.fileType)">
                    <img :src="i.fileUrl" alt="image" class="message-img" />
                      </template>
                        <template v-else>
                          <a :href="i.fileUrl" target="_blank">{
  { i.fileName }}</a>
                      </template>
               </div>
               <div v-else>{
  { i.content }}</div>
            </span>
            </div>
          </div>
        </div>
        <div v-else>
          <p>当前没有消息</p>
        </div>
      </div>
      <div class="input-box">
        <i class="el-icon-picture" @click="triggerImageUpload"></i>
        <i class="el-icon-files" @click="triggerFileUpload"></i>
        <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" />
        <div class="btn" :class="{['btn-active']: contentText}" @click="sendText()">发送</div>
      </div>
    </div>

    <!-- 图片上传组件 -->
    <el-upload
        ref="imageUpload"
        action="http://localhost:8082/file/upload"
        :show-file-list="false"
        :accept="'image/jpeg, image/png'"
        :before-upload="beforeImageUpload"
        :on-change="handleImageChange"
        :auto-upload="false"
    ></el-upload>

    <!-- 文件上传组件 -->
    <el-upload
        ref="fileUpload"
        action="http://localhost:8082/file/upload"
        :show-file-list="false"
        :accept="'*/*'"
        :before-upload="beforeFileUpload"
        :on-change="handleFileChange"
        :auto-upload="false"
    ></el-upload>
  </div>
</template>

<script>
import chatGroup from "@/views/chat/chatGroup.vue";
import { Message } from "element-ui";
import {eventBus} from "@/utils/eventBus";

let socket;

export default {
  name: "chatSpace",
  components: {
    chatGroup,
  },
  data() {
    return {
      roomId: sessionStorage.getItem("roomId"),
      roomName: '默认聊天室',
      ws: null,
      count: 0,
      userId: Number(sessionStorage.getItem("userId")), // 当前用户ID
      username: sessionStorage.getItem("userName"), // 当前用户昵称
      avatar:sessionStorage.getItem('watchStorage'),
      list: [], // 聊天记录的数组
      contentText: "", // input输入的值
      uploadData: {
        fileUrl: '',
        fileType: '',
        fileName: '',
        userId: sessionStorage.getItem("userId"),
        roomId: sessionStorage.getItem("roomId"),
      },
      chatRooms:[],
    };
  },
  mounted() {
    this.initWebSocket();
    this.loadHistoryMessages();  // 加载历史消息
  },
  destroyed() {
    // 离开页面时关闭websocket连接
    this.ws.onclose(undefined);
    // 清除事件监听器
    window.removeEventListener('setItem', this.handleStorageChange);
  },
  created() {
    // 监听 roomId 变化
    this.$watch('roomId', (newRoomId, oldRoomId) => {
      if (newRoomId !== oldRoomId) {
        // console.log(`房间 ID 发生变化：从 ${oldRoomId} 变为 ${newRoomId}`);
        // 如果 roomId 改变，关闭当前 WebSocket 连接并重新连接
        this.initWebSocket();  // 重新初始化 WebSocket 连接
        this.loadRoomData();    // 重新加载房间数据
      }
    });
    // 监听 'changeRoom' 事件，获取传递的 index
    eventBus.$on('changeRoom', (data) => {
      this.roomId = data;
      sessionStorage.setItem("roomId", data);  // 确保 sessionStorage 中的值也更新
      this.loadRoomData();  // 每次房间切换时加载相应的房间数据
    });
    this.loadRoomData();  // 每次房间切换时加载相应的房间数据
    // 监听 StorageEvent 事件
    window.addEventListener('setItem', this.handleStorageChange);
    // 获取初始的头像数据
    this.avatar = sessionStorage.getItem('watchStorage') || '';
  },
  methods: {
    // 根据 roomId 加载房间数据
    loadRoomData() {
      this.getRequest('/chatroom/searchrooms', {}, {params: {roomId: this.roomId}}).then(resp => {
        if (resp.code === "200") {
          this.roomName = resp.data[0][1] || '默认聊天室';  // 更新房间名称
          this.list = [];  // 清空当前历史记录
          this.loadHistoryMessages();  // 加载该房间的历史消息
          if(resp.data.length==0){
            Message.error("聊天室不存在")
          }
        } else {
          this.roomName = '未知聊天室';  // 如果房间数据加载失败，显示默认名称
          this.$message.error('加载房间数据失败');
        }
      });
    },
    // 进入页面创建websocket连接
    initWebSocket() {
      // 如果已有 WebSocket 连接，先关闭
      if (this.ws) {
        this.ws.close();
        // console.log("WebSocket 连接已关闭");
      }
      let _this = this;
      if (window.WebSocket) {
        const serverHost = window.location.hostname;
        const roomId = this.