Skip to content

Latest commit

 

History

History
190 lines (133 loc) · 4.65 KB

README.md

File metadata and controls

190 lines (133 loc) · 4.65 KB
Raw

Co-messager

本项目不再维护，如在阅读文档、观看视频后任有问题可以加群或者本人 QQ 和微信。

相关工具版本

  1. node: 12.14.0
  2. npm: 6.4.1
  3. MongoDB: 5.0.3

相关地址

功能

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

启动项目

1、克隆项目

git clone [email protected]:CCZX/wechat.git

或者下载压缩包解压也可以。

2、删除相关代码

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

removed code

需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误

2、启动MongoDB数据库

mongo

如果还没有安装MongoDB可以参考下面文章：

3、启动服务器

cd chatServer
npm install
# 初始化数据库，初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js

4、启动客户端

cd chatClient
npm install
npm run dev

启动成功后访问127.0.0.1:8080即可访问。

5、启动管理员端（3000端口）

cd chatAdmin
npm install
npm start

启动成功后访问127.0.0.1:3000即可访问。

6、Q&A

按照上述步骤启动一般是不会出问题，有问题请首先排查是否执行顺序不一致，以及数据库是否启动。

项目截图

github上如果没有科学上网容易裂图，推荐在掘金上看：

地址：https://juejin.im/post/5e8dd45cf265da47e34bf94d

PC端

1、主页

主页

2、聊天

聊天 已读设置 通知

3、朋友圈

朋友圈 朋友圈评论

4、主题设置

主题

5、日程

日程 新建日程

6、个人中心

设置

移动端

1、登录

移动端

2、聊天列表

移动端 移动端

3、聊天界面

移动端

4、图片预览

移动端

5、换肤

移动端

6、朋友圈

移动端

系统功能图

普通用户

普通用户功能设计0404

管理员

普通用户功能设计0404

技术路线

本系统分为Client，Server，Admin三个端：其中Client为客户端，Server为服务器端，Admin为管理员端。使用前后端分离的开发模式

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

项目打包

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

交流

  • qq群

qq

参考项目