一个使用 WebSocket 实现的聊天室

# 图例

登录页面
An image

聊天室页面,分为 pc 端 和 手机端

An image An image

使用媒体查询监控,也适用于移动端

# 实现思路

  • 前端页面部分

    • 聊天记录 part:用 logs 来记录所有的该聊天室的聊天记录

    • 在线成员 part:用 onlineMembers 来记录所有的该聊天室的在线成员

    • 发送消息 part:用 ant-input 实现即可

  • 后端部分

    • 表设计: 聊天记录表、用户成员表、聊天室表

    • 接口: websocket 实现即时通讯

详细的设计文档,可以看后面的文章