211 lines
7.0 KiB
HTML
211 lines
7.0 KiB
HTML
<!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>
|