聊天系统实现

最近把聊天系统的功能作了一些完善，而后把后台管理的功能实现了。通过本身本人的一番调试没有太大的bug，晚上就跟着部署在服务器上了。

线上地址

前台：http://co-messager.chenr.cn （请使用PC谷歌浏览器访问）

若是在使用中发现什么问题但愿你们提出宝贵的意见哟。项目地址： https://github.com/CCZX/wechat
目前项目一直在更新中。欢迎你们留下宝贵的意见。

注意：

1. 上传文件都尚未完成。
2. webRTC相关使用可能不稳定。
3. 推荐一个朋友圈不少的朋友连接：http://co-messager.chenr.cn/#...
4. 因为代码优化不够加上水管服务器，第一次访问可能会比较慢请耐心等待。
5. 如发现问题请告诉我哟。

功能

• [x] 登录注册
• [x] 单聊
• [x] 群聊
• [x] 历史消息
• [x] 图片发送
• [ ] 文件发送
• [ ] 代码片断发送
• [x] 表情发送
• [x] 白板协做
• [x] 音视频聊天
• [x] 消息已读提醒
• [x] 好友分组
• [x] 好友备注
• [x] 好友上线提醒
• [x] 在线用户头像高亮
• [x] 添加好友
• [x] 添加群聊
• [x] 朋友圈功能
• [x] 发表朋友圈
• [x] 好友朋友圈
• [x] 朋友圈动态点赞
• [x] 朋友圈动态评论
• [x] 朋友圈动态回复评论
• [x] 日程设置

概要

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。

系统功能图

普通用户

管理员

技术路线

本项目为先后端分离的开发模式

• 客户端使用Vue、VueX、Vue-Router等；
• 管理员端使用React、antd等技术栈；
• 后端使用的是node.js；
• 数据库使用的是MongoDB；
• 在实现聊天的全双工数据通讯使用的是WebSocket。

启动项目

• 启动服务器（3333端口）

cd chatServer
npm install
node app.js

• 启动客户端（8080端口）

cd chatClient
npm install
npm run dev

• 启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动完成后流群访问localhost:8080以及localhost:3000能够分别访问客户端以及管理员端。

项目打包

1. 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；
2. 管理员端在chatAdmin的build目录下，须要本身本身手动将整个build目录复制到chatServer文件夹的public目录下，而后修改build目录文件的index.html中引入资源路径前都加上/build。

难点

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

项目截图

一、最近会话列表页面（最近会话按照最后消息时间排序，在发送新的消息后该会话会排序到第一条）

二、好友分组、群聊分类

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

四、空间动态

联系

• E-mail：ccdebuging@gmail.com、cAuth1218@163.com
• QQ：1831058205

该项目本人最近会一直跟进，直到实现一个较为完善的聊天系统，后续再进行优化升级。项目地址： https://github.com/CCZX/wechat 欢迎你们提出宝贵的意见，若是能提 PR或者 issues就更好了。若是你以为项目还能够请留下你的 star✨吧🌹。