peanut
847f5126cf
- 添加WebSocketAuthInterceptor处理token认证 - 修改WebSocket连接逻辑，支持token传递 - 统一用户身份识别，确保登录用户使用USER类型 - 修复前端环境变量配置，统一WebSocket URL - 添加Token测试页面用于验证功能 - 更新聊天消息处理逻辑，正确识别用户身份 解决了登录用户发送消息时同时保存GUEST和USER两种类型数据的问题
216 lines
7.8 KiB
HTML
216 lines
7.8 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;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 10px 0;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
.connected { background-color: #d4edda; color: #155724; }
|
|
.disconnected { background-color: #f8d7da; color: #721c24; }
|
|
.connecting { background-color: #fff3cd; color: #856404; }
|
|
button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover { background-color: #0056b3; }
|
|
button:disabled { background-color: #6c757d; cursor: not-allowed; }
|
|
#messages {
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
input[type="text"] {
|
|
width: 70%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket连接测试</h1>
|
|
|
|
<div class="container">
|
|
<h3>连接状态</h3>
|
|
<div id="status" class="status disconnected">未连接</div>
|
|
<button id="connectBtn" onclick="connect()">连接</button>
|
|
<button id="disconnectBtn" onclick="disconnect()" disabled>断开</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h3>发送消息</h3>
|
|
<input type="text" id="messageInput" placeholder="输入消息内容..." disabled>
|
|
<button id="sendBtn" onclick="sendMessage()" disabled>发送</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h3>消息日志</h3>
|
|
<button onclick="clearMessages()">清空日志</button>
|
|
<div id="messages"></div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
|
|
<script>
|
|
let stompClient = null;
|
|
let connected = false;
|
|
const wsUrl = 'http://localhost:19089/ws/chat';
|
|
const userId = 'test_user_' + Date.now();
|
|
|
|
function updateStatus(status, className) {
|
|
const statusEl = document.getElementById('status');
|
|
statusEl.textContent = status;
|
|
statusEl.className = 'status ' + className;
|
|
}
|
|
|
|
function updateButtons() {
|
|
document.getElementById('connectBtn').disabled = connected;
|
|
document.getElementById('disconnectBtn').disabled = !connected;
|
|
document.getElementById('sendBtn').disabled = !connected;
|
|
document.getElementById('messageInput').disabled = !connected;
|
|
}
|
|
|
|
function addMessage(message, type = 'info') {
|
|
const messagesEl = document.getElementById('messages');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const messageEl = document.createElement('div');
|
|
messageEl.innerHTML = `<strong>[${timestamp}]</strong> <span style="color: ${type === 'error' ? 'red' : type === 'success' ? 'green' : 'blue'}">${message}</span>`;
|
|
messagesEl.appendChild(messageEl);
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
}
|
|
|
|
function connect() {
|
|
updateStatus('连接中...', 'connecting');
|
|
addMessage('开始连接WebSocket...', 'info');
|
|
|
|
try {
|
|
const socket = new SockJS(wsUrl);
|
|
stompClient = Stomp.over(socket);
|
|
|
|
// 禁用调试日志
|
|
stompClient.debug = null;
|
|
|
|
stompClient.connect(
|
|
{ 'X-User-Id': userId },
|
|
function(frame) {
|
|
connected = true;
|
|
updateStatus('已连接', 'connected');
|
|
updateButtons();
|
|
addMessage('WebSocket连接成功！', 'success');
|
|
addMessage('Frame: ' + frame, 'info');
|
|
|
|
// 订阅用户消息
|
|
stompClient.subscribe('/user/queue/messages', function(message) {
|
|
const msg = JSON.parse(message.body);
|
|
addMessage('收到消息: ' + JSON.stringify(msg, null, 2), 'success');
|
|
});
|
|
|
|
// 发送连接消息
|
|
const connectRequest = {
|
|
userId: userId,
|
|
username: userId,
|
|
clientType: 'web',
|
|
clientVersion: '1.0.0',
|
|
timestamp: Date.now()
|
|
};
|
|
stompClient.send('/app/chat.connect', {}, JSON.stringify(connectRequest));
|
|
addMessage('发送连接消息: ' + JSON.stringify(connectRequest), 'info');
|
|
},
|
|
function(error) {
|
|
connected = false;
|
|
updateStatus('连接失败', 'disconnected');
|
|
updateButtons();
|
|
addMessage('连接失败: ' + error, 'error');
|
|
console.error('WebSocket连接错误:', error);
|
|
}
|
|
);
|
|
} catch (error) {
|
|
addMessage('连接异常: ' + error.message, 'error');
|
|
updateStatus('连接失败', 'disconnected');
|
|
updateButtons();
|
|
}
|
|
}
|
|
|
|
function disconnect() {
|
|
if (stompClient !== null) {
|
|
stompClient.disconnect();
|
|
}
|
|
connected = false;
|
|
updateStatus('已断开', 'disconnected');
|
|
updateButtons();
|
|
addMessage('WebSocket连接已断开', 'info');
|
|
}
|
|
|
|
function sendMessage() {
|
|
const messageInput = document.getElementById('messageInput');
|
|
const content = messageInput.value.trim();
|
|
|
|
if (!content) {
|
|
addMessage('消息内容不能为空', 'error');
|
|
return;
|
|
}
|
|
|
|
if (stompClient && connected) {
|
|
const chatRequest = {
|
|
content: content,
|
|
senderId: userId,
|
|
senderType: 'USER',
|
|
messageType: 'TEXT',
|
|
conversationId: 'test_conversation_' + Date.now(),
|
|
timestamp: Date.now()
|
|
};
|
|
|
|
stompClient.send('/app/chat.send', {}, JSON.stringify(chatRequest));
|
|
addMessage('发送消息: ' + content, 'info');
|
|
messageInput.value = '';
|
|
} else {
|
|
addMessage('WebSocket未连接，无法发送消息', 'error');
|
|
}
|
|
}
|
|
|
|
function clearMessages() {
|
|
document.getElementById('messages').innerHTML = '';
|
|
}
|
|
|
|
// 回车发送消息
|
|
document.getElementById('messageInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// 页面加载完成后的初始化
|
|
window.onload = function() {
|
|
updateButtons();
|
|
addMessage('WebSocket测试页面已加载', 'info');
|
|
addMessage('WebSocket URL: ' + wsUrl, 'info');
|
|
addMessage('用户ID: ' + userId, 'info');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|