vue-qq
Vue全家桶+Socket.io+Express/Koa2打造一款網(wǎng)頁(yè)版手機(jī)QQ
寫(xiě)在前面
這個(gè)項(xiàng)目是利用學(xué)習(xí)之余寫(xiě)的一個(gè)高仿騰訊QQ app的單頁(yè)SPA應(yīng)用，整個(gè)項(xiàng)目包含20多個(gè)頁(yè)面元旬，涉及實(shí)時(shí)群聊算凿，實(shí)時(shí)私聊噪服，特別關(guān)心克握，屏蔽對(duì)方聊天霜医，添加好友事镣，個(gè)性名片等等，后續(xù)頁(yè)面還是開(kāi)發(fā)中古劲。寫(xiě)這個(gè)項(xiàng)目主要目的是練習(xí)和熟悉vue全家桶斥赋，利用socket.io實(shí)現(xiàn)實(shí)時(shí)聊天。
預(yù)覽
在線預(yù)覽地址：http://lenshen.com:8080/? ? ?（為了體驗(yàn)到最佳的效果产艾，提供了3個(gè)測(cè)試賬號(hào)疤剑，需要賬號(hào)才能登陸哦，具體賬號(hào)和密碼下面有講）
技術(shù)棧
Vue2.0：實(shí)現(xiàn)前端頁(yè)面構(gòu)建
Vuex：實(shí)現(xiàn)不同組件間的狀態(tài)共享
Vue-router：頁(yè)面路由切換,實(shí)現(xiàn)單頁(yè)的核心
vueg：頁(yè)面復(fù)雜場(chǎng)景切換效果
Socket.io：實(shí)現(xiàn)實(shí)時(shí)消息推送
axios：一個(gè)基于Promise的 HTTP 庫(kù)闷堡，向后端發(fā)起請(qǐng)求
Express隘膘、Koa2：開(kāi)發(fā)環(huán)境使用Express，生產(chǎn)環(huán)境使用Koa2
ES6杠览、ES7弯菊、ES8：服務(wù)端和客戶端均使用ES6語(yǔ)法，promise/async/await 處理異步
localStorage：本地保存用戶信息
Webpack：模塊打包踱阿，前端項(xiàng)目構(gòu)建工具首選
SASS(SCSS)：CSS預(yù)處理語(yǔ)言
Flex：flex彈性布局管钳，簡(jiǎn)單適配手機(jī)、PC端
CSS3：CSS3過(guò)渡動(dòng)畫(huà)及樣式
IScroll：模擬原生app的列表滾動(dòng)效果(ListView)
MySQL：MySQL關(guān)系型數(shù)據(jù)庫(kù)持久化數(shù)據(jù)（考慮到表與表之間關(guān)系復(fù)雜软舌，需要多表查詢蹋嵌，最復(fù)雜的時(shí)候是六張表聯(lián)查，用MySQL會(huì)比Mongodb好得多）
jsonp：跨域請(qǐng)求數(shù)據(jù)
pm2：服務(wù)端使用pm2部署葫隙，常駐進(jìn)程，比f(wàn)orever好用得多（https://github.com/Unitech/pm2）
使用方式
clone源碼后躏仇，先將根目錄下的qq.sql導(dǎo)入到你的MySQL數(shù)據(jù)庫(kù)里(可以使用Navicat導(dǎo)入)恋脚，用戶名為root，登錄密碼為空焰手。啟動(dòng)MySQL服務(wù)糟描。然后使用cnpm install 安裝所有依賴，最后運(yùn)行npm run dev书妻。服務(wù)器部署只需要運(yùn)行npm run pm2（前提是得先全局安裝pm2）船响。
盡量使用Chrome瀏覽器體驗(yàn)最佳效果。另外提供了三個(gè)測(cè)試賬號(hào)，默認(rèn)用戶的密碼都是6個(gè)1:
qq:986992484 密碼:111111
qq:986992483 密碼:111111
qq:986992482 密碼:111111
目前已經(jīng)實(shí)現(xiàn)了QQ的核心功能见间，如消息列表聊闯、好友列表、新朋友米诉、好友申請(qǐng)菱蔬、實(shí)時(shí)群聊、實(shí)時(shí)私聊史侣、聊天設(shè)置拴泌、屏蔽對(duì)方聊天、特別關(guān)心惊橱、會(huì)員等級(jí)蚪腐、個(gè)性名片、添加好友税朴、刪除好友回季、好友分組、查找用戶掉房、登錄茧跋、注銷(xiāo)、切換用戶卓囚、右滑顯示滑動(dòng)側(cè)欄等等瘾杭。后期會(huì)考慮增加更多功能。如果你想體驗(yàn)實(shí)時(shí)聊天的酷炫效果哪亿，那么你可以打開(kāi)兩個(gè)瀏覽器粥烁，用上面不同的賬號(hào)登錄即可。
截圖
消息頁(yè)面
聯(lián)系人頁(yè)面
群聊
私聊
分析
服務(wù)端使用ES6語(yǔ)法
不需要使用babel轉(zhuǎn)碼以及一系列的配置蝇棉，只需要將node升級(jí)到V8版本讨阻，V8已經(jīng)很好地支持了ES6/ES7/ES8等最新特性，這是目前最好的辦法篡殷。升級(jí)到V8版本钝吮，可以直接到nodejs中文網(wǎng)(http://nodejs.cn/download/) 下載即可，也可以使用NVM切換node版本板辽。
升級(jí)到V8后奇瘦，還不支持通過(guò)import/export關(guān)鍵字來(lái)導(dǎo)入導(dǎo)出模塊(因?yàn)榉?wù)端已經(jīng)有了CommonJS規(guī)范，如果再使用import/export的話就有點(diǎn)沖突了)劲弦，如果一定要使用import/export關(guān)鍵字耳标，這時(shí)可以在服務(wù)端的入口文件首行添加以下代碼：
require("babel-core/register")({
? ? ?presets: ['es2015', 'stage-0']
})
require("babel-polyfill")
上面的代碼不可以使用import來(lái)導(dǎo)入，必須使用require邑跪，同時(shí)需要通過(guò)npm安裝babel-core次坡、babel-preset-es2015呼猪、babel-preset-stage-0、babel-polyfill等依賴砸琅。這樣就可以愉快地使用import/export了。
Socket.io
服務(wù)端(結(jié)合Express/Koa):
// Server
import express from 'express'
import http from 'http'
import socketio from 'socket.io'
const app = express()
const server = http.createServer(app)
const io = socketio(server)
server.listen(3000)
io.on('connection', (socket)=>{
?socket.emit('news', { hello: 'world' })
socket.on('my other event', function (data) {
console.log(data)
})
})
客戶端：
// Client
const socket = io.connect('http://localhost:3000')
socket.on('news', (data)=>{
? ? ? socket.emit('my other event', { my: 'data' })
})
socket.io最核心的兩個(gè)api就是`emit` 和 `on`了 明棍，服務(wù)端和客戶端都有這兩個(gè)api。通過(guò) `emit` 和 `on`可以實(shí)現(xiàn)服務(wù)器與客戶端之間的雙向通信沸版。
`emit` ：發(fā)射一個(gè)事件，第一個(gè)參數(shù)為事件名兴蒸，第二個(gè)參數(shù)為要發(fā)送的數(shù)據(jù)视粮，第三個(gè)參數(shù)為回調(diào)函數(shù)（如需對(duì)方接受到信息后立即得到確認(rèn)時(shí)，則需要用到回調(diào)函數(shù)）橙凳。
`on` ：監(jiān)聽(tīng)一個(gè) emit 發(fā)射的事件，第一個(gè)參數(shù)為要監(jiān)聽(tīng)的事件名岛啸，第二個(gè)參數(shù)為回調(diào)函數(shù)钓觉，用來(lái)接收對(duì)方發(fā)來(lái)的數(shù)據(jù)，該函數(shù)的第一個(gè)參數(shù)為接收的數(shù)據(jù)坚踩。
服務(wù)端常用API：
`socket.emit()`：向建立該連接的客戶端發(fā)送消息
`socket.on()`：監(jiān)聽(tīng)客戶端發(fā)送信息
`io.to(socketid).emit()`：向指定客戶端發(fā)送消息
`io.sockets.socket(socketid).emit()`：向指定客戶端發(fā)送消息荡灾，新版本用`io.sockets.socket[socketid].emit()` 瞬铸，數(shù)組訪問(wèn)`
socket.broadcast.emit()`：向除去建立該連接的客戶端的所有客戶端廣播
`io.sockets.emit()`：向所有客戶端廣播
客戶端常用API：
`socket.emit()`：向服務(wù)端發(fā)送消息
`socket.on()`：監(jiān)聽(tīng)服務(wù)端發(fā)來(lái)的信息
