Vue实现的聊天系统「建议收藏」

Vue实现的聊天系统

大家好,又见面了,我是全栈君。

项目地址: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、最近会话列表页面(最近会话按照最后消息时间排序,在发送新的消息后该会话会排序到第一条)

Vue实现的聊天系统「建议收藏」

2、好友分组、群聊分类

Vue实现的聊天系统「建议收藏」
Vue实现的聊天系统「建议收藏」

3、新消息提醒、已读提醒

Vue实现的聊天系统「建议收藏」
Vue实现的聊天系统「建议收藏」

4、空间动态

Vue实现的聊天系统「建议收藏」

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

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

Vue实现的聊天系统「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111801.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • CentOS 7 下使用yum安装MySQL5.7.20 最简单 图文详解

    CentOS 7 下使用yum安装MySQL5.7.20 最简单 图文详解CentOS7默认数据库是mariadb,但是好多用的都是mysql,但是CentOS7的yum源中默认好像是没有mysql的。上一篇安装的是5.6的但是我想安装5.7的yum安装是最简单的尝试过编译安装各种问题,最后就决定用yum。(经过一段时间的学习又写了一篇用源码安装mysql5.7.22的点击打开链接)1.卸载先停掉mysql进程没有安装过的可以直接跳过…

  • 狂神说SpringCloud学习笔记[通俗易懂]

    狂神说SpringCloud学习笔记[通俗易懂]注:本文根据哔哩哔哩Up主狂神老师:狂神说Java所讲的springcloud课程所作的笔记,狂神老师springcloud哔哩哔哩视频连接:https://www.bilibili.com/video/BV1jJ411S7xr?p=18spring,课程代码可用在狂神老师的Java交流群中获取,或者到我的码云仓库https://gitee.com/cao_shi_peng/dashboard/projects获取,如果想进一步深入学习springcloud详细内容可自行参考Spring

  • Oracle数据库备份与还原语句

    Oracle数据库备份与还原语句1、备份语句(数据库导出)expusername/password@ip:port/servernamefile=”C:\Users\Administrator\Desktop\kpms.bak”full=yignore=y;2、导入语句(数据库还原)①全部导入:imp用户名/密码@数据库实例名full=yfile=C:\Users\Administrator\Desktop\kpms.bakignore=y;②单表导入:impusername/password@ip:p..

  • webpack(5)webpack处理css文件[通俗易懂]

    webpack(5)webpack处理css文件[通俗易懂]css文件处理-准备工作(以下项目配置都是基于上一篇webpack(4)的基础上)在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。这里我们就在src目录中创建一个n

  • 古老server源代码迁移到新server

    古老server源代码迁移到新server

  • 数据仓库的概念

    数据仓库的概念

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号