<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>OKX WebSocket消息监控</title>
|
<style>
|
body {
|
font-family: Arial, sans-serif;
|
margin: 20px;
|
background-color: #f5f5f5;
|
}
|
.container {
|
max-width: 1200px;
|
margin: 0 auto;
|
background-color: white;
|
padding: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
}
|
h1 {
|
color: #333;
|
text-align: center;
|
}
|
.controls {
|
margin: 20px 0;
|
text-align: center;
|
}
|
.controls input, .controls button {
|
margin: 5px;
|
padding: 8px 15px;
|
border-radius: 4px;
|
border: 1px solid #ddd;
|
}
|
.controls button {
|
background-color: #007bff;
|
color: white;
|
cursor: pointer;
|
}
|
.controls button:hover {
|
background-color: #0056b3;
|
}
|
#messageDisplay {
|
background-color: #f8f9fa;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
padding: 15px;
|
min-height: 300px;
|
max-height: 600px;
|
overflow-y: auto;
|
white-space: pre-wrap;
|
font-family: monospace;
|
}
|
.message {
|
margin-bottom: 10px;
|
padding: 10px;
|
border-radius: 4px;
|
background-color: #e9ecef;
|
}
|
.timestamp {
|
font-size: 0.8em;
|
color: #6c757d;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
<h1>OKX WebSocket消息监控</h1>
|
|
<div class="controls">
|
<label for="refreshInterval">刷新间隔(秒):</label>
|
<input type="number" id="refreshInterval" min="1" max="60" value="5">
|
<button onclick="startAutoRefresh()">开始自动刷新</button>
|
<button onclick="stopAutoRefresh()">停止自动刷新</button>
|
<button onclick="refreshMessage()">手动刷新</button>
|
<button onclick="clearMessages()">清除消息</button>
|
</div>
|
|
<div id="messageDisplay">
|
<p>等待接收消息...</p>
|
</div>
|
</div>
|
|
<script>
|
let refreshIntervalId;
|
let messageHistory = [];
|
|
// 获取最新消息
|
function refreshMessage() {
|
fetch('/quant/okx/latestMessage')
|
.then(response => response.json())
|
.then(data => {
|
if (data.code === 200 && data.data) {
|
displayMessage(data.data);
|
}
|
})
|
.catch(error => {
|
console.error('Error fetching message:', error);
|
displayMessage('Error: ' + error.message);
|
});
|
}
|
|
// 显示消息
|
function displayMessage(message) {
|
const display = document.getElementById('messageDisplay');
|
const timestamp = new Date().toLocaleString();
|
|
// 如果是新消息，添加到历史记录
|
if (!messageHistory.includes(message)) {
|
messageHistory.push({
|
timestamp: timestamp,
|
content: message
|
});
|
|
// 限制历史记录数量
|
if (messageHistory.length > 100) {
|
messageHistory.shift();
|
}
|
}
|
|
// 更新显示
|
display.innerHTML = '';
|
messageHistory.forEach(msg => {
|
const messageElement = document.createElement('div');
|
messageElement.className = 'message';
|
messageElement.innerHTML = `
|
<div class="timestamp">${msg.timestamp}</div>
|
<div>${formatJson(msg.content)}</div>
|
`;
|
display.appendChild(messageElement);
|
});
|
|
// 滚动到底部
|
display.scrollTop = display.scrollHeight;
|
}
|
|
// 格式化JSON
|
function formatJson(jsonString) {
|
try {
|
const obj = JSON.parse(jsonString);
|
return JSON.stringify(obj, null, 2);
|
} catch (e) {
|
return jsonString;
|
}
|
}
|
|
// 开始自动刷新
|
function startAutoRefresh() {
|
stopAutoRefresh(); // 先停止之前的定时器
|
const interval = document.getElementById('refreshInterval').value * 1000;
|
refreshIntervalId = setInterval(refreshMessage, interval);
|
refreshMessage(); // 立即获取一次消息
|
}
|
|
// 停止自动刷新
|
function stopAutoRefresh() {
|
if (refreshIntervalId) {
|
clearInterval(refreshIntervalId);
|
refreshIntervalId = null;
|
}
|
}
|
|
// 清除消息
|
function clearMessages() {
|
messageHistory = [];
|
document.getElementById('messageDisplay').innerHTML = '<p>消息已清除</p>';
|
}
|
|
// 页面加载完成后开始自动刷新
|
window.onload = function() {
|
startAutoRefresh();
|
};
|
|
// 页面关闭前停止定时器
|
window.onbeforeunload = function() {
|
stopAutoRefresh();
|
};
|
</script>
|
</body>
|
</html>
|
