当前程序是一个多用户聊天界面的开发,完全使用Cursor通过当前文档提示一步一步生成。
- http协议实现一个接口返回一个html页面,页面内容如下。
- 一个输入框
- 一个按钮
- 一个显示结果的区域
- 将html文件数据单独使用一个index.html的文件存放。
- 添加一个新的接口http post接口,接收一个json的数据,返回json的数据
- 实现一个WebSocket的接口
- 实现多用户聊天页面,以及后端WebSocket接口
- 提供修改用户名接口与页面
- 优化前端页面使前端页面更加现代化
- 让当前用户发送的消息展示在右边,对向用户发送的消息展示在左边
- 用户修改名称后需要提现在用户的消息体中,用户修改名称后需要显式的告诉其他用户[A1]用户名称修改为l[A2]
-
用户名显示优化
- 新用户加入时自动生成初始用户名(例如:"用户123")
- 用户列表实时显示最新的用户名
- 用户修改名称时显示变更信息(例如:"用户A 已将用户名修改为 用户B")
- 所有消息都显示发送者的当前用户名
-
消息显示优化
- 当前用户消息:
- 显示在右侧
- 仅显示消息内容
- 使用绿色背景
- 其他用户消息:
- 显示在左侧
- 显示用户名和消息内容
- 使用蓝色背景
- 系统消息:
- 居中显示
- 包含用户加入/离开/重命名等信息
- 使用不同颜色区分不同类型的系统消息
- 当前用户消息:
-
用户状态同步
- 用户加入时广播欢迎消息
- 用户离开时更新用户列表并通知其他用户
- 用户修改名称后实时更新所有相关显示
- 确保所有用户看到的信息保持同步
-
交互体验优化
- 消息气泡添加方向指示箭头
- 新消息自动滚动到底部
- 用户名修改成功时显示通知
- 输入框自动获取焦点
项目采用了清晰的模块化结构,目录组织如下:
src/
├── models/ # 数据模型
│ ├── mod.rs # 模块导出
│ ├── message.rs # WebSocket相关消息模型
│ └── request.rs # HTTP请求响应模型
├── handlers/ # 请求处理器
│ ├── mod.rs # 模块导出
│ ├── http.rs # HTTP请求处理
│ └── websocket.rs # WebSocket处理
├── utils/ # 工具和常量
│ └── mod.rs
└── main.rs # 程序入口
-
模块职责划分
- mod.rs 文件只负责模块导出,不包含具体实现
- 相关功能被分组到独立的文件中
- 每个文件都有明确的单一职责
-
可维护性提升
- 文件体积更小,更易于理解和修改
- 相关代码集中存放,便于查找
- 减少了文件间的依赖关系
-
可扩展性增强
- 便于添加新的模型或处理器
- 方便重用现有代码
- 容易添加新的功能模块
-
测试友好
- 每个模块可以独立测试
- 易于模拟依赖关系
- 便于编写单元测试
-
协作优化
- 多人开发时减少冲突
- 清晰的职责划分
- 便于代码审查
-
代码组织
- 使用 mod.rs 进行模块管理
- 相关功能代码放在同一目录
- 清晰的模块层级结构
-
错误处理
- 统一的错误处理方式
- 清晰的错误信息返回
- 合理的错误传播
-
类型设计
- 使用强类型保证类型安全
- 合理的数据结构设计
- 清晰的类型定义
-
API设计
- RESTful API 设计
- WebSocket 接口规范
- 统一的响应格式