|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>实时聊天测试</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background-color: #f5f5f5;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.chat-window {
|
|
|
flex: 1;
|
|
|
background-color: white;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 600px;
|
|
|
}
|
|
|
|
|
|
.chat-header {
|
|
|
background-color: #1677ff;
|
|
|
color: white;
|
|
|
padding: 16px 20px;
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.chat-messages {
|
|
|
flex: 1;
|
|
|
padding: 20px;
|
|
|
overflow-y: auto;
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
margin-bottom: 16px;
|
|
|
max-width: 70%;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
padding: 12px 16px;
|
|
|
border-radius: 18px;
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
.sent .message-content {
|
|
|
background-color: #1677ff;
|
|
|
color: white;
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
.received .message-content {
|
|
|
background-color: white;
|
|
|
color: #333;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
margin-top: 4px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.received .message-time {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.chat-input {
|
|
|
padding: 16px;
|
|
|
background-color: white;
|
|
|
border-top: 1px solid #e8e8e8;
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.message-input {
|
|
|
flex: 1;
|
|
|
border: 1px solid #d9d9d9;
|
|
|
border-radius: 20px;
|
|
|
padding: 10px 16px;
|
|
|
font-size: 14px;
|
|
|
outline: none;
|
|
|
resize: none;
|
|
|
max-height: 100px;
|
|
|
font-family: inherit;
|
|
|
}
|
|
|
|
|
|
.message-input:focus {
|
|
|
border-color: #1677ff;
|
|
|
}
|
|
|
|
|
|
.send-button {
|
|
|
background-color: #1677ff;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 20px;
|
|
|
padding: 10px 20px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
transition: background-color 0.2s;
|
|
|
}
|
|
|
|
|
|
.send-button:hover {
|
|
|
background-color: #4096ff;
|
|
|
}
|
|
|
|
|
|
.connection-status {
|
|
|
background-color: #f5f5f5;
|
|
|
padding: 8px 20px;
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
border-top: 1px solid #e8e8e8;
|
|
|
}
|
|
|
|
|
|
.status-connected {
|
|
|
color: #52c41a;
|
|
|
}
|
|
|
|
|
|
.status-disconnected {
|
|
|
color: #ff4d4f;
|
|
|
}
|
|
|
|
|
|
.info-box {
|
|
|
background-color: #e6f7ff;
|
|
|
border: 1px solid #91d5ff;
|
|
|
border-radius: 8px;
|
|
|
padding: 16px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.info-box h3 {
|
|
|
color: #1890ff;
|
|
|
margin-bottom: 8px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.info-box p {
|
|
|
color: #666;
|
|
|
line-height: 1.6;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.account-info {
|
|
|
font-family: monospace;
|
|
|
background-color: #f5f5f5;
|
|
|
padding: 8px;
|
|
|
border-radius: 4px;
|
|
|
margin: 4px 0;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="info-box">
|
|
|
<h3>聊天测试说明</h3>
|
|
|
<p>这个页面模拟了两个用户之间的实时聊天。由于这是一个模拟环境，消息会在两个窗口之间传递，但不会实际连接到后端服务器。</p>
|
|
|
<p>模拟账号信息：</p>
|
|
|
<div class="account-info">账号1: 手机号 '13800138001', 密码 'password1', 用户ID: 1</div>
|
|
|
<div class="account-info">账号2: 手机号 '13800138002', 密码 'password2', 用户ID: 2</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<!-- 用户1的聊天窗口 -->
|
|
|
<div class="chat-window">
|
|
|
<div class="chat-header">用户1 (ID: 1) - 发送给用户2</div>
|
|
|
<div class="chat-messages" id="messages-user1">
|
|
|
<div class="message received">
|
|
|
<div class="message-content">你好，用户1！</div>
|
|
|
<div class="message-time">12:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-input">
|
|
|
<textarea class="message-input" id="input-user1" placeholder="输入消息..." rows="1"></textarea>
|
|
|
<button class="send-button" onclick="sendMessage('user1')">发送</button>
|
|
|
</div>
|
|
|
<div class="connection-status" id="status-user1">
|
|
|
<span class="status-connected">已连接 (模拟)</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 用户2的聊天窗口 -->
|
|
|
<div class="chat-window">
|
|
|
<div class="chat-header">用户2 (ID: 2) - 发送给用户1</div>
|
|
|
<div class="chat-messages" id="messages-user2">
|
|
|
<div class="message sent">
|
|
|
<div class="message-content">你好，用户1！</div>
|
|
|
<div class="message-time">12:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-input">
|
|
|
<textarea class="message-input" id="input-user2" placeholder="输入消息..." rows="1"></textarea>
|
|
|
<button class="send-button" onclick="sendMessage('user2')">发送</button>
|
|
|
</div>
|
|
|
<div class="connection-status" id="status-user2">
|
|
|
<span class="status-connected">已连接 (模拟)</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
// 模拟WebSocket连接
|
|
|
let模拟WebSocket = {
|
|
|
send: function(message) {
|
|
|
console.log('模拟发送消息:', message);
|
|
|
// 这里只是模拟，不会实际发送到服务器
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 自动调整文本框高度
|
|
|
function adjustTextareaHeight(textarea) {
|
|
|
textarea.style.height = 'auto';
|
|
|
textarea.style.height = Math.min(textarea.scrollHeight, 100) + 'px';
|
|
|
}
|
|
|
|
|
|
document.getElementById('input-user1').addEventListener('input', function() {
|
|
|
adjustTextareaHeight(this);
|
|
|
});
|
|
|
|
|
|
document.getElementById('input-user2').addEventListener('input', function() {
|
|
|
adjustTextareaHeight(this);
|
|
|
});
|
|
|
|
|
|
// 监听回车发送
|
|
|
document.getElementById('input-user1').addEventListener('keypress', function(e) {
|
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
|
e.preventDefault();
|
|
|
sendMessage('user1');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.getElementById('input-user2').addEventListener('keypress', function(e) {
|
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
|
e.preventDefault();
|
|
|
sendMessage('user2');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 发送消息
|
|
|
function sendMessage(sender) {
|
|
|
const input = document.getElementById(`input-${sender}`);
|
|
|
const message = input.value.trim();
|
|
|
|
|
|
if (!message) return;
|
|
|
|
|
|
// 获取当前时间
|
|
|
const now = new Date();
|
|
|
const time = now.getHours().toString().padStart(2, '0') + ':' +
|
|
|
now.getMinutes().toString().padStart(2, '0');
|
|
|
|
|
|
// 清除输入框
|
|
|
input.value = '';
|
|
|
input.style.height = 'auto';
|
|
|
|
|
|
// 确定接收者
|
|
|
const receiver = sender === 'user1' ? 'user2' : 'user1';
|
|
|
|
|
|
// 构建消息对象（模拟WebSocket消息格式）
|
|
|
const messageObj = {
|
|
|
type: 'CHAT',
|
|
|
content: message,
|
|
|
senderId: sender === 'user1' ? 1 : 2,
|
|
|
receiverId: receiver === 'user1' ? 1 : 2,
|
|
|
createdAt: now.toISOString()
|
|
|
};
|
|
|
|
|
|
// 模拟发送消息
|
|
|
模拟WebSocket.send(JSON.stringify(messageObj));
|
|
|
|
|
|
// 在发送者窗口显示消息
|
|
|
addMessageToChat(`messages-${sender}`, 'sent', message, time);
|
|
|
|
|
|
// 在接收者窗口显示消息
|
|
|
addMessageToChat(`messages-${receiver}`, 'received', message, time);
|
|
|
}
|
|
|
|
|
|
// 添加消息到聊天窗口
|
|
|
function addMessageToChat(containerId, type, content, time) {
|
|
|
const container = document.getElementById(containerId);
|
|
|
const messageEl = document.createElement('div');
|
|
|
messageEl.className = `message ${type}`;
|
|
|
|
|
|
messageEl.innerHTML = `
|
|
|
<div class="message-content">${escapeHtml(content)}</div>
|
|
|
<div class="message-time">${time}</div>
|
|
|
`;
|
|
|
|
|
|
container.appendChild(messageEl);
|
|
|
container.scrollTop = container.scrollHeight;
|
|
|
}
|
|
|
|
|
|
// HTML转义
|
|
|
function escapeHtml(unsafe) {
|
|
|
return unsafe
|
|
|
.replace(/&/g, "&")
|
|
|
.replace(/</g, "<")
|
|
|
.replace(/>/g, ">")
|
|
|
.replace(/"/g, """)
|
|
|
.replace(/'/g, "'");
|
|
|
}
|
|
|
|
|
|
// 模拟系统消息
|
|
|
setTimeout(() => {
|
|
|
const time = new Date().getHours().toString().padStart(2, '0') + ':' +
|
|
|
new Date().getMinutes().toString().padStart(2, '0');
|
|
|
|
|
|
addMessageToChat('messages-user1', 'received', '系统消息：用户2已上线', time);
|
|
|
addMessageToChat('messages-user2', 'received', '系统消息：您已成功连接', time);
|
|
|
}, 1000);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
