BodyBalanceEvaluation/backend/test_socketio.html

58 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Test</title>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
<h1>Socket.IO Test Page</h1>
<div id="status">未连接</div>
<button onclick="sendStartVideo()">发送 start_video 事件</button>
<button onclick="sendTestEvent()">发送 test_event 事件</button>
<div id="messages"></div>
<script>
const socket = io('http://localhost:5001');
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
function addMessage(message) {
const div = document.createElement('div');
div.textContent = new Date().toLocaleTimeString() + ': ' + message;
messagesDiv.appendChild(div);
}
socket.on('connect', function() {
statusDiv.textContent = '已连接 - Socket ID: ' + socket.id;
addMessage('连接成功');
});
socket.on('disconnect', function() {
statusDiv.textContent = '已断开连接';
addMessage('连接断开');
});
socket.on('connect_response', function(data) {
addMessage('收到连接响应: ' + JSON.stringify(data));
});
socket.on('video_status', function(data) {
addMessage('收到视频状态: ' + JSON.stringify(data));
});
socket.on('test_response', function(data) {
addMessage('收到测试响应: ' + JSON.stringify(data));
});
function sendStartVideo() {
addMessage('发送 start_video 事件');
socket.emit('start_video', {});
}
function sendTestEvent() {
addMessage('发送 test_event 事件');
socket.emit('test_event', {});
}
</script>
</body>
</html>