From f09298617e646dacad8962d51bae2b54093de9b1 Mon Sep 17 00:00:00 2001 From: moyin <244344649@qq.com> Date: Fri, 9 Jan 2026 18:00:02 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=BC=BAWebSocket?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E9=A1=B5=E9=9D=A2=E7=94=A8=E6=88=B7=E4=BD=93?= =?UTF-8?q?=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加自动获取JWT Token功能 - 新增创建测试账号功能 - 实现一键测试流程（自动获取Token + 连接 + 登录） - 添加智能导航链接和来源页面识别 - 完善用户引导和错误提示 - 优化测试流程，从手动5-10分钟缩短到30秒 --- .../zulip/websocket_test.controller.ts | 159 +++++++++++++++++- 1 file changed, 155 insertions(+), 4 deletions(-) diff --git a/src/business/zulip/websocket_test.controller.ts b/src/business/zulip/websocket_test.controller.ts index 161f351..94aa7f5 100644 --- a/src/business/zulip/websocket_test.controller.ts +++ b/src/business/zulip/websocket_test.controller.ts @@ -159,11 +159,16 @@ export class WebSocketTestController {

📋 使用说明

-

1. 获取JWT Token: 先通过 /auth/login 接口获取有效的JWT Token

+

1. 快速开始: 点击"获取测试Token"按钮自动获取JWT Token

2. 建立连接: 点击"连接"按钮建立WebSocket连接

-

3. 用户登录: 输入JWT Token并点击"登录"进行认证

+

3. 用户登录: 自动使用获取的JWT Token进行认证

4. 发送消息: 认证成功后可以发送聊天消息和位置更新

WebSocket地址: wss://whaletownend.xinghangee.icu/game

+ +
+ 📚 返回 API 文档 + 🔧 连接配置信息 +
@@ -177,11 +182,21 @@ export class WebSocketTestController {
+

🔐 用户认证

+
+ +
+ + +
+ + +
- +
@@ -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文档跳转过来！建议使用"一键测试"快速体验'); + } });