/WebChat

web上面的聊天应用

Primary LanguageJavaScript

WebChat

  • web上面的聊天应用
  • 🍉作者: XDEcat
  • 包含前端和服务端
  • ✨前端技术栈:JavaSript、WebSocket、React、Sass、socket.io-client
  • ✨后端技术栈: Node、Express、Nodejs-websocket、socket.io
  • ✨数据库: MongoDB

功能需求

  • 广场:
    1. 晒照片
    2. 水果摊
    3. 小卖部

开发日志

  • 2021/4/12:
    1.axios请求封装,登录与注册功能实现,格式验证🍗
    2.node,登录与注册接口完善🍗
  • 2021/4/13:
    1.记住密码功能 🍗
    2.个人资料修改功能(修改用户名、密码、年龄、性别)、上传头像功能、退出登录 🍖
  • 2021/4/14:
    1.弹出框 √ 🍗
    2.上传头像功能
  • 2021/4/15:
    1.react模态框组件的封装,设置用户头像接口调用 √ 🍖
    2.node后端保存用户头像接口,获取用户头像接口 √ 🍖
  • 2021/4/16:
    解决bug: 用户注册接口异常🍗 get请求跨域问题🍗
    1.上传头像功能实现 (基本实现),multer的使用 🍗
  • 2021/4/17:
    1.头像上传优化,node后端放弃用multer保存文件,采用fs模块保存文件,每个用户头像只产生一个文件🍗
  • 2021/4/18:
    1.修改用户昵称功能实现 🍗
    2.用户信息增加、性别和年龄的显示 🍗
  • 2021/4/19:
    解决bug: 上传完头像时,弹出的框会引发设置昵称的弹出框显示 🍗
    1.消息弹窗组件🍗
    2.优化了设置头像和设置昵称后的显示弹窗以及询问窗口🍗
  • 2021/4/20:
    解决bug: 获取头像请求同时调用引发后端数据库session共用问题、组件更新时,头像闪烁🍗
    1.socekt.io学习、案例、项目中引入🍗
    2.我的好友,我的消息、路由组件编写🍗
  • 2021/4/21:
    1.socket.io 后端服务搭建🍗
    2.前端socket.io引入,工具类
  • 2021/4/22:
    解决bug: 用户设置昵称完成后,显示之前昵称问题🍗
    1.socket-client 用户连接与关闭,工具类编写🍗
    2.获取好友列表与添加好友接口🍗
  • 2021/4/23:
    1.界面主题色变换、个人资料页优化🍗
    2.消息页面、消息标题栏🍗
  • 2021/4/25:
    1.我的消息,消息栏切换🍗
    2.获取好友列表接口优化🍗
  • 2021/4/26:
    1.新增好友列表页🍗
    2.部分优化🍗
  • 2021/4/27:
    1.点击所选的好友项,弹出信息框🍗
    2.聊天界面🍗
  • 2021/4/28:
    1.应用底部栏优化,去除加号🍗
    2.聊天界面优化🍗
  • 2021/4/29:
    1.编辑用户资料接口🍗
    2.好友列表信息显示🍗
  • 2021/5/6:
    1.好友列表显示优化,对每个li元素的key进行用户id绑定,解决了内部渲染问题🍗
    2.用户的编辑资料功能实现🍗
  • 2021/5/10:
    1.解决了每个页面的高度自适应,利用了js获取body的高度,减去header和height的高度🍗
    2.好友列表信息展示,以及单击好友显示对应的信息🍗
    3.编辑资料和修改昵称显示的优化🍗
  • 2021/5/15:
    1.增加了redux模块,对聊天信息的状态进行管理 🍗
    2.私聊界面优化 🍗
  • 2021/5/16:
    1.聊天界面好友信息显示 🍗
    2.聊天功能实现,发送信息与接收信息🍗
    2.个人页面优化,私聊界面优化 🍗
  • 2021/5/17:
    1.聊天界面优化,消息框高度和宽度自适应 🍗
    2.消息缓存机制,搭建成功,消息保存,添加记录🍗
    2.根据用户id获取消息列表接口🍗
  • 2021/6/22:
    1.熟悉之前的项目流程工作以及代码 🍗
    2.完成消息历史记录功能 🍗
  • 2021/6/23:
    1.完成了清除消息记录功能 🍗
    2.编写了确认框组件和toast组件 🍗
  • 2021/7/21:
    1.完成了好友搜索、好友添加以及删除功能 🍗
    2.接口优化、页面优化、一些小bug修复 🍗
  • 2021/8/4:
    1.界面更新,个人中心,好友列表页,好友信息页 🍗
    2.更新密码功能,编辑资料,喜欢与被喜欢 🍗
    3.部分功能优化 🍗
  • 2021/8/5:
    1.解决bug,聊天界面用户昵称显示问题 🍗
    2.更新密码功能,编辑资料,喜欢与被喜欢 🍗
    3.部分功能优化 🍗
  • 2021/8/27:
    1.解决bug,聊天界面信息滑动到底部问题 🍗
  • 2021/9/14:
    1.好友申请功能,同意或者拒绝🍗
    2.信息查看页🍗
    3.开发群聊系统🍗
  • 2021/9/19:
    1.解决bug---字母过长无法换行问题导致聊天框超出屏幕🍗
    2.解决bug---首次进入聊天界面时,消息列表无法自动滑到底部问题🍗
    2.优化默认头像以及头像显示🍗
    3.开发消息弹窗组件🍗
    4.大世界聊天(群聊系统)🍗
    5.通知组件优化🍗
    6.部分界面优化🍗
  • 2021/9/20:
    1.解决bug---默认路由问题🍗
    2.优化了聊天界面和通知组件,界面调整🍗
    3.聊天背景🍗
  • 2021/10/9:
    1.表情模块🍗
    2.解决bug:接收聊天数据错乱,无法接收指定好友的信息。🍗
    3.优化了好友信息通知🍗
    4.重构了好友聊天组件的代码,class--->function🍗