用vue全家桶+koa2+soket.io +mysql写一个聊天应用

vue-chat airchat

介绍

这是个人毕设项目，产品功能和页面参照qq，微信，TIM，不彻底同样，有些是本身的想法。先后端都本身写。 感受是一个挺不错的全栈入门项目，各类交互各类业务逻辑，不花哨，但实用。

对node（koa）和vue学习会挺有帮助，如今开源出来，接下去将继续不断完善😄欢迎star

更新： electron-vue-chat：vue-chat的Electron桌面版本项目地址

正在写react版本的😄

技术栈：

前端vue，vue-router,vuex ，vue-cli和axios，scss,用rem作了移动端适配，没有用第三方组件。 后端用koa2，用gulp构建工具实现自动刷新后端代码运行。 数据库用mysql，基于Token的jwt鉴权机制，用socket.io作双向通讯；

github地址

vue-chat

线上地址

点击线上查看

欢迎你们注册登陆，加这个群聊天😄 搜群名称： 项目交流群

也能够加我为好友，用户名： hxvin

也能够注册两个帐号在两个不一样浏览器本身尬聊啦 😂

项目展现

• 系统组成

todo

2018.01.13 开始

• 登陆
• 注册
• 登出
• 弹窗，提示等组件
• 机器人智能聊天回复
• 私聊
• 群聊

2018.02.01

• 用户资料卡
• 加好友及验证好友请求
• 好友请求通知
• 删除好友
• 未读消息提示

2018.02.10  吐槽一下，不得不佩服qq，微信的用户体验，功能细节挺多。。。。。

• 搜索用户，群组
• 建立群
• 群资料卡
• 加群
• 退群
• 修改备注

2018.02.11

• 发布到线上
• 修改我的信息

2018.03.02

• 收到添加好友请求底部tab红点提醒

2018.03.20  收拾掉很多bug :-)

• 迁移成Electron桌面版本的，支持mac和win环境。 （Electron版本将于答辩完开源）

已开源：Electron桌面版本项目地址

2018.03.25

• 通信录展现
• 聊天发表情
• 聊天发图片
• 支持聊天代码美化，md语法
• 用户上传头像
• 性能优化，redis作缓存
• 实现react版本的

下载到本地开发环境跑

本次开发我用了三个git分支，分别是主分支master ，开发分支dev ， 线上分支online，若是你要fork到你的本地跑，请fork master分支 。

（注意下到本地后若是要体验soket.io通讯互聊，用两个浏览器各打开一个帐号，不能用同一个浏览器，由于我用localstorage缓存帐户信息）

Fork 或者 下载本项目

而后进入本项目的文件夹，把vue-chat/server/init/sql 的 airchat.sql文件 拉到你的msyql客户端 run一下生成数据库(我使用的是mac下的 Sequel Pro 挺好用的，固然你用其余方式也可生成数据库也可)

npm i
复制代码

npm run dev
复制代码

cd server 
复制代码

npm i
复制代码

接着下面两条命令执行一条就行，看着选；（若是想要修改后端代码即时保存刷新，用第一条；若是像想用chrome进行debug调试，用第二条)

npm run start  
复制代码

npm run dev
复制代码

打包上线，让全部人都能用到你的产品(非必须)

打包上线前须要对master分支的代码作一些修改。具体怎么修改以及后续如何打包上线，请看我单独写的一篇文章vue-chat 打包上线小记，但愿对你有帮助。

老习惯，代码注释比较详细，须要注释而没有注释的我也尽快补上; 后面也会写几篇博客来详细介绍本项目，但愿更好的帮助到入门的小伙伴(大神请略过，或者给些指导建议😄)

若是对您有帮助，但愿给个start，鼓励我继续更新^ ^

开发目录

├── LICENSE
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist  //打包后的静态资源
│   ├── index.html
│   └── static
├── index.html
├── package-lock.json
├── package.json
├── server  // 后端代码
│   ├── config.js
│   ├── controllers
│   ├── gulpfile.js
│   ├── index.js 
│   ├── init  //数据库初始化(sql文件也在这)
│   ├── middlewares 
│   ├── models
│   ├── package-lock.json
│   ├── package.json
│   ├── routes
│   └── utils 
├── src  //前端代码
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── pages
│   ├── router
│   ├── store //vuex在这
│   └── utils
└── static
复制代码

材料

本身总结的

web移动端适配方案

vue-chat 打包上线小记

token，Json web token（jwt）

web移动端页面怎么调试

本地mysql客户端链接centos的数据库

文章都在个人博客上，欢迎star个人博客😄

第三方的(在此感谢)

socket.io英文文档

socket.io中文文档

socket.io in github

socket.io-client in github

聊天机器人api

License

MIT