Web聊天室开发 - 基本功能

我的第一个Web项目

第一步 确定目标（网站是如何运行的、前后端分离开发的基本结构图）

• 包括在线聊天、论坛、购物等多功能的综合网站

第二步 确定技术路线

• 前端 采用Angular最新的Angular 9框架 使用Typescript进行脚本编程 -> 一定的学习/熟悉时间
• 后端 采用集成度较高、配置便利的SpringBoot框架 使用Java编程 -> 一定的学习/熟悉时间
• 数据库 采用MySQL 默认使用InnoDB -> 学习MySQL语法 学习使用JDBC进行 数据库访问操作（之前已学习MySQL C++ Connector） 抽象数据访问层
• 通信方式 由于实时在线聊天需要大量的服务器主动推送 因此选择主要使用WebSocket进行数据交换/通信 辅以普通的Http请求
• 模板 选择一套界面模板（便于快速上手Angular框架 同时减少需要在界面布局设计上考虑的花费） -> 模板地址
• 服务器 服务器采用各大厂提供的云服务器服务（可选AWS GCP等） 安装Ubuntu系统
• 域名 从GoDaddy.com购得域名 peinanweng.com 花费$1
• 证书 用于Https和Wss安全连接的SSL证书 从Let’s Encrypted处申请获得
• 开发环境 Windows下完成 前端使用VSCode 后端使用Intellij IDEA 使用PuTTY以及其PSFTP功能访问服务器、文件传输
• 反向代理 使用Nginx进行反向代理 用于方便配置地址转发 解决请求跨域问题等

第三步 设计通信协议

• 前端与后端交互的关键所在
• 服务分级与分发
  • 账号管理
    • 账号注册
    • 账号登录
    • 账号下线
    • 账号信息更改
  • 通用控制信号处理
    • 用于服务器与客户端间的轻量通信 主要用于提示信息
  • 聊天室业务
    • 文本分发
      • 群聊转发
      • 私聊转发
    • 联系人申请
      • 新朋友
      • 新群组
      • 加入群组
    • 视频通信请求
      • 请求连接
      • 同意连接
      • 拒绝连接
      • 建立连接
      • 连接同步
      • 断开连接
    • 文件上传请求
      • 文件上传请求
  • 电商业务
  • 论坛业务
  • 其他业务等

第四步 账号管理

• 前端部分
  • 设计账号登录的脚本逻辑
    • 使用弹出式窗体
      • 实现采用Angular Material官方库中的Mat-Dialog相关组件完成
    • 输入登录信息后发送请求至服务器 等待响应
    • 收到响应后给出对应操作（错误/成功并跳转页面）
  • 设计账号登录与界面跳转相关的脚本逻辑
    • 未登录时 禁止某些页面的访问与操作
• 后端部分
  • 管理WebSocket连接
    • 使用HashMap建立并管理用户与连接的映射关系
• 数据库部分
  • 设计账号数据表 主要包括账号/用户名/密码/登入登出时间/个人信息等
  • 完成后端数据访问层账号管理部分代码
    • has_account: 是否存在账号
    • has_group: 是否存在群组
    • new_account: 创建新账号并返回ID
    • new_group: 创建新群组并返回ID
    • change_account_name: 更改账户名
    • change_group_name: 更改群组名
    • change_password: 更改密码
    • account_login: 登录操作
    • account_logout: 注销操作
    • get_account_name: 获取用户名
    • get_group_name: 获取群组名
    • get_account_info: 获取用户全部信息
    • get_group_info: 获取群组全部信息
    • is_friend: 是否为好友
    • is_member: 是否为群组成员
    • make_new_friend: 建立好友关系
    • group_new_member: 加入新群组成员
    • delete_friend: 删除好友关系
    • delete_member: 删除群组成员

第五步 跨用户文本传输

• 前端
  • 处理键盘输入
    • HTML 表单
    • HTML 输入标签
  • 发送
    • 组成符合协议格式的请求包
    • 调用 WebSocket 控制服务发起消息传输请求
• 后端
  • 判断消息来源确定转发策略
    • 私人消息
      • 转发至双方
    • 群组消息
      • 转发至全体群组成员
• 离线传输
  • 建立离线消息数据库
    • 数据访问层
      • new_offline_message: 存入一条离线消息
      • get_offline_messages: 获取指定用户所有离线消息列表
  • 消息转发时判断用户是否在线
    • 在线 -> 直接通过响应连接推送
    • 不在线 -> 转存至离线消息数据库
  • 离线用户再次登录时 pop 响应离线消息队列

第六步 文件上传与文件转发

• 基本策略
  • WebSocket和HTTP请求结合使用
    • WebSocket负责链接转发和推送（即一个包含了链接的文本包）
    • HTTP请求负责处理文件上传和下载
• 前端
  • 使用弹出式窗体用于文件上传交互
    • 实现采用Angular Material官方库中的Mat-Dialog相关组件完成
    • 第一步 选择文件并推至前端
    • 第二步 确认无误文件推至服务器 （传输过程中封装为Base64）
  • 发起 WebSocket 文本数据请求用于链接转发
  • 发起 POST 请求用于文件上传
• 后端
  • HTTP Controller建立地址映射处理文件上传请求
    • Base64解码 导出文件格式 文件名
    • 存入本地相应位置
    • 通知 WebSocket 控制中心 使其推送下载链接至各用户

第七步 实时视频语音通信

• 采用WebRTC方案
• 前端
  • 设计视频窗体与控制按钮
  • 处理相关逻辑
    • 发起请求
    • 处理请求
• 后端
  • 后端

第八步 本地存储

• 使用Cookies存储
  • 登录信息记录 用于自动登录
  • 聊天记录

第九步 优化界面人机交互

附 工程结构

• 前端
  • 组件
    • 联系人界面 ChatMenuComponent
    • 聊天界面 ChatRoomComponent
    • 弹出式窗体
      • 登陆窗体 SignWindow
      • 文件上传窗体 FileUploadWindow
  • 服务
    • WebSocket连接服务 WebSocketConnectionService
    • 本地数据存储服务 LocalDatabaseService
    • 输入合法性检查服务 InputCheckerService
    • 弹出式窗体统一管理服务 WindowManagementService
• 后端
  • HTTP请求处理模块
    • 文件上传
  • WebSocket请求处理模块
    • 账号管理请求
    • 聊天室相关请求
  • 数据访问层

附 前端/后端服务依赖关系图

---

• Previous
  Web聊天室开发 - 基于WebRTC的多人实时视频通信
• Next
  External Merge Sort

---