Vue全家桶+Socket.io+Express/Koa2打造網頁版手機QQ

介紹

Vue全家桶+Socket.io+Express/Koa2打造的網頁版手機QQ(web app),高仿手機QQ7.1.0版本

預覽

在線預覽地址：https://qq.lenshen.com （爲了體驗到最佳的效果，提供了3個測試帳號，須要帳號才能登錄哦，具體帳號和密碼下面有講）
如今項目已開源，源碼：https://github.com/lensh/vue-qq。

目前已經實現了QQ的核心功能，如消息列表、好友列表、新朋友、好友申請、實時羣聊、實時私聊、聊天設置、屏蔽對方聊天、特別關心、會員等級、個性名片、添加好友、刪除好友、好友分組、查找用戶、登陸、註銷、切換用戶、右滑顯示側欄等等。後期會考慮增長更多功能。

技術棧

Vue2.0：實現前端頁面構建
Vuex：實現不一樣組件間的狀態共享
Vue-router：頁面路由切換,實現單頁的核心
vueg：頁面複雜場景切換效果
Socket.io：實現實時消息推送
axios：一個基於 Promise 的 HTTP 庫，向後端發起請求
Express、Koa2：開發環境使用Express，生產環境使用Koa2
ES六、ES七、ES8：服務端和客戶端均使用ES6語法，promise/async/await 處理異步
localStorage：本地保存用戶信息
Webpack：模塊打包，前端項目構建工具首選
SASS(SCSS)：CSS預處理語言
Flex：flex彈性佈局，簡單適配手機、PC端
CSS3：CSS3過渡動畫及樣式
IScroll：模擬原生app的列表滾動效果(ListView)
MySQL：MySQL關係型數據庫持久化數據（考慮到表與表之間關係複雜，須要多表查詢，最複雜的時候是六張表聯查，用MySQL會比Mongodb好得多）
jsonp：跨域請求數據
pm2：服務端使用pm2部署，常駐進程，比forever好用得多（https://github.com/Unitech/pm2）
nginx：nginx代理端口轉發，三級域名配置

使用方式

先將根目錄下的qq.sql導入到你的MySQL數據庫裏(可使用Navicat)，用戶名爲root，登陸密碼爲空。啓動MySQL服務。而後使用cnpm install 安裝全部依賴(最好用cnpm安裝，由於項目依賴不少，npm用的是國外的鏡像，在網絡不穩定的狀況下頗有可能會致使安裝失敗，並且下載速度遠遠慢於國內的cnpm)，最後運行npm run dev。服務器部署運行項目只須要npm run pm2，這樣就能夠常駐進程，不過前提是得先全局安裝pm2。

儘可能使用Chrome瀏覽器體驗最佳效果。另外提供了三個測試帳號，默認用戶的密碼都是6個1:

qq:986992484 密碼:111111

qq:986992483 密碼:111111

qq:986992482 密碼:111111

若是你想體驗實時聊天的酷炫效果，那麼你能夠打開兩個瀏覽器，用上面不一樣的帳號登陸便可。

截圖

消息頁面

聯繫人頁面

羣聊

私聊

分析

1. 服務端使用ES6語法

不須要使用babel轉碼以及一系列的配置，只須要將node升級到V8版本，V8已經很好地支持了ES6/ES7/ES8等最新特性，這是目前最好的辦法。升級到V8版本，能夠直接到nodejs中文網(http://nodejs.cn/download/) 下載便可，也可使用NVM切換node版本。

升級到V8後，還不支持經過import/export關鍵字來導入導出模塊(由於服務端已經有了CommonJS規範，若是再使用import/export的話就有點衝突了)，若是必定要使用import/export關鍵字，這時能夠在服務端的入口文件首行添加如下代碼：

require("babel-core/register")({
    presets: ['es2015', 'stage-0']
})
require("babel-polyfill")

上面的代碼不可使用import來導入，必須使用require，同時須要經過npm安裝babel-core、babel-preset-es201五、babel-preset-stage-0、babel-polyfill等依賴。這樣就能夠愉快地使用import/export了。

服務端代碼片斷以下：

// ES6 import/export
import express from 'express'
import loginRouter from './router/login'
import registerRouter from './router/register'
import friendRouter from './router/friend'
import messageRouter from './router/message'
import userRouter from './router/user'

const apiRouter = express.Router()

apiRouter
    .use('/login', loginRouter)
    .use('/register', registerRouter)
    .use('/friend', friendRouter)
    .use('/message', messageRouter)
    .use('/user', userRouter)

export default apiRouter

// ES8 async/await
import express from 'express'
import login from '../../controller/login'

const loginRouter = express.Router()

loginRouter
    .get('/:user/:pwd', async(req, res) => { // 登陸
        const result = await login.login(req, res)
        res.json(result)
    })

export default loginRouter

2.Socket.io

服務端(結合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

<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
  const socket = io.connect('http://localhost:3000')
  socket.on('news', (data)=>{
    socket.emit('my other event', { my: 'data' })
  })
</script>

socket.io最核心的兩個api就是emit 和 on了 ，服務端和客戶端都有這兩個api。經過 emit 和 on能夠實現服務器與客戶端之間的雙向通訊。

emit ：發射一個事件，第一個參數爲事件名，第二個參數爲要發送的數據，第三個參數爲回調函數（如需對方接受到信息後當即獲得確認時，則須要用到回調函數）。

on ：監聽一個 emit 發射的事件，第一個參數爲要監聽的事件名，第二個參數爲回調函數，用來接收對方發來的數據，該函數的第一個參數爲接收的數據。

服務端經常使用API：

socket.emit()：向創建該鏈接的客戶端發送消息

socket.on()：監聽客戶端發送信息

io.to(socketid).emit()：向指定客戶端發送消息

io.sockets.socket(socketid).emit()：向指定客戶端發送消息，新版本用io.sockets.socket[socketid].emit() ，數組訪問

socket.broadcast.emit()：向除去創建該鏈接的客戶端的全部客戶端廣播

io.sockets.emit()：向全部客戶端廣播

客戶端經常使用API：

socket.emit()：向服務端發送消息

socket.on()：監聽服務端發來的信息

最後

源碼地址：https://github.com/lensh/vue-qq，若是以爲不錯，就絕不吝嗇地給個star吧。後期項目還會繼續更新和完善。