{"id":13672974,"url":"https://github.com/lensh/vue-qq","last_synced_at":"2025-04-12T19:46:49.455Z","repository":{"id":41740176,"uuid":"94398351","full_name":"lensh/vue-qq","owner":"lensh","description":"🎨  Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat,  smart IP geographic location, real-time display  temperature  and other QQ core functions","archived":false,"fork":false,"pushed_at":"2022-12-11T19:12:59.000Z","size":20526,"stargazers_count":918,"open_issues_count":46,"forks_count":231,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-04-03T22:11:13.421Z","etag":null,"topics":["async-await","axios","css3","es6","es7","es8","express","html5","koa2","mysql","node","socket-io","vue-router","vue2","vuex","webpack2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lensh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T04:04:37.000Z","updated_at":"2025-02-14T05:16:03.000Z","dependencies_parsed_at":"2023-01-27T05:16:13.053Z","dependency_job_id":null,"html_url":"https://github.com/lensh/vue-qq","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lensh%2Fvue-qq","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lensh%2Fvue-qq/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lensh%2Fvue-qq/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lensh%2Fvue-qq/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lensh","download_url":"https://codeload.github.com/lensh/vue-qq/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625497,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-await","axios","css3","es6","es7","es8","express","html5","koa2","mysql","node","socket-io","vue-router","vue2","vuex","webpack2"],"created_at":"2024-08-02T09:02:01.469Z","updated_at":"2025-04-12T19:46:49.434Z","avatar_url":"https://github.com/lensh.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Web手Q\n\nVue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本。为了方便大家学习，现在IP定位接口和实时气温接口也开放了！接口请在源码中查看。\n\n## 预览\n\n在线预览地址：https://qq.lenshen.com\n（尽量使用Chrome浏览器体验最佳效果，另外提供了3个测试账号，需要账号才能登录哦）\n\n三个测试账号如下:\n\n* qq:986992484  密码:111111    (对应昵称是莫知我哀----宇文玥)\n\n* qq:986992483  密码:111111    (对应昵称是浅唱低吟----楚乔)\n\n* qq:986992482  密码:111111    (对应昵称是以梦之铭----马哲涵)\n\n## 技术栈\n* **Vue2.0**：实现前端页面构建\n* **Vuex**：实现不同组件间的状态共享\n* **Vue-router**：页面路由切换,实现单页的核心\n* **vueg**：页面复杂场景切换效果\n* **Socket.io**：实现实时消息推送\n* **axios**：一个基于 `Promise` 的 HTTP 库，向后端发起请求\n* **Express**、**Koa2**：开发环境使用Express，生产环境使用Koa2\n* **ES6**、**ES7**、**ES8**：服务端和客户端均使用ES6语法，promise/async/await 处理异步\n* **localStorage**：本地保存用户信息\n* **Webpack**：模块打包，前端项目构建工具首选\n* **SASS**(**SCSS**)：CSS预处理语言\n* **Flex**：flex弹性布局，简单适配手机、PC端\n* **CSS3**：CSS3过渡动画及样式\n* **IScroll**：模拟原生app的列表滚动效果(ListView)\n* **MySQL**：MySQL关系型数据库持久化数据（考虑到表与表之间关系复杂，需要多表查询，最复杂的时候是六张表联查，用MySQL会比Mongodb好得多）\n* **jsonp**：跨域请求数据\n* **pm2**：服务端使用pm2部署，常驻进程，比forever好用得多（https://github.com/Unitech/pm2 ）\n* **nginx**：服务端使用nginx代理端口转发\n\n## 使用方式\n\n先将根目录下的qq.sql导入到你的MySQL数据库里(可以使用Navicat)，用户名为root，登录密码为空。启动MySQL服务。然后使用cnpm install 安装所有依赖(最好用cnpm安装，因为项目依赖很多，npm用的是国外的镜像，在网络不稳定的情况下很有可能会导致安装失败，而且下载速度远远慢于国内的cnpm)，最后运行npm run dev。服务器部署运行项目只需要npm run pm2，这样就可以常驻进程，不过前提是得先全局安装pm2。\n\n目前已经实现了QQ的核心功能，如消息列表、好友列表、新朋友、好友申请、实时群聊、实时私聊、聊天设置、屏蔽对方聊天、特别关心、会员等级、个性名片、添加好友、删除好友、好友分组、查找用户、登录、注销、切换用户、右滑显示侧栏、地理定位、温度等等。后期会考虑增加更多功能。如果你想体验实时聊天的酷炫效果，那么你可以打开两个浏览器，用上面不同的账号登录即可。\n\n## 截图\n\n* 消息页面\n\n![](https://github.com/lensh/vue-qq/blob/master/screenshot/1.png)\n\n* 联系人页面\n\n![](https://github.com/lensh/vue-qq/blob/master/screenshot/2.png)\n\n* 群聊\n\n![](https://github.com/lensh/vue-qq/blob/master/screenshot/3.png)\n\n* 私聊\n\n![](https://github.com/lensh/vue-qq/blob/master/screenshot/4.png)\n\n## 分析\n\n* ### 服务端使用ES6语法\n\n不需要使用babel转码以及一系列的配置，只需要将node升级到V8版本，V8已经很好地支持了ES6/ES7/ES8等最新特性，这是目前最好的办法。升级到V8版本，可以直接到nodejs中文网(http://nodejs.cn/download/) 下载即可，也可以使用NVM切换node版本。\n\n升级到V8后，还不支持通过import/export关键字来导入导出模块(因为服务端已经有了CommonJS规范，如果再使用import/export的话就有点冲突了)，如果一定要使用import/export关键字，这时可以在服务端的入口文件首行添加以下代码：\n\n```javascript\nrequire(\"babel-core/register\")({\n\tpresets: ['es2015', 'stage-0']\n})\nrequire(\"babel-polyfill\")\n```\n\n上面的模块不可以使用import来导入，必须使用require，同时需要通过npm安装babel-core、babel-preset-es2015、babel-preset-stage-0、babel-polyfill等依赖。这样就可以愉快地使用import/export了。\n\n服务端代码片段如下：\n\n``` javascript\n// ES7 async/await\nimport express from 'express'\nimport login from '../../controller/login'\n\nconst loginRouter = express.Router()\n\nloginRouter\n\t.get('/:user/:pwd', async(req, res) =\u003e { // 登录\n\t\tconst result = await login.login(req, res)\n\t\tres.json(result)\n\t})\n\nexport default loginRouter\n```\n\n* ### Socket.io\n服务端(结合Express/Koa):\n\n```javascript\n// Server\nimport express from 'express'\nimport http from 'http'\nimport socketio from 'socket.io'\n\nconst app = express()\nconst server = http.createServer(app)\nconst io = socketio(server)\nserver.listen(3000)\n\nio.on('connection', (socket)=\u003e{\n  socket.emit('news', { hello: 'world' })\n  socket.on('my other event', function (data) {\n    console.log(data)\n  })\n})\n```\n\n客户端：\n\n```javascript\n// Client\n\u003cscript src=\"http://localhost:3000/socket.io/socket.io.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const socket = io.connect('http://localhost:3000')\n  socket.on('news', (data)=\u003e{\n    socket.emit('my other event', { my: 'data' })\n  })\n\u003c/script\u003e\n```\n\nsocket.io最核心的两个api就是`emit` 和 `on`了 ，服务端和客户端都有这两个api。通过 `emit` 和 `on`可以实现服务器与客户端之间的双向通信。\n\n`emit` ：发射一个事件，第一个参数为事件名，第二个参数为要发送的数据，第三个参数为回调函数（如需对方接受到信息后立即得到确认时，则需要用到回调函数）。\n\n`on` ：监听一个 emit 发射的事件，第一个参数为要监听的事件名，第二个参数为回调函数，用来接收对方发来的数据，该函数的第一个参数为接收的数据。\n\n服务端常用API：\n\n`socket.emit()`：向建立该连接的客户端发送消息\n\n`socket.on()`：监听客户端发送信息\n\n`io.to(socketid).emit()`：向指定客户端发送消息\n\n`io.sockets.socket(socketid).emit()`：向指定客户端发送消息，新版本用`io.sockets.socket[socketid].emit()` ，数组访问\n\n`socket.broadcast.emit()`：向除去建立该连接的客户端的所有客户端广播\n\n`io.sockets.emit()`：向所有客户端广播\n\n客户端常用API：\n\n`socket.emit()`：向服务端发送消息\n\n`socket.on()`：监听服务端发来的信息\n\n## FAQ\n\n若使用的过程中遇到问题，可以加官方群交流：611212696。如果觉得不错，就毫不吝啬地给个star吧。后期项目还会继续更新和完善。\n\n启动后如果报以下错误，请参考：https://github.com/lensh/vue-qq/issues/8\n```\nExpression #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\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flensh%2Fvue-qq","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flensh%2Fvue-qq","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flensh%2Fvue-qq/lists"}