146 lines
4.5 KiB
HTML
146 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ADXP WebSocket测试工具</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.control-panel {
|
|
background: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.log-container {
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
background: #fff;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
.log-entry {
|
|
margin: 2px 0;
|
|
padding: 2px;
|
|
}
|
|
.log-info { color: #0066cc; }
|
|
.log-success { color: #009900; }
|
|
.log-error { color: #cc0000; }
|
|
.log-warning { color: #ff9900; }
|
|
input, button {
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>ADXP WebSocket测试工具</h1>
|
|
|
|
<div class="control-panel">
|
|
<label>WebSocket URL:</label>
|
|
<input type="text" id="wsUrl" value="ws://localhost:8086/ws/flight-notifications" size="50">
|
|
<button onclick="connect()">连接</button>
|
|
<button onclick="disconnect()">断开</button>
|
|
<button onclick="clearLog()">清空日志</button>
|
|
</div>
|
|
|
|
<div class="control-panel">
|
|
<label>发送消息:</label>
|
|
<input type="text" id="messageInput" placeholder="输入要发送的消息">
|
|
<button onclick="sendMessage()">发送</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>日志:</h3>
|
|
<div class="log-container" id="logContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
|
|
function log(message, type = 'info') {
|
|
const container = document.getElementById('logContainer');
|
|
const entry = document.createElement('div');
|
|
entry.className = `log-entry log-${type}`;
|
|
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
|
container.appendChild(entry);
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
|
|
function connect() {
|
|
const url = document.getElementById('wsUrl').value;
|
|
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
log('WebSocket已经连接', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
ws = new WebSocket(url);
|
|
|
|
ws.onopen = function(event) {
|
|
log(`WebSocket连接成功: ${url}`, 'success');
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
log(`收到消息: ${event.data}`, 'info');
|
|
try {
|
|
const messages = JSON.parse(event.data);
|
|
log(`解析到 ${messages.length} 条航班消息`, 'success');
|
|
} catch (e) {
|
|
log(`非JSON消息: ${event.data}`, 'info');
|
|
}
|
|
};
|
|
|
|
ws.onerror = function(error) {
|
|
log(`连接错误: ${error.message}`, 'error');
|
|
};
|
|
|
|
ws.onclose = function(event) {
|
|
log(`连接关闭: code=${event.code}, reason=${event.reason}`, 'warning');
|
|
};
|
|
|
|
} catch (error) {
|
|
log(`连接失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function disconnect() {
|
|
if (ws) {
|
|
ws.close();
|
|
log('主动断开连接', 'info');
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
const message = document.getElementById('messageInput').value;
|
|
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(message);
|
|
log(`发送消息: ${message}`, 'info');
|
|
} else {
|
|
log('WebSocket未连接', 'error');
|
|
}
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('logContainer').innerHTML = '';
|
|
}
|
|
|
|
// 页面加载完成
|
|
window.onload = function() {
|
|
log('ADXP WebSocket测试工具就绪', 'info');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |