修复WebSocket身份认证问题
- 添加WebSocketAuthInterceptor处理token认证 - 修改WebSocket连接逻辑，支持token传递 - 统一用户身份识别，确保登录用户使用USER类型 - 修复前端环境变量配置，统一WebSocket URL - 添加Token测试页面用于验证功能 - 更新聊天消息处理逻辑，正确识别用户身份 解决了登录用户发送消息时同时保存GUEST和USER两种类型数据的问题
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user