284 lines
8.8 KiB
HTML
284 lines
8.8 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;
|
||
margin: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.header {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.connection-info {
|
||
margin-bottom: 20px;
|
||
}
|
||
.status {
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
font-weight: bold;
|
||
}
|
||
.status.connected {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
.status.disconnected {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
.input-area {
|
||
margin-bottom: 20px;
|
||
}
|
||
.input-area textarea {
|
||
width: 100%;
|
||
height: 100px;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.input-area button {
|
||
margin-right: 10px;
|
||
padding: 8px 15px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.input-area button:hover {
|
||
background: #0056b3;
|
||
}
|
||
.messages {
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
height: 300px;
|
||
overflow-y: auto;
|
||
background: #f9f9f9;
|
||
}
|
||
.message {
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
.message.received {
|
||
background: #e9ecef;
|
||
border-left: 4px solid #007bff;
|
||
}
|
||
.message.sent {
|
||
background: #d4edda;
|
||
border-right: 4px solid #28a745;
|
||
text-align: right;
|
||
}
|
||
.message.error {
|
||
background: #f8d7da;
|
||
border-left: 4px solid #dc3545;
|
||
}
|
||
.message-header {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
.settings {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 5px;
|
||
}
|
||
.settings input {
|
||
width: 300px;
|
||
padding: 5px;
|
||
margin: 5px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>WebSocket 服务器测试客户端</h1>
|
||
<p>用于测试 WebSocket 服务器的连接和基本功能</p>
|
||
</div>
|
||
|
||
<div class="settings">
|
||
<h3>设置</h3>
|
||
<label>WebSocket 服务器地址: </label>
|
||
<input type="text" id="ws-url" value="ws://localhost:8080/ws" placeholder="ws://localhost:8080/ws">
|
||
<br>
|
||
<button onclick="connectWebSocket()">连接</button>
|
||
<button onclick="disconnectWebSocket()">断开连接</button>
|
||
</div>
|
||
|
||
<div class="connection-info">
|
||
<strong>连接状态: </strong>
|
||
<span id="connection-status" class="status disconnected">未连接</span>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<textarea id="message-input" placeholder="输入要发送的消息..."></textarea>
|
||
<br>
|
||
<button onclick="sendPing()">发送 Ping</button>
|
||
<button onclick="sendTestMessage()">发送测试消息</button>
|
||
<button onclick="sendMessage()">发送自定义消息</button>
|
||
</div>
|
||
|
||
<div class="messages" id="messages-container">
|
||
<!-- 消息将显示在这里 -->
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let ws = null;
|
||
|
||
// 连接 WebSocket 服务器
|
||
function connectWebSocket() {
|
||
const wsUrl = document.getElementById('ws-url').value;
|
||
|
||
// 先断开已有连接
|
||
if (ws) {
|
||
ws.close();
|
||
}
|
||
|
||
try {
|
||
ws = new WebSocket(wsUrl);
|
||
|
||
ws.onopen = function() {
|
||
updateStatus('connected', '已连接');
|
||
addMessage('系统', '成功连接到 WebSocket 服务器', 'received');
|
||
};
|
||
|
||
ws.onmessage = function(event) {
|
||
addMessage('服务器', event.data, 'received');
|
||
};
|
||
|
||
ws.onclose = function() {
|
||
updateStatus('disconnected', '已断开连接');
|
||
addMessage('系统', '与 WebSocket 服务器的连接已断开', 'error');
|
||
};
|
||
|
||
ws.onerror = function(error) {
|
||
addMessage('系统', 'WebSocket 错误: ' + error, 'error');
|
||
};
|
||
} catch (error) {
|
||
addMessage('系统', '连接失败: ' + error, 'error');
|
||
}
|
||
}
|
||
|
||
// 断开连接
|
||
function disconnectWebSocket() {
|
||
if (ws) {
|
||
ws.close();
|
||
ws = null;
|
||
}
|
||
}
|
||
|
||
// 发送 Ping 消息
|
||
function sendPing() {
|
||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
||
addMessage('系统', 'WebSocket 未连接', 'error');
|
||
return;
|
||
}
|
||
|
||
const message = JSON.stringify({action: 'ping'});
|
||
ws.send(message);
|
||
addMessage('我', message, 'sent');
|
||
}
|
||
|
||
// 发送测试消息
|
||
function sendTestMessage() {
|
||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
||
addMessage('系统', 'WebSocket 未连接', 'error');
|
||
return;
|
||
}
|
||
|
||
const message = JSON.stringify({message: 'Hello WebSocket!', action: 'test'});
|
||
ws.send(message);
|
||
addMessage('我', message, 'sent');
|
||
}
|
||
|
||
// 发送自定义消息
|
||
function sendMessage() {
|
||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
||
addMessage('系统', 'WebSocket 未连接', 'error');
|
||
return;
|
||
}
|
||
|
||
const messageInput = document.getElementById('message-input');
|
||
const message = messageInput.value.trim();
|
||
|
||
if (!message) {
|
||
addMessage('系统', '请输入消息内容', 'error');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 尝试解析为 JSON，如果不是 JSON 则直接发送
|
||
JSON.parse(message);
|
||
ws.send(message);
|
||
} catch (error) {
|
||
// 不是 JSON，作为普通文本发送
|
||
ws.send(JSON.stringify({message: message}));
|
||
}
|
||
|
||
addMessage('我', message, 'sent');
|
||
messageInput.value = '';
|
||
}
|
||
|
||
// 更新连接状态
|
||
function updateStatus(statusClass, text) {
|
||
const statusElement = document.getElementById('connection-status');
|
||
statusElement.className = `status ${statusClass}`;
|
||
statusElement.textContent = text;
|
||
}
|
||
|
||
// 添加消息到消息列表
|
||
function addMessage(sender, content, type) {
|
||
const messagesContainer = document.getElementById('messages-container');
|
||
const messageElement = document.createElement('div');
|
||
messageElement.className = `message ${type}`;
|
||
|
||
const now = new Date();
|
||
const time = now.toLocaleTimeString();
|
||
|
||
messageElement.innerHTML = `
|
||
<div class="message-header">${sender} - ${time}</div>
|
||
<div class="message-content">${formatMessage(content)}</div>
|
||
`;
|
||
|
||
messagesContainer.appendChild(messageElement);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 格式化消息显示（美化 JSON）
|
||
function formatMessage(content) {
|
||
try {
|
||
const parsed = JSON.parse(content);
|
||
return JSON.stringify(parsed, null, 2);
|
||
} catch (error) {
|
||
return content;
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后自动连接
|
||
window.onload = function() {
|
||
connectWebSocket();
|
||
};
|
||
|
||
// 页面关闭时断开连接
|
||
window.onbeforeunload = function() {
|
||
disconnectWebSocket();
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|