| <!DOCTYPE html>
|
| <html lang="fa" dir="rtl">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>تست WebSocket - Crypto Monitor</title>
|
| <link rel="stylesheet" href="/static/css/connection-status.css">
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| min-height: 100vh;
|
| padding: 20px;
|
| }
|
|
|
| .container {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| }
|
|
|
| .card {
|
| background: white;
|
| border-radius: 20px;
|
| padding: 30px;
|
| margin-bottom: 20px;
|
| box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
| }
|
|
|
| h1 {
|
| color: #1f2937;
|
| margin-bottom: 10px;
|
| font-size: 32px;
|
| }
|
|
|
| h2 {
|
| color: #4b5563;
|
| margin-bottom: 20px;
|
| font-size: 24px;
|
| }
|
|
|
| .status-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| gap: 20px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .status-card {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| padding: 20px;
|
| border-radius: 15px;
|
| text-align: center;
|
| }
|
|
|
| .status-value {
|
| font-size: 48px;
|
| font-weight: bold;
|
| margin: 10px 0;
|
| }
|
|
|
| .status-label {
|
| font-size: 14px;
|
| opacity: 0.9;
|
| }
|
|
|
| .log-container {
|
| background: #1e293b;
|
| border-radius: 10px;
|
| padding: 20px;
|
| max-height: 400px;
|
| overflow-y: auto;
|
| font-family: 'Courier New', monospace;
|
| font-size: 13px;
|
| color: #e2e8f0;
|
| }
|
|
|
| .log-entry {
|
| padding: 8px;
|
| margin-bottom: 5px;
|
| border-left: 3px solid #3b82f6;
|
| background: rgba(59, 130, 246, 0.1);
|
| border-radius: 4px;
|
| }
|
|
|
| .log-time {
|
| color: #94a3b8;
|
| margin-left: 10px;
|
| }
|
|
|
| .btn {
|
| padding: 12px 24px;
|
| border: none;
|
| border-radius: 10px;
|
| font-size: 16px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: all 0.3s;
|
| margin: 5px;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| }
|
|
|
| .btn-primary:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
| }
|
|
|
| .btn-success {
|
| background: #10b981;
|
| color: white;
|
| }
|
|
|
| .btn-danger {
|
| background: #ef4444;
|
| color: white;
|
| }
|
|
|
| .controls {
|
| display: flex;
|
| gap: 10px;
|
| flex-wrap: wrap;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .pulse {
|
| animation: pulse 2s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
| 0%, 100% {
|
| opacity: 1;
|
| transform: scale(1);
|
| }
|
| 50% {
|
| opacity: 0.7;
|
| transform: scale(1.05);
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div id="ws-connection-status" class="ws-status-indicator disconnected">
|
| <div id="ws-status-dot" class="status-dot status-dot-offline"></div>
|
| <span id="ws-status-text" class="ws-status-text">در حال اتصال...</span>
|
| <div id="online-users-badge" class="badge badge-info" style="margin-right: 10px;">0</div>
|
| </div>
|
|
|
| <div class="container">
|
| <div class="card">
|
| <h1>🚀 تست WebSocket - Crypto Monitor</h1>
|
| <p style="color: #6b7280; margin-bottom: 20px;">
|
| این صفحه برای تست اتصال WebSocket و نمایش آمار بلادرنگ طراحی شده است.
|
| </p>
|
|
|
| <div class="status-grid">
|
| <div class="status-card">
|
| <div class="status-label">کاربران آنلاین</div>
|
| <div class="status-value pulse" id="active-users-count">0</div>
|
| </div>
|
| <div class="status-card">
|
| <div class="status-label">کل نشستها</div>
|
| <div class="status-value" id="total-sessions-count">0</div>
|
| </div>
|
| <div class="status-card">
|
| <div class="status-label">پیامهای دریافتی</div>
|
| <div class="status-value" id="messages-received">0</div>
|
| </div>
|
| <div class="status-card">
|
| <div class="status-label">پیامهای ارسالی</div>
|
| <div class="status-value" id="messages-sent">0</div>
|
| </div>
|
| </div>
|
|
|
| <div class="controls">
|
| <button class="btn btn-primary" onclick="requestStats()">📊 درخواست آمار</button>
|
| <button class="btn btn-success" onclick="sendPing()">🏓 Ping</button>
|
| <button class="btn btn-primary" onclick="subscribe('market')">📈 Subscribe Market</button>
|
| <button class="btn btn-danger" onclick="clearLogs()">🗑️ پاک کردن لاگ</button>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>📋 لاگ رویدادها</h2>
|
| <div id="log-container" class="log-container">
|
| <div class="log-entry">
|
| <span class="log-time">[--:--:--]</span>
|
| در انتظار اتصال WebSocket...
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>📊 اطلاعات Session</h2>
|
| <div id="session-info" style="font-family: monospace; background: #f3f4f6; padding: 15px; border-radius: 8px;">
|
| <strong>Session ID:</strong> <span id="session-id">-</span><br>
|
| <strong>وضعیت اتصال:</strong> <span id="connection-status">قطع شده</span><br>
|
| <strong>تلاشهای اتصال:</strong> <span id="reconnect-attempts">0</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="/static/js/websocket-client.js"></script>
|
| <script>
|
| let messageCount = 0;
|
| let sentCount = 0;
|
|
|
|
|
| setTimeout(() => {
|
| if (window.wsClient) {
|
| setupWebSocketHandlers();
|
| } else {
|
| addLog('❌ خطا: WebSocket Client آماده نیست');
|
| }
|
| }, 1000);
|
|
|
| function setupWebSocketHandlers() {
|
| addLog('✅ WebSocket Client آماده شد');
|
|
|
|
|
| window.wsClient.onConnection((connected) => {
|
| document.getElementById('connection-status').textContent = connected ? 'متصل ✅' : 'قطع شده ❌';
|
| document.getElementById('reconnect-attempts').textContent = window.wsClient.reconnectAttempts;
|
| });
|
|
|
|
|
| window.wsClient.on('welcome', (message) => {
|
| addLog(`🎉 خوش آمدید! Session ID: ${message.session_id}`);
|
| document.getElementById('session-id').textContent = message.session_id;
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| window.wsClient.on('stats_update', (message) => {
|
| addLog('📊 آمار جدید دریافت شد');
|
| const data = message.data;
|
|
|
| if (data.active_connections !== undefined) {
|
| document.getElementById('active-users-count').textContent = data.active_connections;
|
| }
|
| if (data.total_sessions !== undefined) {
|
| document.getElementById('total-sessions-count').textContent = data.total_sessions;
|
| }
|
|
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| window.wsClient.on('stats_response', (message) => {
|
| addLog('📡 پاسخ آمار Provider دریافت شد');
|
| console.log('Provider Stats:', message.data);
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| window.wsClient.on('pong', (message) => {
|
| addLog('🏓 Pong دریافت شد');
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| window.wsClient.on('subscribed', (message) => {
|
| addLog(`✅ Subscribe شد به: ${message.group}`);
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| window.wsClient.on('provider_stats', (message) => {
|
| addLog('📡 آمار Provider بهروز شد');
|
| messageCount++;
|
| updateMessageCount();
|
| });
|
|
|
|
|
| setTimeout(() => {
|
| requestStats();
|
| }, 2000);
|
| }
|
|
|
| function requestStats() {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| window.wsClient.requestStats();
|
| addLog('📤 درخواست آمار ارسال شد');
|
| sentCount++;
|
| updateSentCount();
|
| } else {
|
| addLog('⚠️ WebSocket متصل نیست');
|
| }
|
| }
|
|
|
| function sendPing() {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| window.wsClient.send({ type: 'ping' });
|
| addLog('📤 Ping ارسال شد');
|
| sentCount++;
|
| updateSentCount();
|
| } else {
|
| addLog('⚠️ WebSocket متصل نیست');
|
| }
|
| }
|
|
|
| function subscribe(group) {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| window.wsClient.subscribe(group);
|
| addLog(`📤 درخواست Subscribe به ${group} ارسال شد`);
|
| sentCount++;
|
| updateSentCount();
|
| } else {
|
| addLog('⚠️ WebSocket متصل نیست');
|
| }
|
| }
|
|
|
| function addLog(message) {
|
| const container = document.getElementById('log-container');
|
| const time = new Date().toLocaleTimeString('fa-IR');
|
| const entry = document.createElement('div');
|
| entry.className = 'log-entry';
|
| entry.innerHTML = `<span class="log-time">[${time}]</span> ${message}`;
|
| container.insertBefore(entry, container.firstChild);
|
|
|
|
|
| while (container.children.length > 50) {
|
| container.removeChild(container.lastChild);
|
| }
|
| }
|
|
|
| function clearLogs() {
|
| document.getElementById('log-container').innerHTML = '';
|
| addLog('🗑️ لاگها پاک شدند');
|
| }
|
|
|
| function updateMessageCount() {
|
| document.getElementById('messages-received').textContent = messageCount;
|
| }
|
|
|
| function updateSentCount() {
|
| document.getElementById('messages-sent').textContent = sentCount;
|
| }
|
|
|
|
|
| setInterval(() => {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| requestStats();
|
| }
|
| }, 10000);
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
