获取全部用户
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -108,8 +108,8 @@
|
||||
|
||||
<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>
|
||||
<h3 class="text-sm font-medium text-gray-300">全部WebSocket用户</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">
|
||||
<!-- 在线用户将在这里动态生成 -->
|
||||
|
||||
@@ -343,6 +343,41 @@ class CallStateManager {
|
||||
return this._signaling;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在仅建立WebSocket连接时同步当前用户信息
|
||||
* @param {{ id?: string, name?: string, avatar?: string } | null} userInfo - 用户信息
|
||||
*/
|
||||
syncSocketUserInfo(userInfo = null) {
|
||||
const settings = userInfo || (() => {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('userSettings') || '{}');
|
||||
} catch (error) {
|
||||
console.error('Error parsing user settings:', error);
|
||||
return {};
|
||||
}
|
||||
})();
|
||||
|
||||
const payload = {
|
||||
id: settings.id || settings.userId || this.state.session.localUser.id || '',
|
||||
name: settings.name || this.state.session.localUser.name || '我',
|
||||
avatar: settings.avatar || this.state.session.localUser.avatar || '/images/p1.png'
|
||||
};
|
||||
|
||||
this.state.session.localUser = {
|
||||
...this.state.session.localUser,
|
||||
id: payload.id,
|
||||
name: payload.name,
|
||||
avatar: payload.avatar
|
||||
};
|
||||
|
||||
if (this._signaling && typeof this._signaling.sendMessage === 'function') {
|
||||
this._signaling.sendMessage('', {
|
||||
type: 'user-info',
|
||||
data: payload
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建信令和RTC实例
|
||||
* @async
|
||||
|
||||
Reference in New Issue
Block a user