Vue实现的聊天系统可线上访问了
2020/4/10 11:02:40
本文主要是介绍Vue实现的聊天系统可线上访问了,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近把聊天系统的功能做了一些完善,然后把后台管理的功能实现了。经过自己本人的一番调试没有太大的bug,晚上就跟着部署在服务器上了。
线上地址
前台:co-messager.chenr.cn/#/index (请使用PC谷歌浏览器访问)
如果在使用中发现什么问题希望大家提出宝贵的意见哟。项目地址:github.com/CCZX/wechat 目前项目一直在更新中。欢迎大家留下宝贵的意见。
注意:
- 上传文件都还没有完成。
- webRTC相关使用可能不稳定。
- 推荐一个朋友圈很多的朋友链接:co-messager.chenr.cn/#/user/5d9d…
- 由于代码优化不够加上水管服务器,第一次访问可能会比较慢请耐心等待。
- 如发现问题请告诉我哟。
上一篇内容:
一、具备的功能
- 好友之间聊天,支持问题、图片、表情、音视频通话以及白板(适用WebRTC实现)。
- 对好友支持备注、分组功能,分组可以添加、修改、删除。
- 好友之间的消息支持已读状态提醒,可以即时的知道对方是否已读消息。
- 在线好友统计,在每个分组中可以查看当前在线好友的数量,并对在线好友的头像做高亮处理。
- 群聊,群聊目前只支持文字、图片、表情的形式,目前群聊消息也不支持已读提醒(后续完善)。
- 空间,类似于QQ空间,可以发表自己的动态、查看好友的动态。
- 动态编辑,支持对空间进行删除、编辑的操作。
- 动态互动,支持点赞、评论、评论回复功能。
- 添加好友、添加群聊,在添加后需要对方同意。
- 日程管理,支持新建日程、删除日程的功能。
- 后台管理:独立的项目,使用React实现。
- 更多细节功能在后续几天我线上部署代码后欢迎来体验。
二、技术栈
Vue、Vuex、Element-UI、React、axios、sass、ES6、WebSocket、Node等。
三、难点
- 各种组件的拆分,项目文件结构。
- 修改用户分组、分组后用户界面即时响应。
- 在获取会话后,对每条会话最后一条消息的获取处理逻辑。
- 对接七牛云实现实现图片的上传。
- webRTC技术。
- 收到消息后即时提醒以及未读消息的数量提醒。
- 消息已读提醒设置。
- 用户退出登录后,后端登录信息的即时清除。
- 空间动态的评论以及回复评论实现。
- 不同页面组件之间执行操作后的响应。
四、项目截图
1、最近会话列表页面(最近会话按照最后消息时间排序,在发送新的消息后该会话会排序到第一条)
2、好友分组、群聊分类
3、新消息提醒、已读提醒
4、空间动态
该项目本人最近会一直跟进,直到实现一个较为完善的聊天系统,后续再进行优化升级。项目地址:github.com/CCZX/wechat 欢迎大家提出宝贵的意见,如果能提
PR
或者issues
就更好了。如果你觉得项目还可以请留下你的star✨
吧🌹。
这篇关于Vue实现的聊天系统可线上访问了的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南