diff --git a/client/public/onebyone/connectview.js b/client/public/onebyone/connectview.js index 567cfd9..e767445 100644 --- a/client/public/onebyone/connectview.js +++ b/client/public/onebyone/connectview.js @@ -49,7 +49,9 @@ export function updateWsStatus(connected) { export async function initWebSocket() { try { await store.connectSignaling(); + store.syncSocketUserInfo(); updateWsStatus(true); + await refreshOnlineUsers(); console.log('WebSocket initialized from connectview'); } catch (error) { console.error('Failed to initialize WebSocket:', error); @@ -58,11 +60,35 @@ export async function initWebSocket() { } } +/** + * 获取全部在线WebSocket用户 + * @param {boolean} silent - 是否静默刷新 + */ +async function refreshOnlineUsers(silent = true) { + try { + const response = await fetch('/signaling/users'); + if (!response.ok) { + throw new Error('Failed to fetch online users'); + } + const data = await response.json(); + cachedOnlineUsers = Array.isArray(data.users) ? data.users : []; + displayOnlineUsers(cachedOnlineUsers); + if (!silent) { + showNotification(`当前共有 ${cachedOnlineUsers.length} 个WebSocket用户在线`); + } + } catch (error) { + console.error('Error fetching online users:', error); + if (!silent) { + showNotification('获取在线用户失败', 'error'); + } + } +} + /** * 获取所有连接ID */ async function getAllConnectionIds() { - showNotification('正在获取连接ID列表...'); + showNotification('正在获取连接ID和在线用户...'); try { const [connectionResponse, usersResponse] = await Promise.all([ fetch('/signaling/connection-ids'), @@ -136,11 +162,10 @@ function escapeHtml(value) { } /** - * 按连接ID分组显示在线用户 + * 显示全部在线WebSocket用户 * @param {Array} users - 在线用户列表 - * @param {string} selectedConnectionId - 当前选中的连接ID */ -function displayOnlineUsers(users, selectedConnectionId = '') { +function displayOnlineUsers(users) { const onlineUsersList = document.getElementById('onlineUsersList'); const usersContainer = document.getElementById('usersContainer'); const onlineUsersSummary = document.getElementById('onlineUsersSummary'); @@ -149,39 +174,33 @@ function displayOnlineUsers(users, selectedConnectionId = '') { return; } - const filteredUsers = selectedConnectionId - ? users.filter(user => user.connectionId === selectedConnectionId) - : users; - - onlineUsersSummary.textContent = selectedConnectionId - ? `${filteredUsers.length} 人在线 · 房间 ${selectedConnectionId}` - : `${filteredUsers.length} 人在线`; + onlineUsersSummary.textContent = `${users.length} 个WebSocket用户在线`; usersContainer.innerHTML = ''; - if (filteredUsers.length === 0) { + if (users.length === 0) { usersContainer.innerHTML = '

暂无在线用户

'; onlineUsersList.classList.remove('hidden'); return; } - const groupedUsers = filteredUsers.reduce((groups, user) => { - const connectionId = user.connectionId || 'unknown'; - if (!groups[connectionId]) { - groups[connectionId] = []; + const groupedUsers = users.reduce((groups, user) => { + const groupName = user.connectionId ? `房间 ${user.connectionId}` : '大厅(未加入房间)'; + if (!groups[groupName]) { + groups[groupName] = []; } - groups[connectionId].push(user); + groups[groupName].push(user); return groups; }, {}); - Object.entries(groupedUsers).forEach(([connectionId, roomUsers]) => { + Object.entries(groupedUsers).forEach(([groupName, 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 = ` - ${escapeHtml(connectionId)} + ${escapeHtml(groupName)} ${roomUsers.length} 人 `; section.appendChild(roomTitle); @@ -192,7 +211,7 @@ function displayOnlineUsers(users, selectedConnectionId = '') { roomUsers.forEach((user) => { const userName = user.name || user.userId || '匿名用户'; const avatar = user.avatar || '/images/p2.png'; - const roleLabel = user.role === 'host' ? '房主' : '成员'; + const roleLabel = user.role === 'host' ? '房主' : (user.role === 'participant' ? '成员' : '大厅'); const userItem = document.createElement('div'); userItem.className = 'flex items-center justify-between rounded-lg bg-black/20 px-3 py-2'; userItem.innerHTML = ` @@ -200,10 +219,10 @@ function displayOnlineUsers(users, selectedConnectionId = '') { ${escapeHtml(userName)}
${escapeHtml(userName)}
-
${escapeHtml(user.userId || user.participantId || '未设置ID')}
+
${escapeHtml(user.userId || user.socketId || user.participantId || '未设置ID')}
- ${roleLabel} + ${roleLabel} `; roomList.appendChild(userItem); }); @@ -223,7 +242,6 @@ function selectConnectionId(id) { const connectionIdInput = document.getElementById('connectionIdInput'); if (connectionIdInput) { connectionIdInput.value = id; - displayOnlineUsers(cachedOnlineUsers, id); showNotification(`已选择连接ID: ${id}`); } } @@ -307,6 +325,7 @@ export function saveSettings() { }; localStorage.setItem('userSettings', JSON.stringify(settings)); + store.syncSocketUserInfo(settings); if (userName) userName.textContent = settings.name; if (userAvatar) userAvatar.src = settings.avatar; diff --git a/client/public/onebyone/index.html b/client/public/onebyone/index.html index c2ed003..f6c9da4 100644 --- a/client/public/onebyone/index.html +++ b/client/public/onebyone/index.html @@ -108,8 +108,8 @@