242 lines
7.4 KiB
HTML
242 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket 测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
}
|
|
.status.connected {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.status.disconnected {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.status.connecting {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.btn-connect {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.btn-disconnect {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
.btn-send {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
#messages {
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
background-color: #f9f9f9;
|
|
margin-top: 10px;
|
|
}
|
|
.message {
|
|
padding: 5px;
|
|
margin: 5px 0;
|
|
border-left: 3px solid #007bff;
|
|
background-color: white;
|
|
}
|
|
.message.received {
|
|
border-left-color: #28a745;
|
|
}
|
|
.message.sent {
|
|
border-left-color: #007bff;
|
|
}
|
|
.message.error {
|
|
border-left-color: #dc3545;
|
|
background-color: #fff5f5;
|
|
}
|
|
.message .time {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin: 10px 0;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>WebSocket 连接测试</h1>
|
|
|
|
<div>
|
|
<label for="wsUrl">WebSocket 地址:</label>
|
|
<input type="text" id="wsUrl" value="ws://220.154.136.137:9988/prod-api/websocket/statistics">
|
|
</div>
|
|
|
|
<div id="status" class="status disconnected">状态: 未连接</div>
|
|
|
|
<div>
|
|
<button class="btn-connect" onclick="connect()">连接</button>
|
|
<button class="btn-disconnect" onclick="disconnect()" disabled>断开</button>
|
|
<button class="btn-send" onclick="sendMessage()" disabled>发送测试消息</button>
|
|
<button onclick="clearMessages()">清空消息</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="messageInput">发送消息:</label>
|
|
<input type="text" id="messageInput" placeholder="输入要发送的消息" disabled>
|
|
</div>
|
|
|
|
<h3>消息记录:</h3>
|
|
<div id="messages"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
const statusDiv = document.getElementById('status');
|
|
const messagesDiv = document.getElementById('messages');
|
|
const wsUrlInput = document.getElementById('wsUrl');
|
|
const messageInput = document.getElementById('messageInput');
|
|
|
|
function updateStatus(text, className) {
|
|
statusDiv.textContent = '状态: ' + text;
|
|
statusDiv.className = 'status ' + className;
|
|
}
|
|
|
|
function addMessage(text, type = 'info') {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = 'message ' + type;
|
|
|
|
const time = new Date().toLocaleTimeString();
|
|
messageDiv.innerHTML = `
|
|
<span class="time">[${time}]</span> ${text}
|
|
`;
|
|
|
|
messagesDiv.appendChild(messageDiv);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
}
|
|
|
|
function connect() {
|
|
const url = wsUrlInput.value.trim();
|
|
if (!url) {
|
|
alert('请输入 WebSocket 地址');
|
|
return;
|
|
}
|
|
|
|
updateStatus('连接中...', 'connecting');
|
|
addMessage('正在连接到: ' + url, 'info');
|
|
|
|
try {
|
|
ws = new WebSocket(url);
|
|
|
|
ws.onopen = function(event) {
|
|
updateStatus('已连接', 'connected');
|
|
addMessage('✅ WebSocket 连接成功!', 'received');
|
|
|
|
document.querySelector('.btn-connect').disabled = true;
|
|
document.querySelector('.btn-disconnect').disabled = false;
|
|
document.querySelector('.btn-send').disabled = false;
|
|
messageInput.disabled = false;
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
addMessage('📨 收到消息: ' + event.data, 'received');
|
|
};
|
|
|
|
ws.onerror = function(error) {
|
|
addMessage('❌ WebSocket 错误: ' + error, 'error');
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
|
|
ws.onclose = function(event) {
|
|
updateStatus('已断开', 'disconnected');
|
|
addMessage('🔌 连接已关闭 (code: ' + event.code + ', reason: ' + event.reason + ')', 'error');
|
|
|
|
document.querySelector('.btn-connect').disabled = false;
|
|
document.querySelector('.btn-disconnect').disabled = true;
|
|
document.querySelector('.btn-send').disabled = true;
|
|
messageInput.disabled = true;
|
|
};
|
|
|
|
} catch (error) {
|
|
updateStatus('连接失败', 'disconnected');
|
|
addMessage('❌ 连接失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function disconnect() {
|
|
if (ws) {
|
|
ws.close();
|
|
ws = null;
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
const message = messageInput.value.trim();
|
|
if (!message) {
|
|
alert('请输入要发送的消息');
|
|
return;
|
|
}
|
|
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(message);
|
|
addMessage('📤 发送消息: ' + message, 'sent');
|
|
messageInput.value = '';
|
|
} else {
|
|
alert('WebSocket 未连接');
|
|
}
|
|
}
|
|
|
|
function clearMessages() {
|
|
messagesDiv.innerHTML = '';
|
|
}
|
|
|
|
// 回车发送消息
|
|
messageInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// 页面加载完成后的提示
|
|
window.onload = function() {
|
|
addMessage('👋 欢迎使用 WebSocket 测试工具', 'info');
|
|
addMessage('📝 点击"连接"按钮开始测试', 'info');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |