聊天系统实现

javascript/jquery

浏览数:24

2020-5-19

AD:资源代下载服务

最近把聊天系统的功能做了一些完善,然后把后台管理的功能实现了。经过自己本人的一番调试没有太大的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] 日程设置

概要

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

系统功能图

普通用户

管理员

技术路线

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

  • 客户端使用VueVueXVue-Router等;
  • 管理员端使用Reactantd等技术栈;
  • 后端使用的是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. 管理员端在chatAdminbuild目录下,需要自己自己手动将整个build目录复制到chatServer文件夹的public目录下,然后修改build目录文件的index.html中引入资源路径前都加上/build

难点

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

项目截图

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

2、好友分组、群聊分类

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

4、空间动态

联系

  • E-mail:ccdebuging@gmail.comcAuth1218@163.com
  • QQ:1831058205

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

作者:piupiupiu