 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 Test</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 800px;
margin: 40px auto;
padding: 20px;
line-height: 1.6;
}
.status {
padding: 15px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
}
.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.log {
background: #f8f9fa;
border: 1px solid #dee2e6;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
max-height: 300px;
overflow-y: auto;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>🔌 WebSocket Connection Test</h1>
<div id="status" class="status info">Ready to test...</div>
<div>
<button onclick="testWebSocket()">Test WebSocket Connection</button>
<button onclick="clearLog()">Clear Log</button>
</div>
<h2>Connection Details</h2>
<div id="details" class="info">
<strong>Current URL:</strong> <span id="currentUrl"></span><br>
<strong>Protocol:</strong> <span id="protocol"></span><br>
<strong>Host:</strong> <span id="host"></span><br>
<strong>WebSocket URL:</strong> <span id="wsUrl"></span>
</div>
<h2>Connection Log</h2>
<div id="log" class="log">Click "Test WebSocket Connection" to start...</div>
<script>
let ws = null;
// Update page details
document.getElementById('currentUrl').textContent = window.location.href;
document.getElementById('protocol').textContent = window.location.protocol;
document.getElementById('host').textContent = window.location.host;
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/_ws?userId=test&user=${encodeURIComponent(JSON.stringify({id: 'test', name: 'Test User'}))}&connId=test_${Date.now()}`;
document.getElementById('wsUrl').textContent = wsUrl;
function log(message) {
const logDiv = document.getElementById('log');
const timestamp = new Date().toLocaleTimeString();
logDiv.innerHTML += `[${timestamp}] ${message}\n`;
logDiv.scrollTop = logDiv.scrollHeight;
}
function setStatus(message, type = 'info') {
const statusDiv = document.getElementById('status');
statusDiv.textContent = message;
statusDiv.className = `status ${type}`;
}
function clearLog() {
document.getElementById('log').innerHTML = 'Log cleared...\n';
}
function testWebSocket() {
if (ws) {
ws.close();
ws = null;
}
log('🔄 Starting WebSocket connection test...');
setStatus('Connecting...', 'info');
try {
ws = new WebSocket(wsUrl);
const timeout = setTimeout(() => {
if (ws.readyState === WebSocket.CONNECTING) {
log('❌ Connection timeout (10 seconds)');
setStatus('Connection timeout', 'error');
ws.close();
}
}, 10000);
ws.onopen = function(event) {
clearTimeout(timeout);
log('✅ WebSocket connection opened successfully!');
setStatus('Connected successfully!', 'success');
// Send a test ping
log('📤 Sending test ping...');
ws.send(JSON.stringify({ type: 'ping', test: true }));
};
ws.onmessage = function(event) {
log(`📥 Received message: ${event.data}`);
try {
const message = JSON.parse(event.data);
if (message.type === 'pong') {
log('🏓 Received pong response - connection is working!');
}
} catch (e) {
log('📄 Received non-JSON message');
}
};
ws.onclose = function(event) {
clearTimeout(timeout);
log(`🔌 WebSocket connection closed (code: ${event.code}, reason: ${event.reason})`);
if (event.code === 1000) {
setStatus('Connection closed normally', 'info');
} else {
setStatus(`Connection closed with error (code: ${event.code})`, 'error');
}
};
ws.onerror = function(error) {
clearTimeout(timeout);
log('❌ WebSocket error occurred');
console.error('WebSocket error:', error);
setStatus('Connection error', 'error');
};
} catch (error) {
log(`❌ Failed to create WebSocket: ${error.message}`);
setStatus('Failed to create WebSocket', 'error');
}
}
// Auto-test on page load
window.addEventListener('load', () => {
setTimeout(testWebSocket, 1000);
});
</script>
</body>
</html>