 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/public_html/public/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Connections Debug</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
h1, h2 {
color: #333;
}
.user-card {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 15px;
margin: 10px 0;
border-radius: 4px;
font-family: monospace;
}
.user-card.online {
border-left: 4px solid #28a745;
}
.user-card.offline {
border-left: 4px solid #dc3545;
}
.user-id {
font-weight: bold;
color: #007bff;
word-break: break-all;
}
.status {
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
}
.status.open {
background-color: #d4edda;
color: #155724;
}
.status.closed {
background-color: #f8d7da;
color: #721c24;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
.log {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 15px;
border-radius: 4px;
height: 200px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
white-space: pre-wrap;
}
.highlight {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>🔍 WebSocket Connections Debug</h1>
<div class="container">
<h2>Current Issue Analysis</h2>
<div class="highlight">
<strong>Problem:</strong> Video calls show "recipient offline" but users appear connected.<br>
<strong>From Logs:</strong> Calls to user ID <code>cmc6lkewu0000vj0c0v3s7otj</code> fail.<br>
<strong>This tool will:</strong> Show actual connected user IDs and help identify the mismatch.
</div>
</div>
<div class="container">
<h2>Connected WebSocket Users</h2>
<div id="usersList">Loading...</div>
<button onclick="refreshUsers()">Refresh</button>
<button onclick="analyzeIssue()">Analyze Video Call Issue</button>
</div>
<div class="container">
<h2>Debug Log</h2>
<div id="debugLog" class="log">Click "Refresh" to load connected users...</div>
</div>
<script>
const PROBLEM_USER_ID = 'cmc6lkewu0000vj0c0v3s7otj';
function log(message) {
const logElement = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
logElement.textContent += `[${timestamp}] ${message}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
async function refreshUsers() {
try {
log('🔄 Fetching connected WebSocket users...');
const response = await fetch('/debug/websocket-users');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
displayUsers(data);
log(`✅ Found ${data.totalConnectedUsers} connected users`);
} catch (error) {
log(`❌ Error fetching users: ${error.message}`);
document.getElementById('usersList').innerHTML = `
<div class="user-card offline">
<strong>Error:</strong> ${error.message}<br>
<em>Make sure the server is running and the debug endpoint is available.</em>
</div>
`;
}
}
function displayUsers(data) {
const usersContainer = document.getElementById('usersList');
if (data.totalConnectedUsers === 0) {
usersContainer.innerHTML = `
<div class="user-card offline">
<strong>No users connected</strong><br>
<em>Make sure users are logged in and WebSocket connections are established.</em>
</div>
`;
return;
}
let html = `<p><strong>Total Connected Users:</strong> ${data.totalConnectedUsers}</p>`;
html += `<p><strong>Last Updated:</strong> ${new Date(data.timestamp).toLocaleString()}</p>`;
data.users.forEach(user => {
const isOnline = user.wsStateText === 'OPEN';
const isProblemUser = user.userId === PROBLEM_USER_ID;
html += `
<div class="user-card ${isOnline ? 'online' : 'offline'}" ${isProblemUser ? 'style="border: 2px solid #ffc107; background-color: #fff3cd;"' : ''}>
${isProblemUser ? '<strong>⚠️ THIS IS THE PROBLEM USER FROM LOGS!</strong><br>' : ''}
<div class="user-id">User ID: ${user.userId}</div>
<strong>Name:</strong> ${user.userName || 'Unknown'}<br>
<strong>Email:</strong> ${user.userEmail || 'Unknown'}<br>
<strong>Connection ID:</strong> ${user.connectionId}<br>
<strong>WebSocket State:</strong> <span class="status ${user.wsStateText === 'OPEN' ? 'open' : 'closed'}">${user.wsStateText}</span><br>
<strong>Is Alive:</strong> ${user.isAlive ? '✅ Yes' : '❌ No'}<br>
<strong>Rooms:</strong> ${user.rooms.length > 0 ? user.rooms.join(', ') : 'None'}
</div>
`;
});
usersContainer.innerHTML = html;
}
function analyzeIssue() {
log('🔍 === VIDEO CALL ISSUE ANALYSIS ===');
log('');
log(`Problem: Video calls to user ID "${PROBLEM_USER_ID}" show "recipient offline"`);
log('');
// Check if we have user data
const usersContainer = document.getElementById('usersList');
const userCards = usersContainer.querySelectorAll('.user-card');
if (userCards.length === 0) {
log('❌ No user data available. Click "Refresh" first.');
return;
}
let foundProblemUser = false;
let totalOnlineUsers = 0;
const allUserIds = [];
userCards.forEach(card => {
const userIdElement = card.querySelector('.user-id');
if (userIdElement) {
const userId = userIdElement.textContent.replace('User ID: ', '');
allUserIds.push(userId);
const isOnline = card.classList.contains('online');
if (isOnline) totalOnlineUsers++;
if (userId === PROBLEM_USER_ID) {
foundProblemUser = true;
log(`✅ Found problem user in connected users:`);
log(` - User ID: ${userId}`);
log(` - Status: ${isOnline ? 'ONLINE' : 'OFFLINE'}`);
log(` - This user ${isOnline ? 'SHOULD' : 'SHOULD NOT'} receive video calls`);
}
}
});
log('');
log('📊 Summary:');
log(` - Total connected users: ${allUserIds.length}`);
log(` - Online users: ${totalOnlineUsers}`);
log(` - Problem user found: ${foundProblemUser ? 'YES' : 'NO'}`);
log('');
if (!foundProblemUser) {
log('🎯 ROOT CAUSE IDENTIFIED:');
log(` The user ID "${PROBLEM_USER_ID}" is NOT in the connected users list.`);
log(' This explains why video calls show "recipient offline".');
log('');
log('💡 POSSIBLE SOLUTIONS:');
log(' 1. User needs to refresh their browser and log in again');
log(' 2. Check if user is logged into a different account');
log(' 3. Clear browser cache and cookies');
log(' 4. Check if user is using a different browser tab/window');
log(' 5. Verify user authentication is working properly');
} else {
log('🎯 USER IS CONNECTED:');
log(' The user exists in connected users but video calls still fail.');
log('');
log('💡 POSSIBLE SOLUTIONS:');
log(' 1. Check WebRTC signaling message format');
log(' 2. Verify recipientId is being sent correctly');
log(' 3. Check for timing issues in WebSocket message handling');
log(' 4. Review server WebRTC signaling logic');
}
log('');
log('📋 All Connected User IDs:');
allUserIds.forEach((id, index) => {
log(` ${index + 1}. ${id}`);
});
log('');
log('=== END ANALYSIS ===');
}
// Auto-load users when page loads
window.addEventListener('load', refreshUsers);
</script>
</body>
</html>