hnu202326010206
/
cserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
cserver/FEATURES.md

6.7 KiB
Raw Permalink Blame History Escape

功能特性详解

💬 消息显示功能

发送者姓名显示

每条消息都会在气泡上方显示发送者的姓名，方便识别消息来源。

视觉效果

接收的消息（左侧）：

张三
┌─────────────────┐
│ 你好，在吗？    │
│            10:30│
└─────────────────┘

发送的消息（右侧）：

                  李四
        ┌─────────────────┐
        │ 在的，有什么事？│
        │            10:31│
        └─────────────────┘

样式特点

  1. 接收消息

    • 姓名显示在左侧
    • 颜色：深灰色 (#555)
    • 字体：12px，加粗

  2. 发送消息

    • 姓名显示在右侧
    • 颜色：紫色 (#667eea)
    • 字体：12px，加粗

  3. 通用样式

    • 透明度：80%
    • 字母间距：0.3px
    • 与消息气泡间距：4px

实现细节

HTML结构

<div class="message sent">
    <div class="message-wrapper">
        <div class="message-sender">李四</div>
        <div class="message-content">
            <div class="message-text">在的，有什么事？</div>
            <div class="message-info">10:31</div>
        </div>
    </div>
</div>

CSS样式

.message-sender {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0 4px;
    opacity: 0.8;
    letter-spacing: 0.3px;
}

.message.sent .message-sender {
    text-align: right;
    color: #667eea;
}

.message.received .message-sender {
    text-align: left;
    color: #555;
}

JavaScript逻辑

// 确定发送者名字
const senderName = msg.isSent ? username : currentChat;

messageDiv.innerHTML = `
    <div class="message-wrapper">
        <div class="message-sender">${escapeHtml(senderName)}</div>
        <div class="message-content">
            <div class="message-text">${escapeHtml(msg.content)}</div>
            <div class="message-info">${time}</div>
        </div>
    </div>
`;

📝 聊天记录管理

多用户独立记录

系统为每个聊天对象维护独立的聊天记录。

数据结构

chatHistory = {
    'Alice': [
        { content: '你好', timestamp: 123456, isSent: false, read: true },
        { content: '你好啊', timestamp: 123457, isSent: true, read: true }
    ],
    'Bob': [
        { content: 'Hi', timestamp: 123458, isSent: false, read: false }
    ]
}

功能特点

  1. 独立存储

    • 每个用户的聊天记录单独保存
    • 切换用户时自动加载对应记录
    • 会话期间持久保存

  2. 智能加载

    • 切换用户时清空显示区域
    • 加载目标用户的所有历史消息
    • 保持消息顺序和格式

  3. 状态管理

    • 记录消息是否已读
    • 区分发送和接收的消息
    • 保存完整的时间戳

🔔 未读消息提醒

红色徽章显示

用户列表中显示未读消息数量，方便快速识别。

视觉效果

在线用户
├─ Alice        [2]  ← 红色徽章
├─ Bob          [5]  ← 红色徽章
└─ Charlie           ← 无未读消息

功能特点

  1. 实时更新

    • 收到新消息立即显示徽章
    • 切换到用户后自动清除
    • 动态计算未读数量

  2. 视觉设计

    • 红色背景 (#f44336)
    • 白色文字
    • 圆角徽章
    • 最小宽度18px

  3. 交互反馈

    • 选中用户时徽章变半透明
    • 标记为已读后徽章消失
    • 平滑的过渡动画

🎨 界面设计

消息气泡

接收消息（白色气泡）

  • 背景：白色
  • 文字：深色 (#333)
  • 位置：左侧对齐
  • 圆角：18px（左下角4px）

发送消息（紫色渐变气泡）

  • 背景：紫色渐变 (#667eea → #764ba2)
  • 文字：白色
  • 位置：右侧对齐
  • 圆角：18px（右下角4px）

用户列表

在线用户项

  • 绿色状态点
  • 用户名
  • 未读徽章（如有）
  • 悬停效果：浅蓝色背景
  • 选中效果：紫色渐变背景

交互效果

  • 悬停：向右平移5px
  • 点击：切换到该用户聊天
  • 选中：高亮显示

⌨️ 快捷操作

键盘快捷键

  1. 发送消息

    • 按键：Enter
    • 功能：发送当前输入的消息

  2. 登录

    • 按键：Enter（在用户名输入框）
    • 功能：提交登录

自动聚焦

  1. 登录页面

    • 自动聚焦到用户名输入框
    • 方便快速输入

  2. 聊天页面

    • 选择用户后自动聚焦到消息输入框
    • 提高输入效率

📱 响应式设计

桌面端（>768px）

  • 完整的侧边栏（300px）
  • 宽敞的聊天区域
  • 消息最大宽度65%

平板端（768px - 480px）

  • 缩小的侧边栏（250px）
  • 优化的布局
  • 消息最大宽度80%

移动端（<480px）

  • 可折叠侧边栏
  • 全屏聊天体验
  • 触摸优化

🔒 安全特性

XSS防护

所有用户输入都经过HTML转义处理：

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

输入验证

  1. 用户名

    • 长度限制：1-20字符
    • 不能为空
    • 自动去除首尾空格

  2. 消息内容

    • 长度限制：1-500字符
    • 不能为空
    • 自动去除首尾空格

🎯 使用技巧

高效聊天

  1. 快速切换用户

    • 直接点击用户列表中的用户名
    • 聊天记录自动加载

  2. 查看未读消息

    • 关注红色徽章数字
    • 优先处理未读消息多的用户

  3. 快速发送

    • 使用Enter键快速发送
    • 无需点击发送按钮

多任务处理

  1. 多标签页

    • 可以打开多个标签页
    • 使用不同用户名登录
    • 方便测试和演示

  2. 跨设备

    • 在不同设备上登录
    • 实时同步在线状态
    • 无缝切换设备

📊 性能优化

消息渲染

  1. 按需加载

    • 只显示当前聊天对象的消息
    • 切换用户时重新渲染
    • 减少DOM操作

  2. 平滑滚动

    • 新消息自动滚动到底部
    • 使用smooth行为
    • 提升用户体验

内存管理

  1. 会话存储

    • 聊天记录仅在会话期间保存
    • 关闭页面后自动清除
    • 不占用持久存储

  2. 状态管理

    • 使用JavaScript对象存储
    • 高效的数据访问
    • 最小化内存占用

🎉 总结

系统提供了完整的聊天功能，包括：

✅ 清晰的发送者姓名显示 ✅ 独立的聊天记录管理 ✅ 直观的未读消息提醒 ✅ 美观的界面设计 ✅ 流畅的交互体验 ✅ 完善的安全防护 ✅ 优秀的性能表现

立即访问 http://120.46.87.202:8080 体验完整功能！