获取全部用户

client/public/onebyone/connectview.js

@@ -10,6 +10,7 @@ const MAX_AVATAR_SIZE = 2 * 1024 * 1024; // 2MB
 
 // WebSocket连接状态更新回调
 let onWsStatusChange = null;
+let cachedOnlineUsers = [];
 
 /**
  * 设置WebSocket状态变化回调
@@ -48,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);
@@ -57,21 +60,57 @@ 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 response = await fetch('/signaling/connection-ids');
+        const [connectionResponse, usersResponse] = await Promise.all([
-        if (!response.ok) {
+            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 +147,93 @@ 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;');
+}
+
+/**
+ * 显示全部在线WebSocket用户
+ * @param {Array} users - 在线用户列表
+ */
+function displayOnlineUsers(users) {
+    const onlineUsersList = document.getElementById('onlineUsersList');
+    const usersContainer = document.getElementById('usersContainer');
+    const onlineUsersSummary = document.getElementById('onlineUsersSummary');
+
+    if (!onlineUsersList || !usersContainer || !onlineUsersSummary) {
+        return;
+    }
+
+    onlineUsersSummary.textContent = `${users.length} 个WebSocket用户在线`;
+
+    usersContainer.innerHTML = '';
+
+    if (users.length === 0) {
+        usersContainer.innerHTML = '<p class="text-gray-500 text-sm">暂无在线用户</p>';
+        onlineUsersList.classList.remove('hidden');
+        return;
+    }
+
+    const groupedUsers = users.reduce((groups, user) => {
+        const groupName = user.connectionId ? `房间 ${user.connectionId}` : '大厅（未加入房间）';
+        if (!groups[groupName]) {
+            groups[groupName] = [];
+        }
+        groups[groupName].push(user);
+        return groups;
+    }, {});
+
+    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(groupName)}</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' ? '房主' : (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 = `
+                <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.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' : (user.role === 'participant' ? 'bg-white/10 text-gray-300' : 'bg-emerald-500/20 text-emerald-300')}">${roleLabel}</span>
+            `;
+            roomList.appendChild(userItem);
+        });
+
+        section.appendChild(roomList);
+        usersContainer.appendChild(section);
+    });
+
+    onlineUsersList.classList.remove('hidden');
+}
+
 /**
  * 选择连接ID
  * @param {string} id - 连接ID
@@ -199,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;
@@ -356,4 +483,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">全部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">
+                        <!-- 在线用户将在这里动态生成 -->
+                    </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>

client/public/onebyone/store.js

@@ -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

src/class/httphandler.ts

@@ -7,7 +7,7 @@ import Offer from './offer';
 import Answer from './answer';
 import Candidate from './candidate';
 import { v4 as uuid } from 'uuid';
-import { onGetAllConnectionIds } from './websockethandler';
+import { onGetAllConnectionIds, onGetOnlineUsers as onGetWsOnlineUsers } from './websockethandler';
 import { log, LogLevel } from '../log';
 /**
  * 断开连接记录类
@@ -1106,6 +1106,69 @@ function getAllConnectionIds(req: Request, res: Response): void {
   // 返回JSON响应，包含连接ID列表和总数量
   res.json({ connectionIds: connectionIds, totalCount: connectionIds.length });
 }
+
+/**
+ * 获取在线WebSocket用户列表
+ * @param req HTTP请求对象
+ * @param res HTTP响应对象
+ */
+/**
+ * @swagger
+ * /signaling/users:
+ *   get:
+ *     summary: 获取全部在线WebSocket用户列表
+ *     description: 获取所有当前已建立WebSocket连接的用户，包括未加入房间的大厅用户；支持按 connectionId 过滤指定房间内的用户
+ *     parameters:
+ *       - in: query
+ *         name: connectionId
+ *         schema:
+ *           type: string
+ *         required: false
+ *         description: 连接ID，传入时仅返回该房间内的在线用户
+ *     responses:
+ *       200:
+ *         description: 成功获取在线用户列表
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 users:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       connectionId:
+ *                         type: string
+ *                         description: 所属连接ID
+ *                       participantId:
+ *                         type: string
+ *                         description: 参与者ID
+ *                       role:
+ *                         type: string
+ *                         enum: [host, participant, idle]
+ *                         description: 角色
+ *                       socketId:
+ *                         type: string
+ *                         description: WebSocket连接ID
+ *                       userId:
+ *                         type: string
+ *                         description: 用户ID
+ *                       name:
+ *                         type: string
+ *                         description: 用户名称
+ *                       avatar:
+ *                         type: string
+ *                         description: 用户头像URL
+ *                 totalCount:
+ *                   type: number
+ *                   description: 在线WebSocket用户总数
+ */
+function getOnlineUsers(req: Request, res: Response): void {
+  const connectionId = typeof req.query.connectionId === 'string' ? req.query.connectionId : undefined;
+  const users = onGetWsOnlineUsers(connectionId);
+  res.json({ users: users, totalCount: users.length });
+}
 /**
  * 导出HTTP处理器函数
  */
@@ -1125,5 +1188,6 @@ export {
   postAnswer,        // 处理answer信令消息
   postCandidate,     // 处理candidate信令消息
   onGetConnections,  // 获取房间和用户信息
-  getAllConnectionIds // 获取所有连接ID
+  getAllConnectionIds, // 获取所有连接ID
+  getOnlineUsers     // 获取在线WebSocket用户列表
 };

src/class/websockethandler.ts

@@ -29,6 +29,22 @@ interface ConnectionGroup {
   participants: Set<WebSocket>;
 }
 
+interface UserInfo {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+interface OnlineUser {
+  socketId: string;
+  connectionId: string;
+  participantId: string;
+  role: 'host' | 'participant' | 'idle';
+  userId: string;
+  name: string;
+  avatar: string;
+}
+
 /**
  * 连接组映射
  * 键: connectionId
@@ -73,6 +89,7 @@ function add(ws: WebSocket): void {
   // 为新连接创建空的连接ID集合
   const id = new Set<string>();
   clients.set(ws, id);
+  (ws as any).socketId = (ws as any).socketId || `ws_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
   // 记录添加WebSocket连接的日志
   log(LogLevel.log, `Add WebSocket: ${ws.url}`);
 }
