root/video_socket-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

获取全部用户

Browse Source
This commit is contained in:
stary
2026-05-16 23:07:08 +08:00
parent 75884d7b4b
commit 457e59a4d0
5 changed files with 120 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
client/public/onebyone/connectview.js
View File

@@ -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 = '<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] = [];
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 = `
<span class="text-sm font-medium text-white">${escapeHtml(connectionId)}</span>
<span class="text-sm font-medium text-white">${escapeHtml(groupName)}</span>
<span class="text-xs text-gray-400">${roomUsers.length} 人</span>
`;
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 = '') {
<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 class="text-xs text-gray-400 truncate">${escapeHtml(user.userId || user.socketId || 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>
<span class="text-xs px-2 py-1 rounded-full ${user.role === 'host' ? 'bg-indigo-500/20 text-indigo-300' : (user.role === 'participant' ? 'bg-white/10 text-gray-300' : 'bg-emerald-500/20 text-emerald-300')}">${roleLabel}</span>
`;
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;