springboot集成websokcet+H5开发聊天原型（二）

news2025/1/5 4:24:48

本文没有写完~~~~

聊天相关数据结构：

我们初步设计了如下几个数据结构。

//存放 sessionId 与 userId 的map

private Map<String,String> sessionId_userId =new HashMap<>();

// 用于存储用户与群组的关联关系，键为用户ID，值为群组ID列表一个用户可以加入多个群组它是一个Map，键是用户ID，值是群组ID列表

private Map<String, List<String>> userGroups = new HashMap<>();

// 用于存储群组信息，键为群组ID，值包含在线用户会话列表和历史消息列表
private Map<String, GroupInfo> groupInfos = new HashMap<>();

用户通过socket和服务端连接的时候，都会传递

    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        LOGGER.info("WebSocket收到的消息: {}", message.getPayload());
        // 将消息反序列化，假设消息是JSON格式，这里解析为Message对象（下面定义）
        Message msg = objectMapper.readValue(message.getPayload().toString(), Message.class);
        String groupId = msg.getGroupId();
        String userId=msg.getUserId();
        int flag=this.checkUserIdAndSessionId(session.getId(),userId);  //检查userId和sessionId是否匹配
        //flag==0 说明userId和sessionId匹配 ,不做更多的操作 直接执行下面的代码
        if(flag==2){   //userId一致 但是 sessionId不一致,说明用户重新建立了session,要把原来该用户相关的session等全部删除掉
              //找到这个用户下原来所有的session，然后全部删除掉
            for (Map.Entry<String, String> entry : sessionId_userId.entrySet()) {
                String storedSessionId = entry.getKey();
                String storedUserId = entry.getValue();
                if (storedUserId.equals(userId)) {
                    sessionId_userId.remove(storedSessionId);
                }
                //by userId remove all the groupInfo
                List<String> groupIds = userGroups.get(userId);
                if (groupIds!= null) {
                    for (String groupId1 : groupIds) {
                        GroupInfo groupInfo = groupInfos.get(groupId1);
                        if (groupInfo!= null) {
                            groupInfo.removeSession(session);
                        }
                    }
                    userGroups.remove(userId);
                }
            }

        }else if(flag==3){  //userId不存在  session不存在 ，用户第一次建立连接
          //do nothing   放在这里就是为了说明flag==3的情况
        }

        if(flag==2 || flag==3){
            sessionId_userId.put(session.getId(),userId);    //sessionId 与 userId 建立映射  是1对1的关系
            List<String> groupIds = userGroups.computeIfAbsent(userId, k -> new ArrayList<>());  // 获取用户的群组ID列表
            groupIds.add(groupId);
        }

        GroupInfo groupInfo = groupInfos.get(groupId);
        if (groupInfo == null) {
            // 如果群组信息不存在，则创建新的群组信息，并添加当前用户的WebSocketSession
            groupInfo = new GroupInfo();
            groupInfo.addSession(session);
            groupInfos.put(groupId, groupInfo);
            // 同时，假设这里从WebSocket连接的属性或者请求参数中获取用户ID（实际需按业务逻辑调整获取方式）
            //String userId = (String) session.getAttributes().get("userId");
//            List<String> groupIds = userGroups.computeIfAbsent(userId, k -> new ArrayList<>());  // 获取用户的群组ID列表
//            groupIds.add(groupId);
        }else {
            groupInfo.addSession(session);  //addSession()方法会检查是否已经存在，如果存在就不会再添加
        }

        // 将消息添加到群组历史消息列表
        groupInfo.addHistoryMessage(msg);

        // 向群组内所有在线用户发送消息
        List<WebSocketSession> sessions = groupInfo.getSessions();
        for (WebSocketSession s : sessions) {
            try {
                s.sendMessage(new TextMessage(objectMapper.writeValueAsString(msg)));
            } catch (IOException e) {
                LOGGER.error("无法发送WebSocket消息", e);
            }
        }
    }

