Web手Q

Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本。为了方便大家学习，现在IP定�?接�?�和实时气温接�?�也开放了�?接�?�请在�?�?中查看。

预览

在线预览地�?�：https://qq.lenshen.com （尽�?使用Chrome�?览器体验最佳效果，�?�外�??供了3个测试账�?�，需�?账�?��?能登录哦）

三个测试账�?�如下:

• qq:986992484 密�?:111111 (对应昵称是莫知我哀----宇文玥)

• qq:986992483 密�?:111111 (对应昵称是浅唱低�?�----楚乔)

• qq:986992482 密�?:111111 (对应昵称是以梦之铭----马哲涵)

技术栈

• Vue2.0：实现�?端页�?�构建
• Vuex：实现�?�?�组件间的状�?共享
• Vue-router：页�?�路由切�?�,实现�?�页的核心
• vueg：页�?��?�?�场景切�?�效果
• Socket.io：实现实时消�?�推�?
• axios：一个基于 Promise 的 HTTP 库，�?��?�端�?�起请求
• Express�?Koa2：开�?�环境使用Express，生产环境使用Koa2
• ES6�?ES7�?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。

目�?已�?实现了QQ的核心功能，如消�?�列表�?好�?�列表�?新朋�?��?好�?�申请�?实时群�?��?实时�?�?��?�?�天设置�?�?蔽对方�?�天�?特别关心�?会员等级�?个性�??片�?添加好�?��?删除好�?��?好�?�分组�?查找用户�?登录�?注销�?切�?�用户�?�?�滑显示侧�?�?地�?�定�?�?温度等等。�?�期会考虑增加更多功能。如果你想体验实时�?�天的酷炫效果，那么你�?�以打开两个�?览器，用上�?��?�?�的账�?�登录�?��?�。

截图

• 消�?�页�?�

• �?�系人页�?�

• 群�?�

• �?�?�

分�?

• �?务端使用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-es2015�?babel-preset-stage-0�?babel-polyfill等�?赖。这样就�?�以愉快地使用import/export了。

�?务端代�?片段如下：

// ES7 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

• 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()：监�?��?务端�?��?�的信�?�

FAQ

若使用的过程中�?�到问题，�?�以加官方群交�?：611212696。如果觉得�?错，就毫�?�??啬地给个star�?�。�?�期项目还会继续更新和完善。

�?�动�?�如果报以下错误，请�?�考：https://github.com/lensh/vue-qq/issues/8

Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column \'qq.b.face\' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by