# Co-messager
> 本项目不再维护,如在阅读**文档**、观看**视频**后任有问题可以加群或者本人 `QQ` 和微信。
## 相关工具版本
1. node: 12.14.0
2. npm: 6.4.1
3. MongoDB: 5.0.3
## 相关地址
- [掘金-文章](https://juejin.im/post/5e8dd45cf265da47e34bf94d)
- [功能介绍-视频](https://www.bilibili.com/video/BV1aX4y1K7EF?p=1)
- [项目运行-视频](https://www.bilibili.com/video/BV1aX4y1K7EF?p=2)
## 功能
- [x] 登陆注册
- [x] 单聊
- [x] 群聊
- [x] 历史消息
- [x] 图片发送
- [ ] 文件发送
- [ ] 代码片段发送
- [x] 表情发送
- [x] 白板协作
- [x] 音视频聊天
- [x] 消息已读提醒
- [x] 好友分组
- [x] 好友备注
- [x] 好友上线提醒
- [x] 在线用户头像高亮
- [x] 添加好友
- [x] 添加群聊
- [x] 朋友圈功能
- [x] 发表朋友圈
- [x] 好友朋友圈
- [x] 朋友圈动态点赞
- [x] 朋友圈动态评论
- [x] 朋友圈动态回复评论
- [x] 日程设置
## 启动项目
### 1、克隆项目
```bash
git clone git@github.com:CCZX/wechat.git
```
或者下载压缩包解压也可以。
### 2、删除相关代码
> 这部分代码是在我的数据库里,所以你需要删除或者替换相关代码以防报错
![removed code](./document/clean.png)
**需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误**
### 2、启动MongoDB数据库
```bash
mongo
```
如果还没有安装MongoDB可以参考下面文章:
- [mongoDB - 菜鸟教程](https://www.runoob.com/mongodb/mongodb-tutorial.html)
- [mongoDB的安装和启动](https://juejin.cn/post/6844903958826188808)
### 3、启动服务器
```bash
cd chatServer
npm install
# 初始化数据库,初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js
```
### 4、启动客户端
```bash
cd chatClient
npm install
npm run dev
```
启动成功后访问[127.0.0.1:8080](127.0.0.1:8080)即可访问。
### 5、启动管理员端(3000端口)
```bash
cd chatAdmin
npm install
npm start
```
启动成功后访问[127.0.0.1:3000](127.0.0.1:3000)即可访问。
### 6、Q&A
按照上述步骤启动一般是不会出问题,有问题请首先排查是否**执行顺序**不一致,以及数据库是否启动。
## 项目截图
**github上如果没有科学上网容易裂图,推荐在掘金上看:**
地址:https://juejin.im/post/5e8dd45cf265da47e34bf94d
### PC端
#### 1、主页
![主页](./document/screenshots/p-home.png)
#### 2、聊天
![聊天](./document/screenshots/p-chat1.png)
![已读设置](./document/screenshots/p-chat2.png)
![通知](./document/screenshots/p-notify.png)
#### 3、朋友圈
![朋友圈](./document/screenshots/p-pyq1.png)
![朋友圈评论](./document/screenshots/p-pyq2.png)
#### 4、主题设置
![主题](./document/screenshots/p-theme.png)
#### 5、日程
![日程](./document/screenshots/p-schedule1.png)
![新建日程](./document/screenshots/p-schedule2.png)
#### 6、个人中心
![设置](./document/screenshots/p-personcenter.png)
### 移动端
#### 1、登录
![移动端](./document/screenshots/m-login.png)
#### 2、聊天列表
![移动端](./document/screenshots/m-aside.png)
![移动端](./document/screenshots/m-conversationlist.png)
#### 3、聊天界面
![移动端](./document/screenshots/m-chat.png)
#### 4、图片预览
![移动端](./document/screenshots/m-picpreview.png)
#### 5、换肤
![移动端](./document/screenshots/m-theme.png)
#### 6、朋友圈
![移动端](./document/screenshots/m-pyq.png)
## 系统功能图
### 普通用户
![普通用户功能设计0404](./document/普通用户功能设计0404.png)
### 管理员
![普通用户功能设计0404](./document/系统管理员功能设计0404.png)
## 技术路线
> 本系统分为`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](./document/resources/qqgroup.jpg)
- `E-mail`:`ccdebuging@gmail.com`、`cAuth1218@163.com`
- `QQ`:`1831058205`
- 微信:`cAutg9248`
## 参考项目
- https://github.com/wuyawei
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计聊天室、websocket、socket.io设计源码.zip (403个子文件)
.babelrc 242B
markdown.css 11KB
iconfont.css 10KB
base.css 4KB
index.css 31B
.editorconfig 156B
iconfont.eot 10KB
404.gif 491KB
.gitignore 333B
.gitignore 179B
.gitignore 168B
.gitkeep 0B
index.html 2KB
index.html 2KB
favicon.ico 10KB
favicon.ico 4KB
layout.jade 132B
error.jade 90B
index.jade 71B
city.jpg 1.42MB
4.jpg 1.16MB
2.jpg 821KB
2.jpg 821KB
file-chat-171550ffc89-1.jpg 542KB
file-chat-1715507a808-1.jpg 542KB
file-chat-17155119d5b-1.jpg 542KB
1.jpg 542KB
bg1.jpg 447KB
ocean.jpg 275KB
ocean1.jpg 275KB
canvas2.jpg 218KB
abstract.jpg 165KB
3.jpg 165KB
zw1.jpg 146KB
0072.jpg 141KB
0052.jpg 136KB
0055.jpg 134KB
wallpaper1.jpg 133KB
vchat.jpg 128KB
1.jpg 111KB
0073.jpg 96KB
xiang.jpg 79KB
26.jpg 68KB
p-pyq1.jpg 68KB
28.jpg 59KB
bg.jpg 57KB
13.jpg 57KB
25.jpg 57KB
12.jpg 56KB
f-1574322956848-0AF73108772D55E60AD6538846951491.jpg 55KB
27.jpg 54KB
face2.jpg 52KB
24.jpg 49KB
face18.jpg 47KB
23.jpg 46KB
file-chat-171550f6850-04.jpg 46KB
qqgroup.jpg 46KB
face10.jpg 45KB
face6.jpg 45KB
face9.jpg 42KB
face11.jpg 41KB
face5.jpg 41KB
face20.jpg 40KB
face8.jpg 40KB
face7.jpg 40KB
wallpaper.jpg 39KB
face12.jpg 39KB
face21.jpg 38KB
5.jpg 37KB
ronaldo1.jpg 35KB
16.jpg 35KB
11.jpg 35KB
face4.jpg 34KB
face22.jpg 33KB
face19.jpg 33KB
17.jpg 33KB
f-1570609572967-u=1791524184,3229217328&fm=26&gp=0.jpg 32KB
face15.jpg 31KB
7.jpg 30KB
4.jpg 30KB
face13.jpg 29KB
9.jpg 29KB
cover1.jpg 28KB
face16.jpg 28KB
face14.jpg 28KB
10.jpg 27KB
6.jpg 27KB
face1.jpg 27KB
cover.jpg 26KB
face17.jpg 25KB
face3.jpg 24KB
canvas.jpg 24KB
2.jpg 24KB
zw2.jpg 24KB
1.jpg 21KB
20.jpg 21KB
8.jpg 21KB
3.jpg 20KB
21.jpg 19KB
15.jpg 14KB
共 403 条
- 1
- 2
- 3
- 4
- 5
资源评论
熬夜写代码的平头哥
- 粉丝: 3832
- 资源: 7352
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功