 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 Connection Debug Tool</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;
}
.status {
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.status.connected {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.disconnected {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.log {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 15px;
border-radius: 4px;
height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
white-space: pre-wrap;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.test-section {
border: 1px solid #dee2e6;
padding: 15px;
margin: 10px 0;
border-radius: 4px;
}
input[type="text"] {
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
width: 200px;
margin: 5px;
}
.user-list {
background-color: #e9ecef;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.user-item {
padding: 5px;
margin: 2px 0;
background-color: white;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<h1>🔍 WebSocket Connection Debug Tool</h1>
<div class="container">
<h2>Connection Status</h2>
<div id="connectionStatus" class="status disconnected">Disconnected</div>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<button onclick="clearLog()">Clear Log</button>
</div>
<div class="container">
<h2>Active Users & Connections</h2>
<div id="userList" class="user-list">
<div class="user-item">No users detected yet...</div>
</div>
<button onclick="requestUserList()">Refresh User List</button>
</div>
<div class="container">
<h2>Video Call Testing</h2>
<div class="test-section">
<h3>Test Video Call Signaling</h3>
<input type="text" id="recipientId" placeholder="Enter recipient user ID">
<button onclick="testVideoCallOffer()">Send Test Video Call Offer</button>
<button onclick="testEndCall()">Send End Call Signal</button>
</div>
<div class="test-section">
<h3>Connection Diagnostics</h3>
<button onclick="testPing()">Test Ping/Pong</button>
<button onclick="testDirectMessage()">Test Direct Message</button>
<button onclick="analyzeConnections()">Analyze All Connections</button>
</div>
</div>
<div class="container">
<h2>Debug Log</h2>
<div id="debugLog" class="log">Waiting for connection...</div>
</div>
<script>
let ws = null;
let currentUserId = null;
let connectedUsers = new Map();
function log(message) {
const logElement = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
logElement.textContent += `[${timestamp}] ${message}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
function updateConnectionStatus(connected) {
const statusElement = document.getElementById('connectionStatus');
if (connected) {
statusElement.textContent = 'Connected to WebSocket';
statusElement.className = 'status connected';
} else {
statusElement.textContent = 'Disconnected from WebSocket';
statusElement.className = 'status disconnected';
}
}
function updateUserList() {
const userListElement = document.getElementById('userList');
if (connectedUsers.size === 0) {
userListElement.innerHTML = '<div class="user-item">No users detected yet...</div>';
return;
}
let html = '';
connectedUsers.forEach((userData, userId) => {
html += `<div class="user-item">
<strong>User ID:</strong> ${userId}<br>
<strong>Name:</strong> ${userData.name || 'Unknown'}<br>
<strong>Status:</strong> ${userData.status || 'online'}<br>
<strong>Last Seen:</strong> ${userData.lastSeen ? new Date(userData.lastSeen).toLocaleTimeString() : 'Now'}
</div>`;
});
userListElement.innerHTML = html;
}
function connect() {
if (ws && ws.readyState < 2) {
log('⚠️ Already connected or connecting');
return;
}
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}`;
log(`🔄 Connecting to WebSocket: ${wsUrl}`);
try {
ws = new WebSocket(wsUrl);
ws.onopen = function(event) {
log('✅ WebSocket connected successfully');
updateConnectionStatus(true);
// Send authentication if we have session info
setTimeout(() => {
requestUserList();
}, 1000);
};
ws.onmessage = function(event) {
try {
const message = JSON.parse(event.data);
log(`📨 Received: ${message.type} - ${JSON.stringify(message, null, 2)}`);
// Handle different message types
switch (message.type) {
case 'pong':
log('🏓 Pong received - connection healthy');
break;
case 'ping':
log('🏓 Ping received - sending pong');
ws.send(JSON.stringify({ type: 'pong', timestamp: Date.now() }));
break;
case 'PRESENCE_UPDATE':
if (message.data) {
connectedUsers.set(message.data.userId, {
name: message.data.name || 'Unknown',
status: message.data.status,
lastSeen: message.data.timestamp
});
updateUserList();
log(`👤 User presence updated: ${message.data.userId} - ${message.data.status}`);
}
break;
case 'webrtc-offer':
case 'webrtc-answer':
case 'webrtc-ice-candidate':
case 'webrtc-end-call':
case 'webrtc-call-rejected':
log(`📞 WebRTC Signal: ${message.type} from ${message.senderId} (${message.senderName})`);
log(`📞 Signal data: ${JSON.stringify(message.data, null, 2)}`);
break;
case 'DIRECT_MESSAGE':
log(`💬 Direct message from ${message.data.sender?.name}: ${message.data.content}`);
break;
default:
log(`❓ Unknown message type: ${message.type}`);
}
} catch (error) {
log(`❌ Error parsing message: ${error.message}`);
log(`Raw message: ${event.data}`);
}
};
ws.onclose = function(event) {
log(`🔌 WebSocket disconnected - Code: ${event.code}, Reason: ${event.reason}`);
updateConnectionStatus(false);
ws = null;
};
ws.onerror = function(error) {
log(`❌ WebSocket error: ${error}`);
updateConnectionStatus(false);
};
} catch (error) {
log(`❌ Failed to create WebSocket connection: ${error.message}`);
updateConnectionStatus(false);
}
}
function disconnect() {
if (ws) {
log('🔌 Disconnecting WebSocket...');
ws.close(1000, 'Manual disconnect');
ws = null;
updateConnectionStatus(false);
}
}
function clearLog() {
document.getElementById('debugLog').textContent = '';
}
function requestUserList() {
if (!ws || ws.readyState !== WebSocket.OPEN) {
log('❌ Cannot request user list - not connected');
return;
}
// Send a message to trigger presence updates
ws.send(JSON.stringify({
type: 'REQUEST_PRESENCE_UPDATE',
data: { timestamp: Date.now() }
}));
log('📡 Requested presence updates from server');
}
function testVideoCallOffer() {
const recipientId = document.getElementById('recipientId').value.trim();
if (!recipientId) {
alert('Please enter a recipient user ID');
return;
}
if (!ws || ws.readyState !== WebSocket.OPEN) {
log('❌ Cannot send video call - not connected');
return;
}
const testSignal = {
type: 'offer',
sdp: 'v=0\r\no=- 123456789 123456789 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\n[TEST SIGNAL - NOT REAL SDP]'
};
const message = {
type: 'webrtc-offer',
data: {
recipientId: recipientId,
signal: testSignal,
senderName: 'Debug Tool User'
},
senderId: 'debug-tool-user-id',
senderName: 'Debug Tool User'
};
ws.send(JSON.stringify(message));
log(`📞 Sent test video call offer to: ${recipientId}`);
log(`📞 Message sent: ${JSON.stringify(message, null, 2)}`);
}
function testEndCall() {
const recipientId = document.getElementById('recipientId').value.trim();
if (!recipientId) {
alert('Please enter a recipient user ID');
return;
}
if (!ws || ws.readyState !== WebSocket.OPEN) {
log('❌ Cannot send end call - not connected');
return;
}
const message = {
type: 'webrtc-end-call',
data: {
recipientId: recipientId
}
};
ws.send(JSON.stringify(message));
log(`📞 Sent end call signal to: ${recipientId}`);
}
function testPing() {
if (!ws || ws.readyState !== WebSocket.OPEN) {
log('❌ Cannot send ping - not connected');
return;
}
ws.send(JSON.stringify({ type: 'ping', timestamp: Date.now() }));
log('🏓 Sent ping to server');
}
function testDirectMessage() {
const recipientId = document.getElementById('recipientId').value.trim();
if (!recipientId) {
alert('Please enter a recipient user ID');
return;
}
if (!ws || ws.readyState !== WebSocket.OPEN) {
log('❌ Cannot send direct message - not connected');
return;
}
const message = {
type: 'DIRECT_MESSAGE',
data: {
recipientId: recipientId,
content: 'Test message from debug tool',
type: 'TEXT',
senderId: 'debug-tool-user-id',
sender: { name: 'Debug Tool User' }
}
};
ws.send(JSON.stringify(message));
log(`💬 Sent test direct message to: ${recipientId}`);
}
function analyzeConnections() {
log('🔍 === CONNECTION ANALYSIS ===');
log(`WebSocket State: ${ws ? ws.readyState : 'null'}`);
log(`Current URL: ${window.location.href}`);
log(`Protocol: ${window.location.protocol}`);
log(`Connected Users: ${connectedUsers.size}`);
connectedUsers.forEach((userData, userId) => {
log(` - User: ${userId} (${userData.name}) - ${userData.status}`);
});
log('🔍 === END ANALYSIS ===');
}
// Auto-connect on page load
window.addEventListener('load', function() {
log('🚀 Debug tool loaded - click Connect to start');
});
</script>
</body>
</html>