chore(websocket): 更新ws_server
This commit is contained in:
283
docs/websocket/test_websocket.html
Normal file
283
docs/websocket/test_websocket.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user