79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
<!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> |