tianyun 3 месяцев назад
Родитель
Сommit
171790c8cf
2 измененных файлов с 77 добавлено и 24 удалено
  1. 31 18
      chat-room/main.py
  2. 46 6
      chat-room/templates/room.html

+ 31 - 18
chat-room/main.py

@@ -14,6 +14,7 @@ socketio = SocketIO(app, cors_allowed_origins="*", logger=True, engineio_logger=
 logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(levelname)s - %(message)s')
 
 rooms = {}
+user_rooms = {}
 
 @socketio.on('connect')
 def on_connect():
@@ -22,47 +23,59 @@ def on_connect():
 @socketio.on('disconnect')
 def on_disconnect():
     logging.info(f"Client disconnected: {request.sid}")
-    room = rooms.get(request.sid)
+    room = user_rooms.get(request.sid)
     if room:
         leave_room(room)
-        del rooms[request.sid]
-        socketio.emit('user_left', request.sid, room=room)
+        username = rooms[room].pop(request.sid, None)
+        del user_rooms[request.sid]
+        if username:
+            socketio.emit('update_user_list', list(rooms[room].values()), room=room)
+        if not rooms[room]:
+            del rooms[room]
+        socketio.emit('user_left', username, room=room)
 
 @socketio.on('join')
 def on_join(data):
     room = data['room']
+    username = data['username']
     join_room(room)
-    rooms[request.sid] = room
-    logging.info(f"User {request.sid} joined room {room}")
-    socketio.emit('user_joined', request.sid, room=room, skip_sid=request.sid)
-    socketio.emit('message', {'type': 'system', 'msg': '新用户加入'}, room=room)
+    if room not in rooms:
+        rooms[room] = {}
+    rooms[room][request.sid] = username
+    user_rooms[request.sid] = room
+    logging.info(f"User {username} ({request.sid}) joined room {room}")
+    socketio.emit('user_joined', username, room=room, skip_sid=request.sid)
+    socketio.emit('update_user_list', list(rooms[room].values()), room=room)
+    socketio.emit('message', {'type': 'system', 'msg': f'{username} 加入了房间'}, room=room)
 
 @socketio.on('leave')
 def on_leave():
-    room = rooms.get(request.sid)
+    room = user_rooms.get(request.sid)
     if room:
+        username = rooms[room].pop(request.sid, None)
         leave_room(room)
-        del rooms[request.sid]
-        logging.info(f"User {request.sid} left room {room}")
-        socketio.emit('user_left', request.sid, room=room)
-        socketio.emit('message', {'type': 'system', 'msg': '用户离开'}, room=room)
+        del user_rooms[request.sid]
+        logging.info(f"User {username} ({request.sid}) left room {room}")
+        socketio.emit('user_left', username, room=room)
+        socketio.emit('update_user_list', list(rooms[room].values()), room=room)
+        socketio.emit('message', {'type': 'system', 'msg': f'{username} 离开了房间'}, room=room)
 
 @socketio.on('offer')
 def handle_offer(data):
-    data['sender'] = request.sid
-    logging.info(f"Offer from {request.sid} to {data.get('target')}")
+    data['sender'] = rooms[user_rooms[request.sid]][request.sid]
+    logging.info(f"Offer from {data['sender']} to {data.get('target')}")
     socketio.emit('offer', data, room=data.get('target'))
 
 @socketio.on('answer')
 def handle_answer(data):
-    data['sender'] = request.sid
-    logging.info(f"Answer from {request.sid} to {data.get('target')}")
+    data['sender'] = rooms[user_rooms[request.sid]][request.sid]
+    logging.info(f"Answer from {data['sender']} to {data.get('target')}")
     socketio.emit('answer', data, room=data.get('target'))
 
 @socketio.on('candidate')
 def handle_candidate(data):
-    data['sender'] = request.sid
-    logging.info(f"ICE candidate from {request.sid} to {data.get('target')}")
+    data['sender'] = rooms[user_rooms[request.sid]][request.sid]
+    logging.info(f"ICE candidate from {data['sender']} to {data.get('target')}")
     socketio.emit('candidate', data, room=data.get('target'))
 
 @app.route('/room/<room_id>')

+ 46 - 6
chat-room/templates/room.html

@@ -3,14 +3,30 @@
 <html>
 <head>
     <title>语音聊天室 - {{ room_id }}</title>
-    <!--    中文-->
-    <meta charset="UTF-8"></meta>
+    <meta charset="UTF-8">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <style>
+        #userList {
+            border: 1px solid #ccc;
+            padding: 10px;
+            margin-top: 10px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+    </style>
 </head>
 <body>
 <h1>语音聊天室 {{ room_id }}</h1>
-<button id="micButton" onclick="toggleMic()">🎤 点击说话</button>
-<div id="status"></div>
+<div id="joinForm">
+    <input type="text" id="username" placeholder="输入你的名字">
+    <button onclick="joinRoom()">加入房间</button>
+</div>
+<div id="chatRoom" style="display: none;">
+    <button id="micButton" onclick="toggleMic()">🎤 点击说话</button>
+    <div id="status"></div>
+    <h3>房间用户列表:</h3>
+    <div id="userList"></div>
+</div>
 
 <script>
     const room_id = "{{ room_id }}";
@@ -18,6 +34,18 @@
     let localStream;
     let socket;
     const peers = {};
+    let username = '';
+
+    function joinRoom() {
+        username = document.getElementById('username').value.trim();
+        if (!username) {
+            alert('请输入你的名字');
+            return;
+        }
+        document.getElementById('joinForm').style.display = 'none';
+        document.getElementById('chatRoom').style.display = 'block';
+        initSocket();
+    }
 
     // 初始化WebSocket连接
     function initSocket() {
@@ -32,7 +60,7 @@
         socket.on('connect', () => {
             console.log('Connected to server');
             document.getElementById('status').innerHTML = "已连接到服务器";
-            socket.emit("join", { room: room_id });
+            socket.emit("join", { room: room_id, username: username });
         });
 
         socket.on('connect_error', (error) => {
@@ -45,10 +73,22 @@
             document.getElementById('status').innerHTML = "已断开连接: " + reason;
         });
 
+        socket.on('update_user_list', (users) => {
+            updateUserList(users);
+        });
+
         // 其他事件处理...
     }
 
-    initSocket();
+    function updateUserList(users) {
+        const userList = document.getElementById('userList');
+        userList.innerHTML = '';
+        users.forEach(user => {
+            const userElement = document.createElement('div');
+            userElement.textContent = user;
+            userList.appendChild(userElement);
+        });
+    }
 
     // 添加错误处理
     window.onerror = function(message, source, lineno, colno, error) {