前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue实现的聊天系统

Vue实现的聊天系统

作者头像
码农编程进阶笔记
发布于 2021-07-20 08:11:07
发布于 2021-07-20 08:11:07
1.7K0
举报

项目地址:github.com/CCZX/wechat目前项目一直在更新中。欢迎大家留下宝贵的意见。

一、具备的功能

  1. 好友之间聊天,支持问题、图片、表情、音视频通话以及白板(适用WebRTC实现)。
  2. 对好友支持备注、分组功能,分组可以添加、修改、删除。
  3. 好友之间的消息支持已读状态提醒,可以即时的知道对方是否已读消息。
  4. 在线好友统计,在每个分组中可以查看当前在线好友的数量,并对在线好友的头像做高亮处理。
  5. 群聊,群聊目前只支持文字、图片、表情的形式,目前群聊消息也不支持已读提醒(后续完善)。
  6. 空间,类似于QQ空间,可以发表自己的动态、查看好友的动态
  7. 动态编辑,支持对空间进行删除、编辑的操作。
  8. 动态互动,支持点赞、评论、评论回复功能。
  9. 添加好友、添加群聊,在添加后需要对方同意。
  10. 日程管理,支持新建日程、删除日程的功能。
  11. 后台管理:独立的项目,使用React实现。
  12. 更多细节功能在后续几天我线上部署代码后欢迎来体验。

二、技术栈

Vue、Vuex、Element-UI、React、axios、sass、ES6、WebSocket、Node等。

三、难点

  1. 各种组件的拆分,项目文件结构。
  2. 修改用户分组、分组后用户界面即时响应。
  3. 在获取会话后,对每条会话最后一条消息的获取处理逻辑。
  4. 对接七牛云实现实现图片的上传。
  5. webRTC技术。
  6. 收到消息后即时提醒以及未读消息的数量提醒。
  7. 消息已读提醒设置。
  8. 用户退出登录后,后端登录信息的即时清除。
  9. 空间动态的评论以及回复评论实现。
  10. 不同页面组件之间执行操作后的响应。

四、项目截图

1、最近会话列表页面(最近会话按照最后消息时间排序,在发送新的消息后该会话会排序到第一条)
2、好友分组、群聊分类
3、新消息提醒、已读提醒
4、空间动态

该项目本人最近会一直跟进,直到实现一个较为完善的聊天系统,后续再进行优化升级。项目地址:github.com/CCZX/wechat 欢迎大家提出宝贵的意见,

链接:https://juejin.im/post/5e81a04ef265da47fb46d338

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 码农编程进阶笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、具备的功能
  • 二、技术栈
  • 三、难点
  • 四、项目截图
    • 1、最近会话列表页面(最近会话按照最后消息时间排序,在发送新的消息后该会话会排序到第一条)
    • 2、好友分组、群聊分类
    • 3、新消息提醒、已读提醒
    • 4、空间动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档