| import os |
| import uuid |
| import json |
| from datetime import datetime |
| from flask import Flask, request, jsonify, send_file |
| from flask_socketio import SocketIO, emit |
| import base64 |
| import io |
|
|
| app = Flask(__name__) |
| app.config['SECRET_KEY'] = 'messenger-secret-key' |
| app.config['DEBUG'] = False |
|
|
| |
| socketio = SocketIO( |
| app, |
| cors_allowed_origins="*", |
| ping_timeout=60, |
| ping_interval=25, |
| logger=True, |
| engineio_logger=False, |
| async_mode='eventlet', |
| max_http_buffer_size=100 * 1024 * 1024 |
| ) |
|
|
| |
| users = {} |
| messages = [] |
| voice_messages = {} |
| active_calls = {} |
|
|
| HTML_TEMPLATE = ''' |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>Мобильный Мессенджер</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| -webkit-tap-highlight-color: transparent; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: #f0f2f5; |
| height: 100vh; |
| overflow: hidden; |
| } |
| |
| .app-container { |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| max-width: 100%; |
| margin: 0 auto; |
| background: white; |
| } |
| |
| /* Login Screen */ |
| .login-screen { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| height: 100%; |
| padding: 20px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| } |
| |
| .login-form { |
| background: rgba(255,255,255,0.1); |
| padding: 30px; |
| border-radius: 20px; |
| backdrop-filter: blur(10px); |
| width: 100%; |
| max-width: 320px; |
| } |
| |
| .login-input { |
| width: 100%; |
| padding: 15px; |
| margin: 10px 0; |
| border: none; |
| border-radius: 25px; |
| font-size: 16px; |
| background: rgba(255,255,255,0.9); |
| text-align: center; |
| } |
| |
| .login-btn { |
| width: 100%; |
| padding: 15px; |
| margin: 10px 0; |
| border: none; |
| border-radius: 25px; |
| background: #4CAF50; |
| color: white; |
| font-size: 16px; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| /* Chat Screen */ |
| .chat-screen { |
| display: none; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 15px; |
| position: relative; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .header-info { |
| flex: 1; |
| } |
| |
| .header h2 { |
| margin-bottom: 5px; |
| font-size: 18px; |
| } |
| |
| .online-info { |
| font-size: 14px; |
| opacity: 0.9; |
| } |
| |
| .call-buttons { |
| display: flex; |
| gap: 10px; |
| } |
| |
| .header-btn { |
| background: rgba(255,255,255,0.2); |
| border: none; |
| border-radius: 50%; |
| width: 44px; |
| height: 44px; |
| color: white; |
| font-size: 18px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .messages-container { |
| flex: 1; |
| overflow-y: auto; |
| padding: 10px; |
| background: #f8f9fa; |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| .message { |
| margin: 10px 0; |
| padding: 12px 15px; |
| border-radius: 18px; |
| max-width: 85%; |
| word-wrap: break-word; |
| position: relative; |
| animation: fadeIn 0.3s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .message.own { |
| background: #007AFF; |
| color: white; |
| margin-left: auto; |
| border-bottom-right-radius: 5px; |
| } |
| |
| .message.other { |
| background: white; |
| color: #333; |
| margin-right: auto; |
| border-bottom-left-radius: 5px; |
| box-shadow: 0 1px 2px rgba(0,0,0,0.1); |
| } |
| |
| .message-sender { |
| font-weight: bold; |
| font-size: 12px; |
| margin-bottom: 4px; |
| opacity: 0.8; |
| } |
| |
| .message-time { |
| font-size: 11px; |
| opacity: 0.7; |
| margin-top: 5px; |
| text-align: right; |
| } |
| |
| .voice-message { |
| display: flex; |
| align-items: center; |
| padding: 8px 0; |
| } |
| |
| .voice-play-btn { |
| background: #007AFF; |
| border: none; |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| margin-right: 10px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| } |
| |
| .voice-duration { |
| font-size: 14px; |
| color: #666; |
| } |
| |
| .input-area { |
| display: flex; |
| padding: 10px; |
| background: white; |
| border-top: 1px solid #e0e0e0; |
| align-items: center; |
| } |
| |
| .message-input { |
| flex: 1; |
| padding: 12px 15px; |
| border: 1px solid #ddd; |
| border-radius: 25px; |
| margin: 0 5px; |
| font-size: 16px; |
| outline: none; |
| background: #f8f9fa; |
| } |
| |
| .action-btn { |
| background: none; |
| border: none; |
| font-size: 24px; |
| padding: 10px; |
| cursor: pointer; |
| border-radius: 50%; |
| transition: background 0.2s; |
| min-width: 44px; |
| min-height: 44px; |
| color: #007AFF; |
| } |
| |
| .action-btn:active { |
| background: rgba(0,0,0,0.1); |
| } |
| |
| /* Users List */ |
| .users-sidebar { |
| position: fixed; |
| top: 0; |
| right: -300px; |
| width: 300px; |
| height: 100%; |
| background: white; |
| box-shadow: -2px 0 10px rgba(0,0,0,0.1); |
| transition: right 0.3s ease; |
| z-index: 1000; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .users-sidebar.open { |
| right: 0; |
| } |
| |
| .sidebar-header { |
| padding: 20px; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .close-sidebar { |
| background: none; |
| border: none; |
| color: white; |
| font-size: 20px; |
| cursor: pointer; |
| } |
| |
| .users-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 10px; |
| } |
| |
| .user-item { |
| display: flex; |
| align-items: center; |
| padding: 15px; |
| border-bottom: 1px solid #eee; |
| cursor: pointer; |
| } |
| |
| .user-item:active { |
| background: #f5f5f5; |
| } |
| |
| .user-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: #007AFF; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-weight: bold; |
| margin-right: 12px; |
| } |
| |
| .user-info { |
| flex: 1; |
| } |
| |
| .user-name { |
| font-weight: 500; |
| margin-bottom: 2px; |
| } |
| |
| .user-status { |
| font-size: 12px; |
| color: #4CAF50; |
| } |
| |
| .call-icon { |
| background: none; |
| border: none; |
| font-size: 20px; |
| cursor: pointer; |
| padding: 8px; |
| color: #007AFF; |
| } |
| |
| /* Call Screen */ |
| .call-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: #1a1a1a; |
| z-index: 2000; |
| display: none; |
| flex-direction: column; |
| } |
| |
| .video-container { |
| flex: 1; |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .remote-video { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
| |
| .local-video { |
| position: absolute; |
| bottom: 20px; |
| right: 20px; |
| width: 120px; |
| height: 160px; |
| border-radius: 10px; |
| border: 2px solid white; |
| object-fit: cover; |
| } |
| |
| .call-info { |
| position: absolute; |
| top: 40px; |
| left: 0; |
| right: 0; |
| text-align: center; |
| color: white; |
| z-index: 10; |
| } |
| |
| .call-status { |
| font-size: 18px; |
| margin-bottom: 5px; |
| } |
| |
| .call-timer { |
| font-size: 24px; |
| font-weight: bold; |
| } |
| |
| .call-controls { |
| position: absolute; |
| bottom: 40px; |
| left: 0; |
| right: 0; |
| display: flex; |
| justify-content: center; |
| gap: 20px; |
| z-index: 10; |
| } |
| |
| .call-control-btn { |
| background: rgba(255,255,255,0.2); |
| border: none; |
| border-radius: 50%; |
| width: 70px; |
| height: 70px; |
| color: white; |
| font-size: 24px; |
| cursor: pointer; |
| backdrop-filter: blur(10px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .end-call-btn { |
| background: #FF4444; |
| } |
| |
| .call-control-btn.active { |
| background: #4CAF50; |
| } |
| |
| /* Recording Overlay */ |
| .recording-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.8); |
| display: none; |
| justify-content: center; |
| align-items: center; |
| flex-direction: column; |
| z-index: 1000; |
| color: white; |
| } |
| |
| .recording-animation { |
| width: 100px; |
| height: 100px; |
| border: 3px solid white; |
| border-radius: 50%; |
| animation: pulse 1.5s infinite; |
| margin-bottom: 20px; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(0.8); opacity: 1; } |
| 50% { transform: scale(1.2); opacity: 0.7; } |
| 100% { transform: scale(0.8); opacity: 1; } |
| } |
| |
| /* Overlay */ |
| .overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.5); |
| display: none; |
| justify-content: center; |
| align-items: center; |
| z-index: 1500; |
| } |
| |
| .call-alert { |
| background: white; |
| padding: 25px; |
| border-radius: 15px; |
| text-align: center; |
| max-width: 300px; |
| width: 90%; |
| } |
| |
| .call-alert-buttons { |
| display: flex; |
| gap: 10px; |
| margin-top: 20px; |
| } |
| |
| .alert-btn { |
| flex: 1; |
| padding: 12px; |
| border: none; |
| border-radius: 8px; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| .accept-btn { |
| background: #4CAF50; |
| color: white; |
| } |
| |
| .reject-btn { |
| background: #FF4444; |
| color: white; |
| } |
| |
| .no-video { |
| background: #333; |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 16px; |
| } |
| |
| .connection-status { |
| position: fixed; |
| top: 10px; |
| right: 10px; |
| padding: 5px 10px; |
| border-radius: 15px; |
| font-size: 12px; |
| z-index: 3000; |
| } |
| |
| .connected { |
| background: #4CAF50; |
| color: white; |
| } |
| |
| .disconnected { |
| background: #FF4444; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Connection Status --> |
| <div id="connectionStatus" class="connection-status disconnected" style="display: none;"> |
| Подключение... |
| </div> |
| |
| <!-- Login Screen --> |
| <div id="loginScreen" class="login-screen"> |
| <div style="text-align: center; margin-bottom: 30px;"> |
| <h1 style="font-size: 2.5em; margin-bottom: 10px;">💬</h1> |
| <h1>Мобильный Мессенджер</h1> |
| <p style="margin-top: 10px; opacity: 0.8;">Общение, звонки, видео</p> |
| </div> |
| <div class="login-form"> |
| <input type="text" id="usernameInput" class="login-input" placeholder="Введите ваше имя" maxlength="20"> |
| <button onclick="registerUser()" class="login-btn">Начать общение</button> |
| </div> |
| </div> |
| |
| <!-- Main Chat Screen --> |
| <div id="chatScreen" class="app-container chat-screen"> |
| <div class="header"> |
| <div class="header-info"> |
| <h2>💬 Мессенджер</h2> |
| <div class="online-info"> |
| <span id="onlineCount">0</span> пользователей онлайн |
| </div> |
| </div> |
| <div class="call-buttons"> |
| <button class="header-btn" onclick="toggleUsersSidebar()" title="Пользователи">👥</button> |
| </div> |
| </div> |
| |
| <div id="messagesContainer" class="messages-container"> |
| <div style="text-align: center; color: #666; padding: 20px;"> |
| Начните общение! |
| </div> |
| </div> |
| |
| <div class="input-area"> |
| <button class="action-btn" onclick="startVoiceRecording()" title="Голосовое сообщение">🎤</button> |
| <input type="text" id="messageInput" class="message-input" placeholder="Введите сообщение..." maxlength="500"> |
| <button class="action-btn" onclick="sendMessage()" title="Отправить">📤</button> |
| </div> |
| </div> |
| |
| <!-- Users Sidebar --> |
| <div id="usersSidebar" class="users-sidebar"> |
| <div class="sidebar-header"> |
| <h3>Пользователи онлайн</h3> |
| <button class="close-sidebar" onclick="toggleUsersSidebar()">✕</button> |
| </div> |
| <div id="usersList" class="users-list"> |
| <!-- Users will be populated here --> |
| </div> |
| </div> |
| |
| <!-- Call Screen --> |
| <div id="callScreen" class="call-screen"> |
| <div class="video-container"> |
| <div id="remoteVideoContainer" class="no-video remote-video"> |
| <div>Ожидание подключения...</div> |
| </div> |
| <video id="localVideo" class="local-video" autoplay playsinline muted></video> |
| <div class="call-info"> |
| <div class="call-status" id="callStatus">Звонок...</div> |
| <div class="call-timer" id="callTimer">00:00</div> |
| </div> |
| <div class="call-controls"> |
| <button class="call-control-btn" id="muteBtn" onclick="toggleMute()">🎤</button> |
| <button class="call-control-btn" id="videoBtn" onclick="toggleVideo()">📹</button> |
| <button class="call-control-btn end-call-btn" onclick="endCall()">📞</button> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Recording Overlay --> |
| <div id="recordingOverlay" class="recording-overlay"> |
| <div class="recording-animation"></div> |
| <h3>Запись голосового сообщения...</h3> |
| <p>Нажмите для остановки</p> |
| </div> |
| |
| <!-- Incoming Call Overlay --> |
| <div id="incomingCallOverlay" class="overlay"> |
| <div class="call-alert"> |
| <h3>Входящий звонок</h3> |
| <p id="callerName">...</p> |
| <div class="call-alert-buttons"> |
| <button class="alert-btn reject-btn" onclick="rejectCall()">Отклонить</button> |
| <button class="alert-btn accept-btn" onclick="acceptCall()">Принять</button> |
| </div> |
| </div> |
| </div> |
| |
| <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script> |
| <script> |
| let socket; |
| let currentUser = null; |
| let mediaRecorder = null; |
| let audioChunks = []; |
| let isRecording = false; |
| let localStream = null; |
| let remoteStream = null; |
| let peerConnection = null; |
| let currentCall = null; |
| let callStartTime = null; |
| let callTimerInterval = null; |
| let isMuted = false; |
| let isVideoEnabled = true; |
| let reconnectAttempts = 0; |
| const MAX_RECONNECT_ATTEMPTS = 5; |
| |
| // WebRTC configuration |
| const rtcConfig = { |
| iceServers: [ |
| { urls: 'stun:stun.l.google.com:19302' }, |
| { |
| urls: 'turn:turn.anyfirewall.com:443?transport=tcp', |
| username: 'webrtc', |
| credential: 'webrtc' |
| } |
| ] |
| }; |
| |
| function initializeSocket() { |
| // Получаем базовый URL для корректного подключения к WebSocket |
| const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; |
| const host = window.location.host; |
| |
| socket = io({ |
| transports: ['websocket', 'polling'], |
| upgrade: true, |
| rememberUpgrade: true, |
| timeout: 10000, |
| pingTimeout: 60000, |
| pingInterval: 25000, |
| reconnection: true, |
| reconnectionAttempts: MAX_RECONNECT_ATTEMPTS, |
| reconnectionDelay: 1000, |
| reconnectionDelayMax: 5000 |
| }); |
| |
| // Socket events |
| socket.on('connect', () => { |
| console.log('Connected to server'); |
| updateConnectionStatus(true); |
| reconnectAttempts = 0; |
| |
| // Re-register if we have a current user |
| if (currentUser) { |
| socket.emit('register', currentUser.username); |
| } |
| }); |
| |
| socket.on('disconnect', (reason) => { |
| console.log('Disconnected from server:', reason); |
| updateConnectionStatus(false); |
| |
| if (reason === 'io server disconnect') { |
| // Server intentionally disconnected, try to reconnect |
| setTimeout(() => { |
| if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) { |
| socket.connect(); |
| reconnectAttempts++; |
| } |
| }, 1000); |
| } |
| }); |
| |
| socket.on('connect_error', (error) => { |
| console.error('Connection error:', error); |
| updateConnectionStatus(false); |
| }); |
| |
| socket.on('registration_success', (data) => { |
| currentUser = data; |
| document.getElementById('loginScreen').style.display = 'none'; |
| document.getElementById('chatScreen').style.display = 'flex'; |
| updateConnectionStatus(true); |
| }); |
| |
| socket.on('user_list_update', (data) => { |
| document.getElementById('onlineCount').textContent = data.count; |
| updateUsersList(data.users || []); |
| }); |
| |
| socket.on('new_message', (message) => { |
| displayMessage(message); |
| }); |
| |
| socket.on('new_voice_message', (data) => { |
| displayVoiceMessage(data); |
| }); |
| |
| socket.on('incoming_call', (data) => { |
| showIncomingCall(data.from_user, data.call_id, data.isVideo); |
| }); |
| |
| socket.on('call_answered', (data) => { |
| if (data.answer) { |
| startCall(data.isVideo, false); |
| } else { |
| alert('Пользователь отклонил звонок'); |
| hideCallScreen(); |
| } |
| }); |
| |
| socket.on('call_ended', () => { |
| alert('Звонок завершен'); |
| endCall(); |
| }); |
| |
| socket.on('webrtc_offer', async (data) => { |
| console.log('Received WebRTC offer'); |
| if (!peerConnection) { |
| await createPeerConnection(false); |
| } |
| try { |
| await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer)); |
| const answer = await peerConnection.createAnswer(); |
| await peerConnection.setLocalDescription(answer); |
| |
| socket.emit('webrtc_answer', { |
| answer: answer, |
| to_user: data.from_user, |
| call_id: data.call_id |
| }); |
| } catch (error) { |
| console.error('Error handling WebRTC offer:', error); |
| } |
| }); |
| |
| socket.on('webrtc_answer', async (data) => { |
| console.log('Received WebRTC answer'); |
| if (peerConnection) { |
| try { |
| await peerConnection.setRemoteDescription(new RTCSessionDescription(data.answer)); |
| } catch (error) { |
| console.error('Error setting remote description:', error); |
| } |
| } |
| }); |
| |
| socket.on('webrtc_ice_candidate', async (data) => { |
| if (peerConnection && data.candidate) { |
| try { |
| await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate)); |
| } catch (error) { |
| console.error('Error adding ICE candidate:', error); |
| } |
| } |
| }); |
| } |
| |
| function updateConnectionStatus(connected) { |
| const statusElement = document.getElementById('connectionStatus'); |
| statusElement.style.display = 'block'; |
| if (connected) { |
| statusElement.textContent = '✓ Подключено'; |
| statusElement.className = 'connection-status connected'; |
| } else { |
| statusElement.textContent = '✗ Отключено'; |
| statusElement.className = 'connection-status disconnected'; |
| } |
| } |
| |
| // UI Functions |
| function registerUser() { |
| const username = document.getElementById('usernameInput').value.trim(); |
| if (username) { |
| if (!socket || !socket.connected) { |
| initializeSocket(); |
| } |
| socket.emit('register', username); |
| } else { |
| alert('Введите имя пользователя'); |
| } |
| } |
| |
| function sendMessage() { |
| const input = document.getElementById('messageInput'); |
| const text = input.value.trim(); |
| |
| if (text && socket && socket.connected) { |
| socket.emit('message', { |
| sender: currentUser.username, |
| text: text |
| }); |
| input.value = ''; |
| } else if (!socket || !socket.connected) { |
| alert('Нет подключения к серверу'); |
| } |
| } |
| |
| function displayMessage(message) { |
| const container = document.getElementById('messagesContainer'); |
| const messageDiv = document.createElement('div'); |
| |
| messageDiv.className = `message ${message.sender === currentUser.username ? 'own' : 'other'}`; |
| messageDiv.innerHTML = ` |
| <div class="message-sender">${message.sender}</div> |
| <div>${message.text}</div> |
| <div class="message-time">${new Date(message.timestamp).toLocaleTimeString()}</div> |
| `; |
| |
| container.appendChild(messageDiv); |
| container.scrollTop = container.scrollHeight; |
| |
| // Remove placeholder if exists |
| const placeholder = container.querySelector('div[style*="text-align: center"]'); |
| if (placeholder) { |
| placeholder.remove(); |
| } |
| } |
| |
| function displayVoiceMessage(data) { |
| const container = document.getElementById('messagesContainer'); |
| const messageDiv = document.createElement('div'); |
| |
| messageDiv.className = `message ${data.sender === currentUser.username ? 'own' : 'other'}`; |
| messageDiv.innerHTML = ` |
| <div class="message-sender">${data.sender}</div> |
| <div class="voice-message"> |
| <button class="voice-play-btn" onclick="playVoiceMessage('${data.filename}')">▶</button> |
| <div> |
| <div>Голосовое сообщение</div> |
| <div class="voice-duration">${data.duration || '0'} сек</div> |
| </div> |
| </div> |
| <div class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</div> |
| `; |
| |
| container.appendChild(messageDiv); |
| container.scrollTop = container.scrollHeight; |
| } |
| |
| function updateUsersList(users) { |
| const usersList = document.getElementById('usersList'); |
| usersList.innerHTML = ''; |
| |
| const otherUsers = users.filter(user => user !== currentUser.username); |
| |
| if (otherUsers.length === 0) { |
| usersList.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">Нет других пользователей онлайн</div>'; |
| return; |
| } |
| |
| otherUsers.forEach(user => { |
| const userItem = document.createElement('div'); |
| userItem.className = 'user-item'; |
| userItem.innerHTML = ` |
| <div class="user-avatar">${user.charAt(0).toUpperCase()}</div> |
| <div class="user-info"> |
| <div class="user-name">${user}</div> |
| <div class="user-status">online</div> |
| </div> |
| <button class="call-icon" onclick="startCallWithUser('${user}', false)" title="Аудиозвонок">📞</button> |
| <button class="call-icon" onclick="startCallWithUser('${user}', true)" title="Видеозвонок">📹</button> |
| `; |
| usersList.appendChild(userItem); |
| }); |
| } |
| |
| function toggleUsersSidebar() { |
| const sidebar = document.getElementById('usersSidebar'); |
| sidebar.classList.toggle('open'); |
| } |
| |
| // Voice Messages |
| async function startVoiceRecording() { |
| if (isRecording) { |
| stopRecording(); |
| return; |
| } |
| |
| try { |
| const stream = await navigator.mediaDevices.getUserMedia({ |
| audio: { |
| echoCancellation: true, |
| noiseSuppression: true |
| } |
| }); |
| |
| mediaRecorder = new MediaRecorder(stream, { |
| mimeType: 'audio/webm;codecs=opus' |
| }); |
| |
| audioChunks = []; |
| let startTime = Date.now(); |
| |
| mediaRecorder.ondataavailable = (event) => { |
| if (event.data.size > 0) { |
| audioChunks.push(event.data); |
| } |
| }; |
| |
| mediaRecorder.onstop = async () => { |
| const duration = Math.round((Date.now() - startTime) / 1000); |
| const audioBlob = new Blob(audioChunks, { type: 'audio/webm' }); |
| |
| const reader = new FileReader(); |
| reader.onload = function() { |
| const base64Audio = reader.result.split(',')[1]; |
| |
| if (socket && socket.connected) { |
| socket.emit('voice_message', { |
| audio_data: base64Audio, |
| sender: currentUser.username, |
| duration: duration |
| }); |
| } else { |
| alert('Нет подключения для отправки голосового сообщения'); |
| } |
| }; |
| reader.readAsDataURL(audioBlob); |
| |
| stream.getTracks().forEach(track => track.stop()); |
| }; |
| |
| mediaRecorder.start(); |
| isRecording = true; |
| |
| // Show recording overlay |
| document.getElementById('recordingOverlay').style.display = 'flex'; |
| |
| } catch (error) { |
| console.error('Error recording:', error); |
| alert('Ошибка доступа к микрофону'); |
| } |
| } |
| |
| function stopRecording() { |
| if (mediaRecorder && isRecording) { |
| mediaRecorder.stop(); |
| isRecording = false; |
| document.getElementById('recordingOverlay').style.display = 'none'; |
| } |
| } |
| |
| function playVoiceMessage(filename) { |
| const audio = new Audio(`/voice/${filename}`); |
| audio.play().catch(e => console.error('Error playing audio:', e)); |
| } |
| |
| // Call Functions |
| function startCallWithUser(targetUser, isVideo) { |
| if (!socket || !socket.connected) { |
| alert('Нет подключения к серверу'); |
| return; |
| } |
| |
| currentCall = { |
| id: Date.now().toString(), |
| target: targetUser, |
| isVideo: isVideo, |
| isInitiator: true |
| }; |
| |
| socket.emit('call_request', { |
| call_id: currentCall.id, |
| from_user: currentUser.username, |
| to_user: targetUser, |
| isVideo: isVideo |
| }); |
| |
| showCallScreen(isVideo, `Звонок ${targetUser}...`); |
| } |
| |
| function showIncomingCall(fromUser, callId, isVideo) { |
| currentCall = { |
| id: callId, |
| target: fromUser, |
| isVideo: isVideo, |
| isInitiator: false |
| }; |
| |
| document.getElementById('callerName').textContent = fromUser; |
| document.getElementById('incomingCallOverlay').style.display = 'flex'; |
| } |
| |
| function acceptCall() { |
| document.getElementById('incomingCallOverlay').style.display = 'none'; |
| if (socket && socket.connected) { |
| socket.emit('call_answer', { |
| call_id: currentCall.id, |
| answer: true, |
| to_user: currentCall.target, |
| isVideo: currentCall.isVideo |
| }); |
| |
| startCall(currentCall.isVideo, true); |
| } else { |
| alert('Нет подключения к серверу'); |
| } |
| } |
| |
| function rejectCall() { |
| if (socket && socket.connected) { |
| socket.emit('call_answer', { |
| call_id: currentCall.id, |
| answer: false, |
| to_user: currentCall.target |
| }); |
| } |
| |
| document.getElementById('incomingCallOverlay').style.display = 'none'; |
| currentCall = null; |
| } |
| |
| async function startCall(isVideo, isInitiator) { |
| try { |
| showCallScreen(isVideo, isInitiator ? 'Звонок...' : 'Разговор...'); |
| |
| // Get local media stream |
| const constraints = { |
| audio: true, |
| video: isVideo ? { |
| width: { ideal: 640 }, |
| height: { ideal: 480 }, |
| frameRate: { ideal: 24 } |
| } : false |
| }; |
| |
| localStream = await navigator.mediaDevices.getUserMedia(constraints); |
| document.getElementById('localVideo').srcObject = localStream; |
| |
| // Create peer connection |
| await createPeerConnection(isInitiator); |
| |
| if (isInitiator) { |
| // Create and send offer |
| const offer = await peerConnection.createOffer(); |
| await peerConnection.setLocalDescription(offer); |
| |
| if (socket && socket.connected) { |
| socket.emit('webrtc_offer', { |
| offer: offer, |
| to_user: currentCall.target, |
| call_id: currentCall.id |
| }); |
| } |
| } |
| |
| // Start call timer |
| startCallTimer(); |
| |
| } catch (error) { |
| console.error('Error starting call:', error); |
| alert(`Ошибка начала звонка: ${error.message}`); |
| endCall(); |
| } |
| } |
| |
| async function createPeerConnection(isInitiator) { |
| peerConnection = new RTCPeerConnection(rtcConfig); |
| |
| // Add local stream tracks |
| localStream.getTracks().forEach(track => { |
| peerConnection.addTrack(track, localStream); |
| }); |
| |
| // Handle incoming stream |
| peerConnection.ontrack = (event) => { |
| console.log('Received remote track:', event.track.kind); |
| remoteStream = event.streams[0]; |
| const remoteVideo = document.getElementById('remoteVideoContainer'); |
| |
| if (event.track.kind === 'video') { |
| // Create video element for remote stream |
| const videoElement = document.createElement('video'); |
| videoElement.srcObject = remoteStream; |
| videoElement.autoplay = true; |
| videoElement.playsInline = true; |
| videoElement.className = 'remote-video'; |
| |
| remoteVideo.innerHTML = ''; |
| remoteVideo.appendChild(videoElement); |
| } else if (event.track.kind === 'audio') { |
| // For audio only, show message |
| if (!document.querySelector('.remote-video video')) { |
| remoteVideo.innerHTML = '<div>Аудиозвонок</div>'; |
| remoteVideo.className = 'no-video remote-video'; |
| } |
| } |
| }; |
| |
| // Handle ICE candidates |
| peerConnection.onicecandidate = (event) => { |
| if (event.candidate && currentCall && socket && socket.connected) { |
| socket.emit('webrtc_ice_candidate', { |
| candidate: event.candidate, |
| to_user: currentCall.target |
| }); |
| } |
| }; |
| |
| peerConnection.onconnectionstatechange = () => { |
| console.log('Connection state:', peerConnection.connectionState); |
| if (peerConnection.connectionState === 'connected') { |
| document.getElementById('callStatus').textContent = 'Разговор'; |
| } |
| }; |
| |
| peerConnection.oniceconnectionstatechange = () => { |
| console.log('ICE connection state:', peerConnection.iceConnectionState); |
| }; |
| } |
| |
| function showCallScreen(isVideo, status) { |
| document.getElementById('callScreen').style.display = 'flex'; |
| document.getElementById('callStatus').textContent = status; |
| |
| const remoteVideo = document.getElementById('remoteVideoContainer'); |
| if (!isVideo) { |
| remoteVideo.innerHTML = '<div>Аудиозвонок</div>'; |
| remoteVideo.className = 'no-video remote-video'; |
| } |
| } |
| |
| function hideCallScreen() { |
| document.getElementById('callScreen').style.display = 'none'; |
| document.getElementById('remoteVideoContainer').innerHTML = '<div>Ожидание подключения...</div>'; |
| document.getElementById('remoteVideoContainer').className = 'no-video remote-video'; |
| |
| if (callTimerInterval) { |
| clearInterval(callTimerInterval); |
| callTimerInterval = null; |
| } |
| } |
| |
| function startCallTimer() { |
| callStartTime = new Date(); |
| callTimerInterval = setInterval(() => { |
| const now = new Date(); |
| const diff = Math.floor((now - callStartTime) / 1000); |
| const minutes = Math.floor(diff / 60); |
| const seconds = diff % 60; |
| document.getElementById('callTimer').textContent = |
| `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| }, 1000); |
| } |
| |
| function endCall() { |
| if (peerConnection) { |
| peerConnection.close(); |
| peerConnection = null; |
| } |
| |
| if (localStream) { |
| localStream.getTracks().forEach(track => track.stop()); |
| localStream = null; |
| } |
| |
| if (currentCall && socket && socket.connected) { |
| socket.emit('call_end', { |
| to_user: currentCall.target, |
| call_id: currentCall.id |
| }); |
| } |
| |
| hideCallScreen(); |
| currentCall = null; |
| isMuted = false; |
| isVideoEnabled = true; |
| } |
| |
| function toggleMute() { |
| if (localStream) { |
| const audioTracks = localStream.getAudioTracks(); |
| if (audioTracks.length > 0) { |
| isMuted = !isMuted; |
| audioTracks[0].enabled = !isMuted; |
| document.getElementById('muteBtn').classList.toggle('active', isMuted); |
| document.getElementById('muteBtn').textContent = isMuted ? '🎤🚫' : '🎤'; |
| } |
| } |
| } |
| |
| function toggleVideo() { |
| if (localStream) { |
| const videoTracks = localStream.getVideoTracks(); |
| if (videoTracks.length > 0) { |
| isVideoEnabled = !isVideoEnabled; |
| videoTracks[0].enabled = isVideoEnabled; |
| document.getElementById('videoBtn').classList.toggle('active', !isVideoEnabled); |
| document.getElementById('videoBtn').textContent = isVideoEnabled ? '📹' : '📹🚫'; |
| |
| // Hide/show local video |
| document.getElementById('localVideo').style.display = isVideoEnabled ? 'block' : 'none'; |
| } |
| } |
| } |
| |
| // Event listeners |
| document.getElementById('recordingOverlay').addEventListener('click', stopRecording); |
| |
| document.getElementById('messageInput').addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| document.getElementById('usernameInput').addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| registerUser(); |
| } |
| }); |
| |
| // Close sidebar when clicking outside |
| document.addEventListener('click', (e) => { |
| const sidebar = document.getElementById('usersSidebar'); |
| if (sidebar.classList.contains('open') && |
| !e.target.closest('.users-sidebar') && |
| !e.target.closest('.header-btn')) { |
| sidebar.classList.remove('open'); |
| } |
| }); |
| |
| // Initialize socket on load |
| window.addEventListener('load', function() { |
| initializeSocket(); |
| }); |
| |
| // Handle page visibility changes |
| document.addEventListener('visibilitychange', function() { |
| if (!document.hidden && (!socket || !socket.connected)) { |
| initializeSocket(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| ''' |
|
|
| @app.route('/') |
| def index(): |
| return HTML_TEMPLATE |
|
|
| @socketio.on('connect') |
| def handle_connect(): |
| print(f'Client connected: {request.sid}') |
| emit('user_list_update', { |
| 'count': len(users), |
| 'users': [user_data['username'] for user_data in users.values()] |
| }) |
|
|
| @socketio.on('disconnect') |
| def handle_disconnect(): |
| print(f'Client disconnected: {request.sid}') |
| |
| |
| disconnected_user = None |
| for user_id, user_data in list(users.items()): |
| if user_data.get('sid') == request.sid: |
| disconnected_user = user_data['username'] |
| |
| for call_id, call_data in list(active_calls.items()): |
| if call_data['from_user'] == disconnected_user or call_data['to_user'] == disconnected_user: |
| try: |
| emit('call_ended', room=call_data['to_sid']) |
| except: |
| pass |
| try: |
| emit('call_ended', room=call_data['from_sid']) |
| except: |
| pass |
| del active_calls[call_id] |
| |
| del users[user_id] |
| break |
| |
| if disconnected_user: |
| emit('user_list_update', { |
| 'count': len(users), |
| 'users': [user_data['username'] for user_data in users.values()] |
| }, broadcast=True) |
|
|
| @socketio.on('register') |
| def handle_register(username): |
| user_id = str(uuid.uuid4()) |
| users[user_id] = { |
| 'username': username, |
| 'sid': request.sid, |
| 'joined': datetime.now().isoformat() |
| } |
| |
| emit('registration_success', { |
| 'user_id': user_id, |
| 'username': username |
| }) |
| |
| emit('user_list_update', { |
| 'count': len(users), |
| 'users': [user_data['username'] for user_data in users.values()] |
| }, broadcast=True) |
|
|
| @socketio.on('message') |
| def handle_message(data): |
| message = { |
| 'id': str(uuid.uuid4()), |
| 'sender': data['sender'], |
| 'text': data['text'], |
| 'timestamp': datetime.now().isoformat() |
| } |
| messages.append(message) |
| emit('new_message', message, broadcast=True) |
|
|
| @socketio.on('voice_message') |
| def handle_voice_message(data): |
| try: |
| audio_data = base64.b64decode(data['audio_data']) |
| filename = f"voice_{uuid.uuid4()}.webm" |
| |
| with open(filename, 'wb') as f: |
| f.write(audio_data) |
| |
| voice_data = { |
| 'filename': filename, |
| 'sender': data['sender'], |
| 'duration': data.get('duration', 0), |
| 'timestamp': datetime.now().isoformat() |
| } |
| voice_messages[filename] = voice_data |
| |
| emit('new_voice_message', voice_data, broadcast=True) |
| except Exception as e: |
| print(f"Error handling voice message: {e}") |
|
|
| @socketio.on('call_request') |
| def handle_call_request(data): |
| target_username = data.get('to_user') |
| target_sid = None |
| |
| for user_data in users.values(): |
| if user_data['username'] == target_username: |
| target_sid = user_data['sid'] |
| break |
| |
| if target_sid: |
| active_calls[data['call_id']] = { |
| 'from_user': data['from_user'], |
| 'to_user': target_username, |
| 'from_sid': request.sid, |
| 'to_sid': target_sid, |
| 'is_video': data.get('isVideo', False) |
| } |
| |
| emit('incoming_call', { |
| 'call_id': data['call_id'], |
| 'from_user': data['from_user'], |
| 'isVideo': data.get('isVideo', False) |
| }, room=target_sid) |
|
|
| @socketio.on('call_answer') |
| def handle_call_answer(data): |
| call_id = data.get('call_id') |
| if call_id in active_calls: |
| call_data = active_calls[call_id] |
| |
| if data['answer']: |
| emit('call_answered', { |
| 'answer': True, |
| 'isVideo': call_data['is_video'] |
| }, room=call_data['from_sid']) |
| else: |
| emit('call_answered', { |
| 'answer': False |
| }, room=call_data['from_sid']) |
| del active_calls[call_id] |
|
|
| @socketio.on('call_end') |
| def handle_call_end(data): |
| call_id = data.get('call_id') |
| if call_id in active_calls: |
| call_data = active_calls[call_id] |
| try: |
| emit('call_ended', room=call_data['to_sid']) |
| except: |
| pass |
| try: |
| emit('call_ended', room=call_data['from_sid']) |
| except: |
| pass |
| del active_calls[call_id] |
|
|
| @socketio.on('webrtc_offer') |
| def handle_webrtc_offer(data): |
| target_username = data.get('to_user') |
| target_sid = None |
| |
| for user_data in users.values(): |
| if user_data['username'] == target_username: |
| target_sid = user_data['sid'] |
| break |
| |
| if target_sid: |
| emit('webrtc_offer', { |
| 'offer': data['offer'], |
| 'from_user': data.get('from_user'), |
| 'call_id': data.get('call_id') |
| }, room=target_sid) |
|
|
| @socketio.on('webrtc_answer') |
| def handle_webrtc_answer(data): |
| target_username = data.get('to_user') |
| target_sid = None |
| |
| for user_data in users.values(): |
| if user_data['username'] == target_username: |
| target_sid = user_data['sid'] |
| break |
| |
| if target_sid: |
| emit('webrtc_answer', { |
| 'answer': data['answer'], |
| 'from_user': data.get('from_user') |
| }, room=target_sid) |
|
|
| @socketio.on('webrtc_ice_candidate') |
| def handle_webrtc_ice_candidate(data): |
| target_username = data.get('to_user') |
| target_sid = None |
| |
| for user_data in users.values(): |
| if user_data['username'] == target_username: |
| target_sid = user_data['sid'] |
| break |
| |
| if target_sid: |
| emit('webrtc_ice_candidate', { |
| 'candidate': data['candidate'], |
| 'from_user': data.get('from_user') |
| }, room=target_sid) |
|
|
| @app.route('/voice/<filename>') |
| def get_voice_message(filename): |
| if filename in voice_messages: |
| return send_file(filename, mimetype='audio/webm') |
| return 'File not found', 404 |
|
|
| def cleanup_temp_files(): |
| """Очистка временных файлов""" |
| import glob |
| for filename in glob.glob("voice_*.webm"): |
| try: |
| os.remove(filename) |
| except: |
| pass |
|
|
| if __name__ == '__main__': |
| try: |
| print("Запуск мобильного мессенджера...") |
| print("Порт: 7860") |
| socketio.run( |
| app, |
| host='0.0.0.0', |
| port=7860, |
| debug=False, |
| allow_unsafe_werkzeug=True |
| ) |
| finally: |
| cleanup_temp_files() |
