重命名前端项目目录：web-flowith -> web
- 将前端项目目录从 web-flowith 重命名为 web，使目录结构更简洁 - 保持所有前端代码和配置文件不变 - 统一项目目录命名规范
This commit is contained in:
+210
@@ -0,0 +1,210 @@
|
||||
<!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;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.section h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
.info {
|
||||
background-color: #e7f3ff;
|
||||
border-color: #b3d9ff;
|
||||
}
|
||||
.success {
|
||||
background-color: #e7f5e7;
|
||||
border-color: #b3d9b3;
|
||||
}
|
||||
.error {
|
||||
background-color: #ffe7e7;
|
||||
border-color: #ffb3b3;
|
||||
}
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.log {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>WebSocket调试页面</h1>
|
||||
|
||||
<div class="section info">
|
||||
<h3>当前状态</h3>
|
||||
<p><strong>Token:</strong> <span id="tokenStatus">检查中...</span></p>
|
||||
<p><strong>用户信息:</strong> <span id="userInfo">检查中...</span></p>
|
||||
<p><strong>WebSocket状态:</strong> <span id="wsStatus">未连接</span></p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>操作</h3>
|
||||
<button onclick="checkAuth()">检查认证状态</button>
|
||||
<button onclick="connectWebSocket()">连接WebSocket</button>
|
||||
<button onclick="sendTestMessage()">发送测试消息</button>
|
||||
<button onclick="clearLog()">清空日志</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>日志</h3>
|
||||
<div id="log" class="log"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let ws = null;
|
||||
|
||||
function log(message) {
|
||||
const logDiv = document.getElementById('log');
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
logDiv.innerHTML += `[${timestamp}] ${message}\n`;
|
||||
logDiv.scrollTop = logDiv.scrollHeight;
|
||||
}
|
||||
|
||||
function checkAuth() {
|
||||
log('检查认证状态...');
|
||||
|
||||
// 检查localStorage中的token
|
||||
const token = localStorage.getItem('token');
|
||||
const userInfo = localStorage.getItem('userInfo');
|
||||
|
||||
document.getElementById('tokenStatus').textContent = token ? `存在 (${token.substring(0, 20)}...)` : '不存在';
|
||||
document.getElementById('userInfo').textContent = userInfo ? JSON.parse(userInfo).username || '未知用户' : '未登录';
|
||||
|
||||
log(`Token: ${token ? '存在' : '不存在'}`);
|
||||
log(`用户信息: ${userInfo ? JSON.parse(userInfo).username || '未知' : '未登录'}`);
|
||||
|
||||
if (!token) {
|
||||
log('警告: 没有找到token，需要先登录');
|
||||
}
|
||||
}
|
||||
|
||||
function connectWebSocket() {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
log('WebSocket已连接');
|
||||
return;
|
||||
}
|
||||
|
||||
log('开始连接WebSocket...');
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
const userInfo = localStorage.getItem('userInfo');
|
||||
const userId = userInfo ? JSON.parse(userInfo).id : `guest_${Date.now()}`;
|
||||
|
||||
log(`使用用户ID: ${userId}`);
|
||||
log(`使用Token: ${token ? '是' : '否'}`);
|
||||
|
||||
// 使用SockJS和STOMP
|
||||
const socket = new SockJS('http://localhost:19089/ws/chat');
|
||||
const stompClient = Stomp.over(socket);
|
||||
|
||||
// 禁用调试日志
|
||||
stompClient.debug = null;
|
||||
|
||||
const connectHeaders = {
|
||||
'X-User-Id': userId
|
||||
};
|
||||
|
||||
if (token) {
|
||||
connectHeaders['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
log(`连接头: ${JSON.stringify(connectHeaders)}`);
|
||||
|
||||
stompClient.connect(
|
||||
connectHeaders,
|
||||
function(frame) {
|
||||
log('WebSocket连接成功!');
|
||||
document.getElementById('wsStatus').textContent = '已连接';
|
||||
ws = stompClient;
|
||||
|
||||
// 订阅消息
|
||||
stompClient.subscribe('/user/queue/messages', function(message) {
|
||||
const wsMessage = JSON.parse(message.body);
|
||||
log(`收到消息: ${JSON.stringify(wsMessage)}`);
|
||||
});
|
||||
|
||||
log('已订阅 /user/queue/messages');
|
||||
},
|
||||
function(error) {
|
||||
log(`WebSocket连接失败: ${error}`);
|
||||
document.getElementById('wsStatus').textContent = '连接失败';
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function sendTestMessage() {
|
||||
if (!ws || ws.readyState !== 1) {
|
||||
log('WebSocket未连接，无法发送消息');
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = localStorage.getItem('userInfo');
|
||||
const userId = userInfo ? JSON.parse(userInfo).id : `guest_${Date.now()}`;
|
||||
|
||||
const chatRequest = {
|
||||
content: '这是一条测试消息',
|
||||
senderId: userId,
|
||||
senderType: userId.startsWith('guest_') ? 'GUEST' : 'USER',
|
||||
messageType: 'TEXT',
|
||||
conversationId: 'test-conversation',
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
log(`发送消息: ${JSON.stringify(chatRequest)}`);
|
||||
ws.send('/app/chat.send', {}, JSON.stringify(chatRequest));
|
||||
}
|
||||
|
||||
function clearLog() {
|
||||
document.getElementById('log').innerHTML = '';
|
||||
}
|
||||
|
||||
// 页面加载时检查状态
|
||||
window.onload = function() {
|
||||
checkAuth();
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- 引入SockJS和STOMP -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@6/bundles/stomp.umd.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user