| <!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</title>
|
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
| <link rel="stylesheet" href="/static/css/connection-status.css">
|
| <style>
|
| body {
|
| padding-top: 50px;
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| min-height: 100vh;
|
| }
|
|
|
| .main-container {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| }
|
|
|
| .stats-card {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 30px;
|
| box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
| margin-bottom: 20px;
|
| }
|
|
|
| .big-stat {
|
| text-align: center;
|
| padding: 30px;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| border-radius: 15px;
|
| color: white;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .big-stat-value {
|
| font-size: 72px;
|
| font-weight: bold;
|
| margin: 0;
|
| animation: scaleIn 0.5s ease;
|
| }
|
|
|
| .big-stat-label {
|
| font-size: 20px;
|
| opacity: 0.9;
|
| margin-top: 10px;
|
| }
|
|
|
| @keyframes scaleIn {
|
| from { transform: scale(0.5); opacity: 0; }
|
| to { transform: scale(1); opacity: 1; }
|
| }
|
|
|
| .message-log {
|
| background: #f8f9fa;
|
| border-radius: 10px;
|
| padding: 20px;
|
| max-height: 400px;
|
| overflow-y: auto;
|
| font-family: 'Courier New', monospace;
|
| font-size: 13px;
|
| }
|
|
|
| .message-item {
|
| padding: 8px;
|
| margin-bottom: 5px;
|
| border-radius: 5px;
|
| animation: fadeIn 0.3s ease;
|
| }
|
|
|
| .message-sent {
|
| background: #e3f2fd;
|
| border-left: 3px solid #2196f3;
|
| }
|
|
|
| .message-received {
|
| background: #e8f5e9;
|
| border-left: 3px solid #4caf50;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(-10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .control-panel {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 10px;
|
| margin-top: 20px;
|
| }
|
|
|
| .btn-action {
|
| padding: 12px 20px;
|
| font-weight: 600;
|
| border-radius: 8px;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .btn-action:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div class="connection-status-bar" id="ws-connection-status">
|
| <div class="ws-connection-info">
|
| <span class="status-dot status-dot-offline" id="ws-status-dot"></span>
|
| <span class="ws-status-text" id="ws-status-text">در حال اتصال...</span>
|
| <span class="connection-spinner"></span>
|
| </div>
|
|
|
| <div class="online-users-widget">
|
| <div class="online-users-count">
|
| <span class="users-icon">👥</span>
|
| <span class="count-number" id="active-users-count">0</span>
|
| <span class="count-label">کاربر آنلاین</span>
|
| </div>
|
| <div class="online-users-count">
|
| <span class="users-icon">📊</span>
|
| <span class="count-number" id="total-sessions-count">0</span>
|
| <span class="count-label">جلسات کل</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="alerts-container" id="alerts-container"></div>
|
|
|
|
|
| <div class="main-container">
|
| <div class="big-stat">
|
| <div class="big-stat-value" id="active-users-big">0</div>
|
| <div class="big-stat-label">کاربر در حال حاضر آنلاین هستند</div>
|
| </div>
|
|
|
| <div class="row">
|
| <div class="col-md-6">
|
| <div class="stats-card">
|
| <h3>📊 آمار اتصالات</h3>
|
| <hr>
|
| <table class="table">
|
| <tr>
|
| <td>اتصالات فعال:</td>
|
| <td><strong id="stat-active">0</strong></td>
|
| </tr>
|
| <tr>
|
| <td>جلسات کل:</td>
|
| <td><strong id="stat-total">0</strong></td>
|
| </tr>
|
| <tr>
|
| <td>پیامهای ارسالی:</td>
|
| <td><strong id="stat-sent">0</strong></td>
|
| </tr>
|
| <tr>
|
| <td>پیامهای دریافتی:</td>
|
| <td><strong id="stat-received">0</strong></td>
|
| </tr>
|
| <tr>
|
| <td>Session ID:</td>
|
| <td><code id="session-id">-</code></td>
|
| </tr>
|
| </table>
|
|
|
| <h5>انواع کلاینتها:</h5>
|
| <div id="client-types-list"></div>
|
| </div>
|
| </div>
|
|
|
| <div class="col-md-6">
|
| <div class="stats-card">
|
| <h3>🎮 کنترلها</h3>
|
| <hr>
|
| <div class="control-panel">
|
| <button class="btn btn-primary btn-action" onclick="requestStats()">
|
| 📊 درخواست آمار
|
| </button>
|
| <button class="btn btn-success btn-action" onclick="subscribeToMarket()">
|
| ✅ Subscribe به Market
|
| </button>
|
| <button class="btn btn-warning btn-action" onclick="unsubscribeFromMarket()">
|
| ❌ Unsubscribe از Market
|
| </button>
|
| <button class="btn btn-info btn-action" onclick="sendPing()">
|
| 🏓 ارسال Ping
|
| </button>
|
| <button class="btn btn-danger btn-action" onclick="disconnect()">
|
| 🔌 قطع اتصال
|
| </button>
|
| <button class="btn btn-secondary btn-action" onclick="reconnect()">
|
| 🔄 اتصال مجدد
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="stats-card">
|
| <h3>📝 لاگ پیامها</h3>
|
| <hr>
|
| <div class="message-log" id="message-log"></div>
|
| <button class="btn btn-sm btn-outline-secondary mt-2" onclick="clearLog()">
|
| 🗑️ پاک کردن لاگ
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
| <script src="/static/js/websocket-client.js"></script>
|
|
|
| <script>
|
|
|
| if (window.wsClient) {
|
| window.wsClient.on('welcome', (message) => {
|
| document.getElementById('session-id').textContent = message.session_id;
|
| logMessage('دریافت', message);
|
| });
|
|
|
| window.wsClient.on('stats_update', (message) => {
|
| updateStatsDisplay(message.data);
|
| logMessage('دریافت', message);
|
| });
|
|
|
| window.wsClient.on('subscribed', (message) => {
|
| logMessage('دریافت', message);
|
| });
|
|
|
| window.wsClient.on('pong', (message) => {
|
| logMessage('دریافت', message);
|
| });
|
| }
|
|
|
|
|
| function requestStats() {
|
| if (window.wsClient) {
|
| window.wsClient.requestStats();
|
| logMessage('ارسال', { type: 'get_stats' });
|
| }
|
| }
|
|
|
| function subscribeToMarket() {
|
| if (window.wsClient) {
|
| window.wsClient.subscribe('market');
|
| logMessage('ارسال', { type: 'subscribe', group: 'market' });
|
| }
|
| }
|
|
|
| function unsubscribeFromMarket() {
|
| if (window.wsClient) {
|
| window.wsClient.unsubscribe('market');
|
| logMessage('ارسال', { type: 'unsubscribe', group: 'market' });
|
| }
|
| }
|
|
|
| function sendPing() {
|
| if (window.wsClient) {
|
| window.wsClient.send({ type: 'ping' });
|
| logMessage('ارسال', { type: 'ping' });
|
| }
|
| }
|
|
|
| function disconnect() {
|
| if (window.wsClient) {
|
| window.wsClient.close();
|
| logMessage('سیستم', 'قطع اتصال توسط کاربر');
|
| }
|
| }
|
|
|
| function reconnect() {
|
| if (window.wsClient) {
|
| window.wsClient.reconnectAttempts = 0;
|
| window.wsClient.connect();
|
| logMessage('سیستم', 'تلاش برای اتصال مجدد');
|
| }
|
| }
|
|
|
| function updateStatsDisplay(data) {
|
| document.getElementById('stat-active').textContent = data.active_connections || 0;
|
| document.getElementById('stat-total').textContent = data.total_sessions || 0;
|
| document.getElementById('stat-sent').textContent = data.messages_sent || 0;
|
| document.getElementById('stat-received').textContent = data.messages_received || 0;
|
|
|
|
|
| const bigValue = document.getElementById('active-users-big');
|
| bigValue.textContent = data.active_connections || 0;
|
| bigValue.style.animation = 'none';
|
| setTimeout(() => bigValue.style.animation = 'scaleIn 0.5s ease', 10);
|
| }
|
|
|
| function logMessage(direction, message) {
|
| const log = document.getElementById('message-log');
|
| const item = document.createElement('div');
|
| item.className = `message-item ${direction === 'ارسال' ? 'message-sent' : 'message-received'}`;
|
|
|
| const time = new Date().toLocaleTimeString('fa-IR');
|
| const content = typeof message === 'string' ? message : JSON.stringify(message, null, 2);
|
|
|
| item.innerHTML = `
|
| <strong>[${time}] ${direction}:</strong><br>
|
| <pre style="margin:5px 0 0 0">${content}</pre>
|
| `;
|
|
|
| log.appendChild(item);
|
| log.scrollTop = log.scrollHeight;
|
| }
|
|
|
| function clearLog() {
|
| document.getElementById('message-log').innerHTML = '';
|
| }
|
|
|
|
|
| setInterval(() => {
|
| if (window.wsClient && window.wsClient.isConnected) {
|
| requestStats();
|
| }
|
| }, 5000);
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
