103 lines
3.0 KiB
HTML
103 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket 测试</title>
|
|
<style>
|
|
#messages {
|
|
width: 100%;
|
|
height: 800px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
}
|
|
.error { color: red; }
|
|
.success { color: green; }
|
|
.info { color: blue; }
|
|
.position { color: #666; }
|
|
.warning { color: #f90; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>WebSocket 测试客户端</h2>
|
|
<div id="messages"></div>
|
|
<div>
|
|
<button onclick="connect()">连接</button>
|
|
<button onclick="disconnect()">断开</button>
|
|
<button onclick="clearMessages()">清空日志</button>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
const messagesDiv = document.getElementById('messages');
|
|
|
|
function log(message, type = 'info') {
|
|
const div = document.createElement('div');
|
|
div.className = type;
|
|
div.textContent = `${new Date().toLocaleTimeString()} - ${message}`;
|
|
messagesDiv.appendChild(div);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
function clearMessages() {
|
|
messagesDiv.innerHTML = '';
|
|
}
|
|
|
|
function connect() {
|
|
if (ws) {
|
|
log('已经连接，请先断开', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
ws = new WebSocket('ws://localhost:8010');
|
|
|
|
ws.onopen = () => {
|
|
log('连接成功', 'success');
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
log('连接关闭', 'info');
|
|
ws = null;
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
log('发生错误: ' + error, 'error');
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const formattedData = JSON.stringify(data, null, 2);
|
|
|
|
// 根据消息类型使用不同的样式
|
|
let type = 'info';
|
|
if (data.type === 'position_update') {
|
|
type = 'position';
|
|
} else if (data.type === 'collision_warning') {
|
|
type = 'warning';
|
|
}
|
|
|
|
log('收到消息:\n' + formattedData, type);
|
|
} catch (e) {
|
|
log('收到消息: ' + event.data, 'info');
|
|
}
|
|
};
|
|
} catch (error) {
|
|
log('连接失败: ' + error, 'error');
|
|
}
|
|
}
|
|
|
|
function disconnect() {
|
|
if (!ws) {
|
|
log('未连接', 'error');
|
|
return;
|
|
}
|
|
|
|
ws.close();
|
|
ws = null;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |