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

Co-messager

地址：http://co-messager.chenr.cn/#/index

版本要求

1. node>=12.14.0
2. npm>=6.4.1

相关地址

• 掘金-文章
• 功能介绍-视频
• 项目运行-视频

功能

• [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为管理员端。

项目截图

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

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

PC端

1、主页

2、聊天

3、朋友圈

4、主题设置

5、日程

6、个人中心

移动端

1、登录

2、聊天列表

3、聊天界面

4、图片预览

5、换肤

6、朋友圈

系统功能图

普通用户

管理员

技术路线

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

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

启动项目

• 克隆项目

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

• 删除相关代码

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

• 启动服务器（3333端口）

cd chatServer
npm install
node init.js // 初始化数据库
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。

交流

• qq群

• E-mail：[email protected]、[email protected]
• QQ：1831058205
• 微信：cAutg9248

参考项目

• https://github.com/wuyawei