mirror of
https://github.com/MatrixSeven/file-transfer-go.git
synced 2026-02-04 03:25:03 +08:00
128 lines
4.5 KiB
HTML
128 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket调试测试</title>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket连接测试</h1>
|
|
<div>
|
|
<input type="text" id="testCode" placeholder="输入取件码" maxlength="6" style="padding: 10px; margin: 10px;">
|
|
<select id="testRole" style="padding: 10px; margin: 10px;">
|
|
<option value="sender">发送方</option>
|
|
<option value="receiver">接收方</option>
|
|
</select>
|
|
<button onclick="testWebSocket()" style="padding: 10px; margin: 10px;">测试连接</button>
|
|
<button onclick="closeWebSocket()" style="padding: 10px; margin: 10px;">关闭连接</button>
|
|
<button onclick="clearLog()" style="padding: 10px; margin: 10px;">清空日志</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>连接状态：<span id="status">未连接</span></h2>
|
|
<h3>日志：</h3>
|
|
<div id="log" style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; font-family: monospace; background: #f5f5f5;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let testSocket = null;
|
|
let logElement = document.getElementById('log');
|
|
let statusElement = document.getElementById('status');
|
|
|
|
function log(message) {
|
|
const time = new Date().toLocaleTimeString();
|
|
logElement.innerHTML += `[${time}] ${message}<br>`;
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
console.log(`[${time}] ${message}`);
|
|
}
|
|
|
|
function updateStatus(status) {
|
|
statusElement.textContent = status;
|
|
log(`状态更新: ${status}`);
|
|
}
|
|
|
|
function testWebSocket() {
|
|
const code = document.getElementById('testCode').value.trim();
|
|
const role = document.getElementById('testRole').value;
|
|
|
|
if (!code) {
|
|
log('错误: 请输入取件码');
|
|
return;
|
|
}
|
|
|
|
if (testSocket) {
|
|
log('关闭现有连接...');
|
|
testSocket.close();
|
|
testSocket = null;
|
|
}
|
|
|
|
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${window.location.host}/ws/p2p?code=${code}&role=${role}`;
|
|
|
|
log(`尝试连接: ${wsUrl}`);
|
|
updateStatus('连接中...');
|
|
|
|
try {
|
|
testSocket = new WebSocket(wsUrl);
|
|
|
|
testSocket.onopen = function(event) {
|
|
log('✅ WebSocket连接成功建立');
|
|
updateStatus('已连接');
|
|
};
|
|
|
|
testSocket.onmessage = function(event) {
|
|
let message = event.data;
|
|
try {
|
|
message = JSON.parse(event.data);
|
|
log(`📥 收到消息 (${message.type}): ${JSON.stringify(message, null, 2)}`);
|
|
} catch (e) {
|
|
log(`📥 收到原始消息: ${message}`);
|
|
}
|
|
};
|
|
|
|
testSocket.onerror = function(error) {
|
|
log(`❌ WebSocket错误: ${error}`);
|
|
updateStatus('连接错误');
|
|
};
|
|
|
|
testSocket.onclose = function(event) {
|
|
log(`🔌 连接关闭 - 代码: ${event.code}, 原因: ${event.reason}, 是否干净关闭: ${event.wasClean}`);
|
|
updateStatus('连接已关闭');
|
|
testSocket = null;
|
|
};
|
|
|
|
// 连接超时检测
|
|
setTimeout(() => {
|
|
if (testSocket && testSocket.readyState === WebSocket.CONNECTING) {
|
|
log('⏰ 连接超时 (10秒)');
|
|
testSocket.close();
|
|
}
|
|
}, 10000);
|
|
|
|
} catch (error) {
|
|
log(`❌ 创建WebSocket失败: ${error.message}`);
|
|
updateStatus('创建失败');
|
|
}
|
|
}
|
|
|
|
function closeWebSocket() {
|
|
if (testSocket) {
|
|
log('手动关闭连接...');
|
|
testSocket.close();
|
|
testSocket = null;
|
|
} else {
|
|
log('没有活动连接');
|
|
}
|
|
}
|
|
|
|
function clearLog() {
|
|
logElement.innerHTML = '';
|
|
}
|
|
|
|
// 页面加载时显示信息
|
|
window.onload = function() {
|
|
log('WebSocket测试页面已加载');
|
|
log('请先创建一个房间（使用取件码），然后测试连接');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|