BodyBalanceEvaluation/backend/test_socketio_connection.html

79 lines
2.7 KiB
HTML
Raw Normal View History

2025-08-13 16:57:28 +08:00
<!DOCTYPE html>
<html>
<head>
<title>SocketIO连接测试</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
<h1>SocketIO连接测试</h1>
<div id="status">连接状态: 未连接</div>
<div id="messages"></div>
<button onclick="testConnection()">测试连接</button>
<button onclick="testEmit()">测试发送消息</button>
<script>
let socket;
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
function addMessage(msg) {
const div = document.createElement('div');
div.textContent = new Date().toLocaleTimeString() + ': ' + msg;
messagesDiv.appendChild(div);
}
function testConnection() {
try {
socket = io('http://127.0.0.1:5000', {
transports: ['polling', 'websocket'],
upgrade: true,
timeout: 10000
});
socket.on('connect', function() {
statusDiv.textContent = '连接状态: 已连接';
statusDiv.style.color = 'green';
addMessage('SocketIO连接成功');
});
socket.on('disconnect', function() {
statusDiv.textContent = '连接状态: 已断开';
statusDiv.style.color = 'red';
addMessage('SocketIO连接断开');
});
socket.on('connect_error', function(error) {
statusDiv.textContent = '连接状态: 连接错误';
statusDiv.style.color = 'red';
addMessage('连接错误: ' + error.message);
});
socket.on('video_status', function(data) {
addMessage('收到视频状态: ' + JSON.stringify(data));
});
socket.on('imu_status', function(data) {
addMessage('收到IMU状态: ' + JSON.stringify(data));
});
} catch (error) {
addMessage('连接异常: ' + error.message);
}
}
function testEmit() {
if (socket && socket.connected) {
socket.emit('start_video_stream', {});
addMessage('发送start_video_stream事件');
} else {
addMessage('Socket未连接无法发送消息');
}
}
// 自动测试连接
window.onload = function() {
testConnection();
};
</script>
</body>
</html>