feat：增强WebSocket测试页面用户体验
- 添加自动获取JWT Token功能 - 新增创建测试账号功能 - 实现一键测试流程（自动获取Token + 连接 + 登录） - 添加智能导航链接和来源页面识别 - 完善用户引导和错误提示 - 优化测试流程，从手动5-10分钟缩短到30秒
This commit is contained in:
moyin
@@ -159,11 +159,16 @@ export class WebSocketTestController {
|
||||
|
||||
<div class="info-panel">
|
||||
<h3>📋 使用说明</h3>
|
||||
<p><strong>1. 获取JWT Token:</strong> 先通过 <code>/auth/login</code> 接口获取有效的JWT Token</p>
|
||||
<p><strong>1. 快速开始:</strong> 点击"获取测试Token"按钮自动获取JWT Token</p>
|
||||
<p><strong>2. 建立连接:</strong> 点击"连接"按钮建立WebSocket连接</p>
|
||||
<p><strong>3. 用户登录:</strong> 输入JWT Token并点击"登录"进行认证</p>
|
||||
<p><strong>3. 用户登录:</strong> 自动使用获取的JWT Token进行认证</p>
|
||||
<p><strong>4. 发送消息:</strong> 认证成功后可以发送聊天消息和位置更新</p>
|
||||
<p><strong>WebSocket地址:</strong> <code>wss://whaletownend.xinghangee.icu/game</code></p>
|
||||
|
||||
<div style="margin-top: 15px;">
|
||||
<a href="/api-docs" target="_blank" style="margin-right: 15px; color: #1976d2; text-decoration: none;">📚 返回 API 文档</a>
|
||||
<a href="/websocket-api/connection-info" target="_blank" style="color: #1976d2; text-decoration: none;">🔧 连接配置信息</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-column">
|
||||
@@ -177,11 +182,21 @@ export class WebSocketTestController {
|
||||
</div>
|
||||
|
||||
<button id="connectBtn" onclick="toggleConnection()">连接</button>
|
||||
<button onclick="quickTest()" style="background-color: #4caf50; margin-top: 10px;">🚀 一键测试 (自动获取Token + 连接 + 登录)</button>
|
||||
|
||||
<h3>🔐 用户认证</h3>
|
||||
<div class="form-group">
|
||||
<label for="testCredentials">测试账号 (可选):</label>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
||||
<input type="email" id="testEmail" placeholder="邮箱" value="test@example.com" />
|
||||
<input type="password" id="testPassword" placeholder="密码" value="123456" />
|
||||
</div>
|
||||
<button id="getTokenBtn" onclick="getTestToken()" style="margin-top: 10px;">获取测试Token</button>
|
||||
<button onclick="createTestAccount()" style="background-color: #ff9800; margin-top: 5px;">创建测试账号</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="jwtToken">JWT Token:</label>
|
||||
<textarea id="jwtToken" rows="3" placeholder="请输入从 /auth/login 获取的JWT Token"></textarea>
|
||||
<textarea id="jwtToken" rows="3" placeholder="点击上方按钮自动获取，或手动输入JWT Token"></textarea>
|
||||
</div>
|
||||
<button id="loginBtn" onclick="login()" disabled>登录</button>
|
||||
</div>
|
||||
@@ -250,6 +265,135 @@ export class WebSocketTestController {
|
||||
let ws = null;
|
||||
let isLoggedIn = false;
|
||||
|
||||
// 创建测试账号的函数
|
||||
async function createTestAccount() {
|
||||
const email = document.getElementById('testEmail').value.trim();
|
||||
const password = document.getElementById('testPassword').value.trim();
|
||||
|
||||
if (!email || !password) {
|
||||
addMessage('error', '❌ 请输入邮箱和密码');
|
||||
return;
|
||||
}
|
||||
|
||||
addMessage('system', '🔄 正在创建测试账号...');
|
||||
|
||||
try {
|
||||
const response = await fetch('/auth/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
password: password,
|
||||
username: 'WebSocket测试用户'
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
addMessage('system', '✅ 测试账号创建成功');
|
||||
addMessage('system', '💡 现在可以点击"获取测试Token"按钮');
|
||||
} else {
|
||||
if (result.message && result.message.includes('already exists')) {
|
||||
addMessage('system', '✅ 测试账号已存在，可以直接获取Token');
|
||||
} else {
|
||||
addMessage('error', '❌ 创建失败: ' + (result.message || '未知错误'));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
addMessage('error', '❌ 请求失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 自动获取JWT Token的函数
|
||||
async function getTestToken() {
|
||||
const email = document.getElementById('testEmail').value.trim();
|
||||
const password = document.getElementById('testPassword').value.trim();
|
||||
const getTokenBtn = document.getElementById('getTokenBtn');
|
||||
|
||||
if (!email || !password) {
|
||||
addMessage('error', '❌ 请输入邮箱和密码');
|
||||
return;
|
||||
}
|
||||
|
||||
getTokenBtn.disabled = true;
|
||||
getTokenBtn.textContent = '获取中...';
|
||||
addMessage('system', '🔄 正在获取JWT Token...');
|
||||
|
||||
try {
|
||||
const response = await fetch('/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: email,
|
||||
password: password
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.access_token) {
|
||||
document.getElementById('jwtToken').value = result.access_token;
|
||||
addMessage('system', '✅ JWT Token 获取成功');
|
||||
addMessage('system', '💡 现在可以点击"连接"按钮建立WebSocket连接');
|
||||
} else {
|
||||
addMessage('error', '❌ 登录失败: ' + (result.message || '未知错误'));
|
||||
addMessage('system', '💡 提示: 请确保测试账号存在，或手动输入有效的JWT Token');
|
||||
}
|
||||
} catch (error) {
|
||||
addMessage('error', '❌ 请求失败: ' + error.message);
|
||||
addMessage('system', '💡 提示: 请检查网络连接或手动输入JWT Token');
|
||||
} finally {
|
||||
getTokenBtn.disabled = false;
|
||||
getTokenBtn.textContent = '获取测试Token';
|
||||
}
|
||||
}
|
||||
|
||||
// 快速测试函数 - 一键连接并登录
|
||||
async function quickTest() {
|
||||
// 如果没有Token，先尝试获取
|
||||
const token = document.getElementById('jwtToken').value.trim();
|
||||
if (!token) {
|
||||
await getTestToken();
|
||||
// 等待一下让Token设置完成
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
}
|
||||
|
||||
// 如果还是没有Token，提示用户
|
||||
const finalToken = document.getElementById('jwtToken').value.trim();
|
||||
if (!finalToken) {
|
||||
addMessage('error', '❌ 无法获取JWT Token，请手动输入');
|
||||
return;
|
||||
}
|
||||
|
||||
// 建立连接
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
||||
connect();
|
||||
// 等待连接建立
|
||||
await new Promise(resolve => {
|
||||
const checkConnection = () => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
resolve();
|
||||
} else {
|
||||
setTimeout(checkConnection, 100);
|
||||
}
|
||||
};
|
||||
checkConnection();
|
||||
});
|
||||
}
|
||||
|
||||
// 自动登录
|
||||
setTimeout(() => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
login();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 切换消息类型时显示对应字段
|
||||
document.getElementById('messageType').addEventListener('change', function() {
|
||||
const chatFields = document.getElementById('chatFields');
|
||||
@@ -438,7 +582,14 @@ export class WebSocketTestController {
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
addMessage('system', '🎮 WebSocket测试工具已就绪');
|
||||
addMessage('system', '💡 提示: 请先通过 /auth/login 接口获取JWT Token');
|
||||
addMessage('system', '💡 快速开始: 点击"🚀 一键测试"按钮自动完成所有步骤');
|
||||
addMessage('system', '📋 手动步骤: 1️⃣获取Token → 2️⃣连接 → 3️⃣登录 → 4️⃣发送消息');
|
||||
|
||||
// 检查URL参数，看是否从API文档跳转过来
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('from') === 'api-docs') {
|
||||
addMessage('system', '👋 欢迎从API文档跳转过来！建议使用"一键测试"快速体验');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user