Merge pull request 'feature/websocket-unify-and-openapi-update' (#39) from feature/websocket-unify-and-openapi-update into main
Reviewed-on: #39
This commit was merged in pull request #39.
This commit is contained in:
@@ -364,6 +364,11 @@ export class ChatController {
|
||||
'chat_render', // 接收到聊天消息
|
||||
'error', // 通用错误
|
||||
],
|
||||
quickLinks: {
|
||||
testPage: '/websocket-test?from=chat-api',
|
||||
apiDocs: '/api-docs',
|
||||
connectionInfo: '/websocket-api/connection-info'
|
||||
},
|
||||
authRequired: true,
|
||||
tokenType: 'JWT',
|
||||
tokenFormat: {
|
||||
|
||||
@@ -197,6 +197,10 @@ export class WebSocketOpenApiController {
|
||||
- ✅ 统一使用 /game 路径
|
||||
- ✅ 支持地图房间管理
|
||||
- ✅ 实现消息广播机制
|
||||
|
||||
**快速测试**:
|
||||
- 🧪 [WebSocket 测试页面](/websocket-test?from=api-docs) - 交互式测试工具
|
||||
- 📚 [完整 API 文档](/api-docs) - 返回 Swagger 文档
|
||||
`
|
||||
})
|
||||
@ApiResponse({
|
||||
@@ -689,13 +693,12 @@ ws.on('error', function(error) {
|
||||
`
|
||||
},
|
||||
testingSteps: [
|
||||
'1. 获取有效的JWT Token（通过 /auth/login 接口）',
|
||||
'2. 使用WebSocket客户端连接到 wss://whaletownend.xinghangee.icu/game',
|
||||
'3. 发送login消息进行认证',
|
||||
'4. 验证收到login_success响应',
|
||||
'5. 发送chat消息测试聊天功能',
|
||||
'6. 发送position消息测试位置更新',
|
||||
'7. 观察其他客户端的消息广播'
|
||||
'1. 访问测试页面: /websocket-test?from=api-docs',
|
||||
'2. 点击"🚀 一键测试"按钮自动完成所有步骤',
|
||||
'3. 或手动操作: 获取JWT Token → 连接 → 登录',
|
||||
'4. 发送chat消息测试聊天功能',
|
||||
'5. 发送position消息测试位置更新',
|
||||
'6. 观察其他客户端的消息广播'
|
||||
],
|
||||
troubleshooting: {
|
||||
connectionFailed: [
|
||||
|
||||
@@ -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