，

uniapp端页面：

<template>
  <view class="chat-room">
    <!-- 聊天记录 -->
    <scroll-view scroll-y="true" class="message-list">
      <view v-for="(message, index) in messages" :key="index" class="message-item">
        <view v-if="message.type === 'text'" class="text-message">
      <!--    <view class="avatar">{{ message.senderAvatar }}</view> -->
          <view class="text">{{ message.content }}</view>
        </view>
        <view v-else-if="message.type === 'image'" class="image-message">
          <image :src="message.content" class="message-image" @click="previewImage(message.content)"></image>
        </view>
      </view>
    </scroll-view>

    <!-- 输入框 -->
    <view class="input-area">
      <input v-model="inputContent" placeholder="输入内容" class="input" />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 聊天记录
      inputContent: '', // 输入框内容
      socketOpen: false, // WebSocket连接状态
      socket: null, // WebSocket对象
    };
  },
  methods: {
    // 初始化WebSocket连接
    initWebSocket() {
		   uni.setStorageSync('userId',1);  // only test
		   uni.setStorageSync('groupIds',2);  // only test
		    const userId = uni.getStorageSync('userId');
		    const groupIds = uni.getStorageSync('groupIds');
			console.log(groupIds);
		// /wechat/client/chat
      this.socket = uni.connectSocket({
		url: 'ws://127.0.0.1:7877/chat/websocket',
        data: {
            userId: userId,
            groupIds: groupIds
        },
        success: () => {
          console.log('WebSocket连接成功');
          this.socketOpen = true;
        },
        fail: () => {
          console.error('WebSocket连接失败');
        },
      });

      // 监听WebSocket消息
      this.socket.onMessage((res) => {
        const message = JSON.parse(res.data);
        this.messages.push(message); // 将新消息添加到聊天记录中
        this.$forceUpdate(); // 强制更新视图，确保新消息显示
      });

      // 监听WebSocket连接关闭
      this.socket.onClose(() => {
        console.log('WebSocket连接关闭');
        this.socketOpen = false;
      });
    },
    // 发送消息
sendMessage() {
    if (this.inputContent.trim() === '') {
        uni.showToast({
            title: '请输入内容',
            icon: 'none',
        });
        return;
    }

    const message = {
        type: 'text', // 消息类型，可以是text或image，这里发送文字消息示例，发送图片时修改相应字段
        groupId: uni.getStorageSync('groupIds'), // 从本地存储获取当前所在群组ID（需按实际情况调整获取方式）
        sender: uni.getStorageSync('userId'), // 从本地存储获取用户ID（需按实际情况调整获取方式）
        content: this.inputContent
    };

    // 通过WebSocket发送消息（或HTTP请求，根据后端接口决定）
    if (this.socketOpen) {
        this.socket.send({
            data: JSON.stringify(message)
        });
    } else {
		//todo
    }
},
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        current: url, // 当前显示图片的http链接
        urls: [url], // 需要预览的图片http链接列表
      });
    },
  },
  mounted() {
    // 页面加载时初始化WebSocket连接
    this.initWebSocket();

    // 可以从服务器获取历史聊天记录并初始化messages数组（根据需求实现）
  },
};
</script>

<style>
.chat-room {
  padding: 10px;
}

.message-list {
  height: 500px; /* 根据需要调整高度 */
  border-bottom: 1px solid #ccc;
  padding-right: 10px; /* 留出空间给滚动条 */
  overflow-y: auto;
}

.message-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.text-message .text {
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  max-width: 60%; /* 根据需要调整宽度 */
  word-wrap: break-word; /* 防止长文本溢出 */
}

.image-message .message-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

.input-area {
  display: flex;
  margin-top: 10px;
}

.input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 5px 10px;
  margin-left: 10px;
  border: none;
  background-color: #1aad19;
  color: #fff;
  border-radius: 5px;
}
</style>

原型效果：