peanut
c77352877d
主要更新: 1. 统一所有微服务端口配置(19000-19008) 2. 为所有服务创建本地/测试/生产三套环境配置 3. 配置Nacos认证密码(本地:Peanut2817*#, 测试/生产:EmotionMuseum2025) 4. 优化网关路由配置,支持负载均衡和WebSocket 5. 新增emotion-websocket模块,支持实时聊天 6. 前端集成WebSocket,替代HTTP轮询 7. 添加配置验证和管理工具脚本 技术特性: - 完整的环境隔离和服务发现 - WebSocket实时通信支持 - 负载均衡路由配置 - 跨域和安全配置 - 自动重连和心跳检测
271 lines
8.7 KiB
HTML
271 lines
8.7 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;
|
|
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>
|