获取某一房间的用户

client/public/onebyone/connectview.js

@@ -10,6 +10,7 @@ const MAX_AVATAR_SIZE = 2 * 1024 * 1024; // 2MB
 
 // WebSocket连接状态更新回调
 let onWsStatusChange = null;
+let cachedOnlineUsers = [];
 
 /**
  * 设置WebSocket状态变化回调
@@ -63,15 +64,27 @@ export async function initWebSocket() {
 async function getAllConnectionIds() {
     showNotification('正在获取连接ID列表...');
     try {
-        const response = await fetch('/signaling/connection-ids');
-        if (!response.ok) {
+        const [connectionResponse, usersResponse] = await Promise.all([
+            fetch('/signaling/connection-ids'),
+            fetch('/signaling/users')
+        ]);
+
+        if (!connectionResponse.ok) {
             throw new Error('Failed to fetch connection IDs');
         }
-        const data = await response.json();
-        displayConnectionIds(data.connectionIds);
+
+        if (!usersResponse.ok) {
+            throw new Error('Failed to fetch online users');
+        }
+
+        const connectionData = await connectionResponse.json();
+        const usersData = await usersResponse.json();
+        cachedOnlineUsers = Array.isArray(usersData.users) ? usersData.users : [];
+        displayConnectionIds(connectionData.connectionIds || []);
+        displayOnlineUsers(cachedOnlineUsers);
     } catch (error) {
         console.error('Error fetching connection IDs:', error);
-        showNotification('获取连接ID失败', 'error');
+        showNotification('获取连接信息失败', 'error');
     }
 }
 
@@ -108,6 +121,100 @@ function displayConnectionIds(connectionIds) {
     }
 }
 
+/**
+ * 转义HTML特殊字符
+ * @param {string} value - 原始字符串
+ * @returns {string} 安全字符串
+ */
+function escapeHtml(value) {
+    return String(value || '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+/**
+ * 按连接ID分组显示在线用户
+ * @param {Array} users - 在线用户列表
+ * @param {string} selectedConnectionId - 当前选中的连接ID
+ */
+function displayOnlineUsers(users, selectedConnectionId = '') {
+    const onlineUsersList = document.getElementById('onlineUsersList');
+    const usersContainer = document.getElementById('usersContainer');
+    const onlineUsersSummary = document.getElementById('onlineUsersSummary');
+
+    if (!onlineUsersList || !usersContainer || !onlineUsersSummary) {
+        return;
+    }
+
+    const filteredUsers = selectedConnectionId
+        ? users.filter(user => user.connectionId === selectedConnectionId)
+        : users;
+
+    onlineUsersSummary.textContent = selectedConnectionId
+        ? `${filteredUsers.length} 人在线 · 房间 ${selectedConnectionId}`
+        : `${filteredUsers.length} 人在线`;
+
+    usersContainer.innerHTML = '';
+
+    if (filteredUsers.length === 0) {
+        usersContainer.innerHTML = '<p class="text-gray-500 text-sm">暂无在线用户</p>';
+        onlineUsersList.classList.remove('hidden');
+        return;
+    }
+
+    const groupedUsers = filteredUsers.reduce((groups, user) => {
+        const connectionId = user.connectionId || 'unknown';
+        if (!groups[connectionId]) {
+            groups[connectionId] = [];
+        }
+        groups[connectionId].push(user);
+        return groups;
+    }, {});
+
+    Object.entries(groupedUsers).forEach(([connectionId, roomUsers]) => {
+        const section = document.createElement('div');
+        section.className = 'rounded-lg border border-white/10 bg-white/5 p-3';
+
+        const roomTitle = document.createElement('div');
+        roomTitle.className = 'flex items-center justify-between mb-2';
+        roomTitle.innerHTML = `
+            <span class="text-sm font-medium text-white">${escapeHtml(connectionId)}</span>
+            <span class="text-xs text-gray-400">${roomUsers.length} 人</span>
+        `;
+        section.appendChild(roomTitle);
+
+        const roomList = document.createElement('div');
+        roomList.className = 'space-y-2';
+
+        roomUsers.forEach((user) => {
+            const userName = user.name || user.userId || '匿名用户';
+            const avatar = user.avatar || '/images/p2.png';
+            const roleLabel = user.role === 'host' ? '房主' : '成员';
+            const userItem = document.createElement('div');
+            userItem.className = 'flex items-center justify-between rounded-lg bg-black/20 px-3 py-2';
+            userItem.innerHTML = `
+                <div class="flex items-center gap-3 min-w-0">
+                    <img src="${escapeHtml(avatar)}" alt="${escapeHtml(userName)}" class="w-8 h-8 rounded-full object-cover">
+                    <div class="min-w-0">
+                        <div class="text-sm text-white truncate">${escapeHtml(userName)}</div>
+                        <div class="text-xs text-gray-400 truncate">${escapeHtml(user.userId || user.participantId || '未设置ID')}</div>
+                    </div>
+                </div>
+                <span class="text-xs px-2 py-1 rounded-full ${user.role === 'host' ? 'bg-indigo-500/20 text-indigo-300' : 'bg-white/10 text-gray-300'}">${roleLabel}</span>
+            `;
+            roomList.appendChild(userItem);
+        });
+
+        section.appendChild(roomList);
+        usersContainer.appendChild(section);
+    });
+
+    onlineUsersList.classList.remove('hidden');
+}
+
 /**
  * 选择连接ID
  * @param {string} id - 连接ID
@@ -116,6 +223,7 @@ function selectConnectionId(id) {
     const connectionIdInput = document.getElementById('connectionIdInput');
     if (connectionIdInput) {
         connectionIdInput.value = id;
+        displayOnlineUsers(cachedOnlineUsers, id);
         showNotification(`已选择连接ID: ${id}`);
     }
 }
@@ -356,4 +464,4 @@ window.selectConnectionId = selectConnectionId;
 window.saveSettings = saveSettings;
 window.handleAvatarUpload = handleAvatarUpload;
 window.copyUserId = copyUserId;
-window.toggleSettingsMenu = toggleSettingsMenu;
+window.toggleSettingsMenu = toggleSettingsMenu;

client/public/onebyone/index.html

@@ -106,6 +106,16 @@
                     </div>
                 </div>
 
+                <div id="onlineUsersList" class="glass rounded-xl p-4 mb-6 hidden">
+                    <div class="flex items-center justify-between mb-2">
+                        <h3 class="text-sm font-medium text-gray-300">在线用户</h3>
+                        <span id="onlineUsersSummary" class="text-xs text-gray-500">0 人在线</span>
+                    </div>
+                    <div id="usersContainer" class="max-h-56 overflow-y-auto space-y-3">
+                        <!-- 在线用户将在这里动态生成 -->
+                    </div>
+                </div>
+
                 <!-- WebSocket连接状态指示 -->
                 <div id="wsStatus" class="mt-4 flex items-center justify-center gap-2 text-xs text-gray-500">
                     <span id="wsStatusDot" class="w-2 h-2 bg-gray-500 rounded-full"></span>