cserver/web

Web客户端说明

文件结构

web/
├── index.html    # 主HTML文件
├── style.css     # 样式文件
├── app.js        # JavaScript逻辑
└── README.md     # 本文件

功能特性

界面设计

• ✨ 现代化渐变紫色背景
• 📱 完全响应式设计，支持移动端
• 🎨 优雅的消息气泡样式
• 💫 平滑动画效果
• 🌈 渐变按钮和交互效果

核心功能

• 🔐 用户登录（支持自定义服务器地址）
• 👥 实时在线用户列表
• 💬 点对点私聊
• ⏰ 消息时间戳
• 🔄 自动重连提示
• ⌨️ 回车键快速发送
• 🚪 退出登录功能

使用方法

1. 启动服务器

# Linux/openEuler
./quick_start.sh

# Windows
quick_start.bat

2. 打开浏览器

访问：http://localhost:8080

3. 登录

1. 输入用户名
2. （可选）输入服务器地址，默认为 localhost:8080
3. 点击登录或按回车键

4. 开始聊天

1. 在左侧用户列表中选择要聊天的用户
2. 在底部输入框输入消息
3. 点击发送按钮或按回车键发送

技术实现

WebSocket通信

客户端使用WebSocket协议与服务器进行实时通信：

ws = new WebSocket('ws://localhost:8080');

消息格式

所有消息使用JSON格式：

{
  "type": "PRIVATE_MSG",
  "sender": "Alice",
  "receiver": "Bob",
  "content": "Hello!",
  "timestamp": 1234567890
}

消息类型

• LOGIN - 用户登录
• LOGOUT - 用户登出
• PRIVATE_MSG - 私聊消息
• USER_LIST - 在线用户列表
• ACK - 服务器确认
• ERROR - 错误消息

响应式设计

桌面端 (>768px)

• 完整的侧边栏和聊天区域
• 宽敞的消息显示区域
• 大号按钮和输入框

平板端 (768px - 480px)

• 缩小的侧边栏
• 优化的消息宽度
• 适中的按钮尺寸

移动端 (<480px)

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

浏览器兼容性

支持所有现代浏览器：

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 11+
• ✅ Edge 79+
• ✅ Opera 47+

自定义配置

修改默认服务器地址

编辑 app.js 第4行：

let serverAddress = 'your-server:8080';

修改主题颜色

编辑 style.css 中的渐变色：

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

修改最大消息长度

编辑 index.html 中的 maxlength 属性：

<input ... maxlength="500">

安全注意事项

1. 生产环境使用HTTPS/WSS

   • 当前使用的是 ws://（非加密）
   • 生产环境应使用 wss://（加密）

2. 输入验证

   • 客户端已实现基本的HTML转义
   • 服务器端应进行额外验证

3. XSS防护

   • 使用 textContent 而非 innerHTML 处理用户输入
   • 实现了 escapeHtml() 函数

故障排除

连接失败

• 检查服务器是否启动
• 检查服务器地址是否正确
• 检查防火墙设置

无法发送消息

• 确认已选择聊天对象
• 检查WebSocket连接状态
• 查看浏览器控制台错误信息

消息不显示

• 刷新页面重新登录
• 检查浏览器控制台
• 确认对方在线

开发调试

打开浏览器开发者工具（F12）：

• Console - 查看日志和错误
• Network - 查看WebSocket连接
• Application - 查看存储和缓存

未来扩展

可以添加的功能：

• 📁 文件传输
• 🖼️ 图片发送和预览
• 😊 表情符号支持
• 🔔 消息通知
• 💾 聊天记录保存
• 🎤 语音消息
• 📹 视频通话

许可证

MIT License