 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 Network Connection Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
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;
font-weight: bold;
}
.status.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status.info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.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;
}
input[type="text"] {
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
width: 300px;
margin: 5px;
}
.test-result {
margin: 10px 0;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>🔌 WebSocket Network Connection Test</h1>
<div class="container">
<h2>Connection Test</h2>
<div id="connectionStatus" class="status info">Ready to test</div>
<p><strong>Current URL:</strong> <span id="currentUrl"></span></p>
<p><strong>Test WebSocket URL:</strong> <span id="wsUrl"></span></p>
<div>
<input type="text" id="customUrl" placeholder="Custom WebSocket URL (optional)">
<button onclick="testConnection()">Test Connection</button>
<button onclick="testWithAuth()">Test with Auth</button>
<button onclick="clearLog()">Clear Log</button>
</div>
</div>
<div class="container">
<h2>Test Results</h2>
<div id="testResults"></div>
</div>
<div class="container">
<h2>Debug Log</h2>
<div id="debugLog" class="log">Ready to test WebSocket connection...</div>
</div>
<script>
let ws = null;
let testResults = [];
function log(message) {
const logElement = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
logElement.textContent += `[${timestamp}] ${message}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
function updateStatus(message, type = 'info') {
const statusElement = document.getElementById('connectionStatus');
statusElement.textContent = message;
statusElement.className = `status ${type}`;
}
function addTestResult(test, result, details = '') {
testResults.push({ test, result, details, timestamp: new Date() });
updateTestResults();
}
function updateTestResults() {
const resultsElement = document.getElementById('testResults');
let html = '';
testResults.forEach(result => {
const statusClass = result.result === 'PASS' ? 'success' : 'error';
html += `
<div class="test-result status ${statusClass}">
<strong>${result.test}:</strong> ${result.result}<br>
${result.details ? `<small>${result.details}</small><br>` : ''}
<small>Time: ${result.timestamp.toLocaleTimeString()}</small>
</div>
`;
});
resultsElement.innerHTML = html || '<p>No tests run yet.</p>';
}
function getWebSocketUrl(withAuth = false) {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
let url = `${protocol}//${window.location.host}/_ws`;
if (withAuth) {
// Add mock authentication parameters
const userId = 'test-user-' + Date.now();
const user = encodeURIComponent(JSON.stringify({
id: userId,
name: 'Test User',
email: 'test@example.com'
}));
const connId = 'test-conn-' + Date.now();
url += `?userId=${userId}&user=${user}&connId=${connId}`;
}
return url;
}
function testConnection() {
const customUrl = document.getElementById('customUrl').value.trim();
const wsUrl = customUrl || getWebSocketUrl();
log(`🔄 Testing WebSocket connection to: ${wsUrl}`);
updateStatus('Testing connection...', 'info');
// Close existing connection if any
if (ws) {
ws.close();
ws = null;
}
try {
ws = new WebSocket(wsUrl);
const startTime = Date.now();
let connected = false;
ws.onopen = function(event) {
connected = true;
const duration = Date.now() - startTime;
log(`✅ WebSocket connected successfully in ${duration}ms`);
updateStatus('Connection successful!', 'success');
addTestResult('WebSocket Connection', 'PASS', `Connected in ${duration}ms`);
// Test sending a message
try {
ws.send(JSON.stringify({ type: 'test', message: 'Hello from test' }));
log('📤 Test message sent');
addTestResult('Send Message', 'PASS', 'Test message sent successfully');
} catch (error) {
log(`❌ Failed to send test message: ${error.message}`);
addTestResult('Send Message', 'FAIL', error.message);
}
};
ws.onmessage = function(event) {
log(`📨 Received message: ${event.data}`);
try {
const message = JSON.parse(event.data);
addTestResult('Receive Message', 'PASS', `Type: ${message.type}`);
} catch (error) {
addTestResult('Receive Message', 'PASS', 'Raw message received');
}
};
ws.onerror = function(error) {
log(`❌ WebSocket error: ${error}`);
updateStatus('Connection error!', 'error');
addTestResult('WebSocket Connection', 'FAIL', 'Connection error occurred');
};
ws.onclose = function(event) {
const duration = Date.now() - startTime;
log(`🔌 WebSocket closed - Code: ${event.code}, Reason: ${event.reason || 'No reason'}, Clean: ${event.wasClean}`);
if (!connected) {
updateStatus('Connection failed!', 'error');
addTestResult('WebSocket Connection', 'FAIL', `Code: ${event.code}, Reason: ${event.reason || 'No reason'}`);
} else {
updateStatus('Connection closed', 'info');
}
ws = null;
};
// Set a timeout for connection
setTimeout(() => {
if (ws && ws.readyState === WebSocket.CONNECTING) {
log('⏰ Connection timeout - closing');
ws.close();
updateStatus('Connection timeout!', 'error');
addTestResult('WebSocket Connection', 'FAIL', 'Connection timeout after 10 seconds');
}
}, 10000);
} catch (error) {
log(`❌ Failed to create WebSocket: ${error.message}`);
updateStatus('Failed to create WebSocket!', 'error');
addTestResult('WebSocket Creation', 'FAIL', error.message);
}
}
function testWithAuth() {
const wsUrl = getWebSocketUrl(true);
document.getElementById('customUrl').value = wsUrl;
testConnection();
}
function clearLog() {
document.getElementById('debugLog').textContent = '';
testResults = [];
updateTestResults();
}
// Initialize page
window.addEventListener('load', function() {
document.getElementById('currentUrl').textContent = window.location.href;
document.getElementById('wsUrl').textContent = getWebSocketUrl();
log('🚀 WebSocket test tool loaded');
log(`Current URL: ${window.location.href}`);
log(`Protocol: ${window.location.protocol}`);
log(`Host: ${window.location.host}`);
log(`WebSocket URL: ${getWebSocketUrl()}`);
log('');
log('Click "Test Connection" to start testing...');
});
</script>
</body>
</html>