@@ -440,6 +457,61 @@ function onGetAllConnectionIds(): string[] {
   return connectionIds;
 }
 
+/**
+ * 获取WebSocket连接当前角色
+ * @param ws WebSocket连接实例
+ * @param connectionIds 该连接关联的connectionId集合
+ * @returns 用户角色
+ */
+function getSocketRole(ws: WebSocket, connectionIds: string[]): 'host' | 'participant' | 'idle' {
+  for (const connectionId of connectionIds) {
+    if (isHost(ws, connectionId)) {
+      return 'host';
+    }
+    const group = connectionGroup.get(connectionId);
+    if (group && group.participants.has(ws)) {
+      return 'participant';
+    }
+  }
+  return 'idle';
+}
+
+/**
+ * 将WebSocket连接转换为在线用户信息
+ * @param ws WebSocket连接实例
+ * @returns 在线用户信息
+ */
+function toOnlineUser(ws: WebSocket): OnlineUser {
+  const connectionIds = Array.from(clients.get(ws) || []);
+  const userInfo = ((ws as any).userInfo || {}) as UserInfo;
+  return {
+    socketId: (ws as any).socketId || '',
+    connectionId: connectionIds[0] || '',
+    participantId: (ws as any).participantId || '',
+    role: getSocketRole(ws, connectionIds),
+    userId: userInfo.id || '',
+    name: userInfo.name || '',
+    avatar: userInfo.avatar || ''
+  };
+}
+
+/**
+ * 获取在线WebSocket用户列表
+ * @param connectionId 可选的连接ID，传入时仅返回关联该房间的在线用户
+ * @returns 在线用户列表
+ */
+function onGetOnlineUsers(connectionId?: string): OnlineUser[] {
+  const onlineUsers: OnlineUser[] = [];
+  clients.forEach((connectionIds, ws) => {
+    const ids = Array.from(connectionIds);
+    if (connectionId && !ids.includes(connectionId)) {
+      return;
+    }
+    onlineUsers.push(toOnlineUser(ws));
+  });
+  return onlineUsers;
+}
+
 /**
  * 处理chat-message信令（1对多模式）
  * host的消息转发给所有participants，participant的消息转发给host
@@ -451,6 +523,13 @@ function onMessage(ws: WebSocket, message: any): void {
   const connectionId = message.connectionId;
   const chatMessage = message.message;
   const senderParticipantId = (ws as any).participantId;
+  if (chatMessage && chatMessage.type === 'user-info' && chatMessage.data) {
+    (ws as any).userInfo = {
+      id: chatMessage.data.id || '',
+      name: chatMessage.data.name || '匿名用户',
+      avatar: chatMessage.data.avatar || ''
+    };
+  }
   chatMessage.participantId = senderParticipantId;
   chatMessage.connectionId = connectionId;
   if (connectionGroup.has(connectionId)) {
@@ -476,4 +555,4 @@ function onMessage(ws: WebSocket, message: any): void {
 /**
  * 导出WebSocket处理器函数
  */
-export { reset, add, remove, onConnect, onDisconnect, onOffer, onAnswer, onCandidate, onCallConnectionId, onBroadcast, onGetAllConnectionIds, AddHeartbeat, RemoveHeartbeat, onMessage, isHost, broadcastToGroup, connectionGroup };
+export { reset, add, remove, onConnect, onDisconnect, onOffer, onAnswer, onCandidate, onCallConnectionId, onBroadcast, onGetAllConnectionIds, onGetOnlineUsers, AddHeartbeat, RemoveHeartbeat, onMessage, isHost, broadcastToGroup, connectionGroup };

src/signaling.ts

@@ -5,6 +5,7 @@ const router: express.Router = express.Router();
 
 // 不需要会话ID的路由
 router.get('/connection-ids', handler.getAllConnectionIds);
+router.get('/users', handler.getOnlineUsers);
 
 // 需要会话ID的路由
 router.use(handler.checkSessionId);