135 lines
5.1 KiB
HTML
135 lines
5.1 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; }
|
|
.command { color: #800080; } /* 紫色显示控制指令 */
|
|
</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';
|
|
let message = '收到消息:\n' + formattedData;
|
|
|
|
switch (data.type) {
|
|
case 'position_update':
|
|
type = 'position';
|
|
break;
|
|
case 'collision_warning':
|
|
type = 'warning';
|
|
break;
|
|
case 'vehicle_command':
|
|
type = 'command';
|
|
// 为控制指令添加中文描述
|
|
const commandTypes = {
|
|
'SIGNAL': '信号灯',
|
|
'ALERT': '告警',
|
|
'WARNING': '预警',
|
|
'RESUME': '恢复',
|
|
'PARKING': '安全停靠'
|
|
};
|
|
const reasons = {
|
|
'TRAFFIC_LIGHT': '红绿灯控制',
|
|
'AIRCRAFT_CROSSING': '航空器交叉',
|
|
'SPECIAL_VEHICLE': '特勤车辆',
|
|
'AIRCRAFT_PUSH': '航空器推出',
|
|
'RESUME_TRAFFIC': '恢复通行',
|
|
'PARKING_SIDE': '安全停靠'
|
|
};
|
|
message = `收到车辆控制指令:\n车辆: ${data.vehicleId}\n` +
|
|
`指令类型: ${commandTypes[data.commandType] || data.commandType}\n` +
|
|
`原因: ${reasons[data.reason] || data.reason}\n` +
|
|
(data.targetLatitude !== undefined ? `目标位置: (${data.targetLatitude}, ${data.targetLongitude})\n` : '') +
|
|
(data.signalState ? `信号灯状态: ${data.signalState}\n` : '') +
|
|
(data.intersectionId ? `路口ID: ${data.intersectionId}\n` : '') +
|
|
`时间戳: ${new Date(data.timestamp/1000000).toLocaleString()}`;
|
|
break;
|
|
}
|
|
|
|
log(message, 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> |