用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