Wechat Wecat

WeCat

介绍

• 基于Vue.js全家桶 + WebSocket + Node.js + Koa2 + MongoDB的即时聊天项目
• 功能部分参考微信，附加上一些有意思的功能。项目代码注释非常详细，是学习Vue、Node.js、koa一个不错的全栈入门项目。
• 项目前后端和部署独立完成，各种交互以及各种业务逻辑功能上有不完善的地方欢迎提出?

项目展示

1. 登录

2. 注册

3. 找回密码

4. 注册成功，选择头像

5. 主面板

6. 添加好友

7. 好友信息面板

8. 发送信息和文件

9. 多功能面板，发送表情

10. 个性化设置菜单

11. 管理员页，用户信息

12. 查询所有聊天记录

13. 聊天记录详情

14. API 文档

目录结构

1. server 是服务器
2. public 是静态文件
3. db 是MongoDB导出备份
4. src 是项目文件夹

安装教程

1. 克隆项目git clone https://github.com/imzusheng/Wecat.git
2. cd 项目根目录，安装依赖 npm install
3. 运行服务 npm run serve
4. cd ./server，再安装服务器依赖 npm install
5. 导入数据库 mongorestore -d wecat ./db
6. 运行服务器 npm run dev

测试账号

userID：[email protected]
password：a123456

TODO

• 登录
• 防止重复登录
• 最近登录时间
• 最近登录地点（省-市-区）
• 注册（邮箱验证）
• 找回密码（邮箱验证）
• 选择用户头像
• 登出
• 好友点对点聊天
• ws心跳连接与掉线重连
• 好友上线和下线提示
• 加好友及验证好友请求
• 好友请求通知
• 未读消息提示
• 搜索用户
• 用户个性化配置
• 聊天记录懒加载
• 好友输入状态实时更新
• 网站标题实时显示未读消息条数
• 最近聊天的好友置顶
• 后台管理
• 聊天图片与文件上传（分片上传）
• 聊天图片与文件预览和下载
• 群聊
• 用户资料卡
• 删除好友
• 创建群
• 群资料卡
• 加群
• 退群

相关技术栈

• VueCli 3
• Vuex
• Node.js
• Element-ui
• axios
• MongoDB
• koa2
• WebSocket
• ws

笔记与总结

• 多文件分片上传
• Vue Router History模式下在网站非根目录部署
• js 键盘监听 实现 ctrl + enter 组合键发送消息
• 利用 ES6 Module 封装一个自己的Websocket服务

关于

• 邮箱 [email protected]
• 项目地址
• 关于我
• github
• gitee