feat: 完成Nacos配置优化和WebSocket集成
主要更新: 1. 统一所有微服务端口配置(19000-19008) 2. 为所有服务创建本地/测试/生产三套环境配置 3. 配置Nacos认证密码(本地:Peanut2817*#, 测试/生产:EmotionMuseum2025) 4. 优化网关路由配置,支持负载均衡和WebSocket 5. 新增emotion-websocket模块,支持实时聊天 6. 前端集成WebSocket,替代HTTP轮询 7. 添加配置验证和管理工具脚本 技术特性: - 完整的环境隔离和服务发现 - WebSocket实时通信支持 - 负载均衡路由配置 - 跨域和安全配置 - 自动重连和心跳检测
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
<!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;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.status {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status.connected {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.status.disconnected {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.chat-container {
|
||||
height: 400px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
background-color: #fafafa;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.message {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
max-width: 70%;
|
||||
}
|
||||
.message.user {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.message.ai {
|
||||
background-color: #e9ecef;
|
||||
color: #333;
|
||||
}
|
||||
.message.system {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.message.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.input-container input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.input-container button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input-container button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.input-container button:disabled {
|
||||
background-color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.controls button {
|
||||
margin-right: 10px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.controls button:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>WebSocket聊天测试</h1>
|
||||
|
||||
<div id="status" class="status disconnected">未连接</div>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="connect()">连接</button>
|
||||
<button onclick="disconnect()">断开连接</button>
|
||||
<button onclick="clearMessages()">清空消息</button>
|
||||
<input type="text" id="userId" placeholder="用户ID (默认: test-user)" value="test-user">
|
||||
</div>
|
||||
|
||||
<div id="messages" class="chat-container"></div>
|
||||
|
||||
<div class="input-container">
|
||||
<input type="text" id="messageInput" placeholder="输入消息..." onkeypress="handleKeyPress(event)">
|
||||
<button onclick="sendMessage()" id="sendButton" disabled>发送</button>
|
||||
</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;
|
||||
|
||||
function connect() {
|
||||
const userId = document.getElementById('userId').value || 'test-user';
|
||||
const socket = new SockJS('http://localhost:19007/ws/chat');
|
||||
stompClient = Stomp.over(socket);
|
||||
|
||||
stompClient.connect({}, function (frame) {
|
||||
console.log('Connected: ' + frame);
|
||||
connected = true;
|
||||
updateStatus('已连接', true);
|
||||
document.getElementById('sendButton').disabled = false;
|
||||
|
||||
// 订阅用户消息
|
||||
stompClient.subscribe('/user/queue/messages', function (message) {
|
||||
const messageData = JSON.parse(message.body);
|
||||
displayMessage(messageData);
|
||||
});
|
||||
|
||||
// 订阅广播消息
|
||||
stompClient.subscribe('/topic/broadcast', function (message) {
|
||||
const messageData = JSON.parse(message.body);
|
||||
displayMessage(messageData);
|
||||
});
|
||||
|
||||
// 发送连接消息
|
||||
stompClient.send("/app/chat.connect", {}, JSON.stringify({}));
|
||||
|
||||
}, function (error) {
|
||||
console.log('Connection error: ' + error);
|
||||
updateStatus('连接失败: ' + error, false);
|
||||
});
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
if (stompClient !== null) {
|
||||
stompClient.send("/app/chat.disconnect", {}, JSON.stringify({}));
|
||||
stompClient.disconnect();
|
||||
}
|
||||
connected = false;
|
||||
updateStatus('已断开连接', false);
|
||||
document.getElementById('sendButton').disabled = true;
|
||||
console.log("Disconnected");
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
const messageInput = document.getElementById('messageInput');
|
||||
const message = messageInput.value.trim();
|
||||
const userId = document.getElementById('userId').value || 'test-user';
|
||||
|
||||
if (message && connected) {
|
||||
const chatRequest = {
|
||||
content: message,
|
||||
senderId: userId,
|
||||
senderType: 'USER',
|
||||
messageType: 'TEXT',
|
||||
conversationId: 'test-conversation-' + userId
|
||||
};
|
||||
|
||||
stompClient.send("/app/chat.send", {}, JSON.stringify(chatRequest));
|
||||
messageInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function displayMessage(messageData) {
|
||||
const messagesDiv = document.getElementById('messages');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = 'message';
|
||||
|
||||
// 根据发送者类型设置样式
|
||||
switch (messageData.senderType) {
|
||||
case 'USER':
|
||||
messageDiv.className += ' user';
|
||||
break;
|
||||
case 'AI':
|
||||
messageDiv.className += ' ai';
|
||||
break;
|
||||
case 'SYSTEM':
|
||||
messageDiv.className += ' system';
|
||||
break;
|
||||
default:
|
||||
messageDiv.className += ' system';
|
||||
}
|
||||
|
||||
// 根据消息类型设置样式
|
||||
if (messageData.type === 'ERROR') {
|
||||
messageDiv.className = 'message error';
|
||||
}
|
||||
|
||||
// 设置消息内容
|
||||
let content = messageData.content;
|
||||
if (messageData.createTime) {
|
||||
content += ' <small>(' + messageData.createTime + ')</small>';
|
||||
}
|
||||
|
||||
messageDiv.innerHTML = content;
|
||||
messagesDiv.appendChild(messageDiv);
|
||||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||||
}
|
||||
|
||||
function updateStatus(message, isConnected) {
|
||||
const statusDiv = document.getElementById('status');
|
||||
statusDiv.textContent = message;
|
||||
statusDiv.className = 'status ' + (isConnected ? 'connected' : 'disconnected');
|
||||
}
|
||||
|
||||
function clearMessages() {
|
||||
document.getElementById('messages').innerHTML = '';
|
||||
}
|
||||
|
||||
function handleKeyPress(event) {
|
||||
if (event.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后自动连接
|
||||
window.onload = function() {
|
||||
// 可以在这里自动连接
|
||||
// connect();
|
||||
};
|
||||
|
||||
// 页面关闭时断开连接
|
||||
window.onbeforeunload = function() {
|
||||
if (connected) {
|
||||
disconnect();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user