shan
c66b290677
- 禁用TCP红绿灯服务器,改用MQTT订阅获取信号状态 - 新增MqttConfig配置类和TrafficLightMqttSubscriber订阅器 - 重构VehicleCommandInfoWebSocketHandler,根据红绿灯信号实时发送车辆控制指令 - 添加Eclipse Paho MQTT客户端依赖 - 新增接口文档和MQTT核心代码总结文档 - 添加WebSocket测试页面
163 lines
7.3 KiB
HTML
163 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WebSocket 测试</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
|
|
.success { background-color: #d4edda; border-color: #c3e6cb; }
|
|
.error { background-color: #f8d7da; border-color: #f5c6cb; }
|
|
.log { background-color: #f8f9fa; padding: 10px; margin-top: 10px; border-radius: 3px; font-family: monospace; max-height: 300px; overflow-y: auto; }
|
|
button { padding: 8px 16px; margin: 5px; cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket 连接测试</h1>
|
|
|
|
<div class="test-section">
|
|
<h3>测试 1: /collision 端点</h3>
|
|
<button onclick="testCollision()">连接 /collision</button>
|
|
<button onclick="closeCollision()">关闭连接</button>
|
|
<div id="collisionStatus" style="margin-top: 10px;">状态: 未连接</div>
|
|
<div id="collisionLog" class="log"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>测试 2: /VehicleCommandInfo 端点</h3>
|
|
<button onclick="testVehicleCommand()">连接 /VehicleCommandInfo</button>
|
|
<button onclick="closeVehicleCommand()">关闭连接</button>
|
|
<div id="vehicleStatus" style="margin-top: 10px;">状态: 未连接</div>
|
|
<div id="vehicleLog" class="log"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let collisionWs = null;
|
|
let vehicleWs = null;
|
|
|
|
function log(elementId, message) {
|
|
const logElement = document.getElementById(elementId);
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logElement.innerHTML += `[${timestamp}] ${message}<br>`;
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
function testCollision() {
|
|
if (collisionWs) {
|
|
log('collisionLog', '已经存在连接，请先关闭');
|
|
return;
|
|
}
|
|
|
|
log('collisionLog', '尝试连接 ws://localhost:8080/collision...');
|
|
|
|
try {
|
|
collisionWs = new WebSocket('ws://localhost:8080/collision');
|
|
|
|
collisionWs.onopen = function(event) {
|
|
document.getElementById('collisionStatus').innerHTML = '状态: <span style="color: green">已连接</span>';
|
|
document.getElementById('collisionStatus').parentElement.classList.add('success');
|
|
log('collisionLog', '✅ 连接成功! readyState: ' + collisionWs.readyState);
|
|
};
|
|
|
|
collisionWs.onmessage = function(event) {
|
|
log('collisionLog', '📨 收到消息: ' + event.data);
|
|
};
|
|
|
|
collisionWs.onerror = function(event) {
|
|
document.getElementById('collisionStatus').innerHTML = '状态: <span style="color: red">错误</span>';
|
|
document.getElementById('collisionStatus').parentElement.classList.add('error');
|
|
log('collisionLog', '❌ 连接错误');
|
|
log('collisionLog', '错误详情: ' + JSON.stringify({
|
|
type: event.type,
|
|
target: event.target ? event.target.url : 'N/A',
|
|
readyState: event.target ? event.target.readyState : 'N/A'
|
|
}));
|
|
};
|
|
|
|
collisionWs.onclose = function(event) {
|
|
document.getElementById('collisionStatus').innerHTML = '状态: <span style="color: orange">已关闭</span>';
|
|
document.getElementById('collisionStatus').parentElement.classList.remove('success', 'error');
|
|
log('collisionLog', '🔌 连接关闭');
|
|
log('collisionLog', '关闭代码: ' + event.code + ', 原因: ' + event.reason);
|
|
collisionWs = null;
|
|
};
|
|
} catch (error) {
|
|
log('collisionLog', '❌ 异常: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function testVehicleCommand() {
|
|
if (vehicleWs) {
|
|
log('vehicleLog', '已经存在连接，请先关闭');
|
|
return;
|
|
}
|
|
|
|
log('vehicleLog', '尝试连接 ws://localhost:8080/VehicleCommandInfo...');
|
|
|
|
try {
|
|
vehicleWs = new WebSocket('ws://localhost:8080/VehicleCommandInfo');
|
|
|
|
vehicleWs.onopen = function(event) {
|
|
document.getElementById('vehicleStatus').innerHTML = '状态: <span style="color: green">已连接</span>';
|
|
document.getElementById('vehicleStatus').parentElement.classList.add('success');
|
|
log('vehicleLog', '✅ 连接成功! readyState: ' + vehicleWs.readyState);
|
|
};
|
|
|
|
vehicleWs.onmessage = function(event) {
|
|
log('vehicleLog', '📨 收到消息: ' + event.data);
|
|
};
|
|
|
|
vehicleWs.onerror = function(event) {
|
|
document.getElementById('vehicleStatus').innerHTML = '状态: <span style="color: red">错误</span>';
|
|
document.getElementById('vehicleStatus').parentElement.classList.add('error');
|
|
log('vehicleLog', '❌ 连接错误');
|
|
log('vehicleLog', '错误详情: ' + JSON.stringify({
|
|
type: event.type,
|
|
target: event.target ? event.target.url : 'N/A',
|
|
readyState: event.target ? event.target.readyState : 'N/A'
|
|
}, null, 2));
|
|
|
|
// 尝试获取更多错误信息
|
|
if (event.target) {
|
|
log('vehicleLog', 'WebSocket 对象属性:');
|
|
for (let key in event.target) {
|
|
try {
|
|
const value = event.target[key];
|
|
if (typeof value !== 'function') {
|
|
log('vehicleLog', ` ${key}: ${value}`);
|
|
}
|
|
} catch (e) {
|
|
// 忽略无法访问的属性
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
vehicleWs.onclose = function(event) {
|
|
document.getElementById('vehicleStatus').innerHTML = '状态: <span style="color: orange">已关闭</span>';
|
|
document.getElementById('vehicleStatus').parentElement.classList.remove('success', 'error');
|
|
log('vehicleLog', '🔌 连接关闭');
|
|
log('vehicleLog', '关闭代码: ' + event.code + ', 原因: ' + event.reason);
|
|
vehicleWs = null;
|
|
};
|
|
} catch (error) {
|
|
log('vehicleLog', '❌ 异常: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function closeCollision() {
|
|
if (collisionWs) {
|
|
collisionWs.close();
|
|
log('collisionLog', '主动关闭连接');
|
|
}
|
|
}
|
|
|
|
function closeVehicleCommand() {
|
|
if (vehicleWs) {
|
|
vehicleWs.close();
|
|
log('vehicleLog', '主动关闭连接');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |