{"id":13535760,"url":"https://github.com/microzz/vue-chat","last_synced_at":"2025-10-26T09:43:41.663Z","repository":{"id":65256781,"uuid":"89237130","full_name":"microzz/vue-chat","owner":"microzz","description":"👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。","archived":false,"fork":false,"pushed_at":"2017-05-10T12:45:02.000Z","size":208,"stargazers_count":978,"open_issues_count":8,"forks_count":253,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-03-28T09:07:21.620Z","etag":null,"topics":["express","koa","koa2","koajs","scss","socketio","vue","vue-router","vue2","vuejs","vuejs2","vuex","vuex2"],"latest_commit_sha":null,"homepage":"https://microzz.com/vue-chat/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-24T12:23:39.000Z","updated_at":"2025-03-12T05:15:34.000Z","dependencies_parsed_at":"2023-01-16T15:00:34.567Z","dependency_job_id":null,"html_url":"https://github.com/microzz/vue-chat","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/microzz%2Fvue-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microzz","download_url":"https://codeload.github.com/microzz/vue-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157281,"owners_count":20893220,"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":["express","koa","koa2","koajs","scss","socketio","vue","vue-router","vue2","vuejs","vuejs2","vuex","vuex2"],"created_at":"2024-08-01T09:00:26.070Z","updated_at":"2025-10-26T09:43:41.571Z","avatar_url":"https://github.com/microzz.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"# Vue.js+Socket.io+Koa2打造一个智能聊天室\r\rVue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室。\r已经开源啦！为了方便大家学习，智能机器人、IP定位接口也开放了！接口请在源码中查看😄\r\r\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;QQ群里面的智能机器人很火，于是用Vue.js+Socket.io+Koa2打造了一个智能聊天室，实现了IP定位、在线群聊，加入了Emoji表情😄，以及接入了智能机器人😏\r\r## 前言\r话说最近前端技术圈也有派系之争了，是好事还是坏事？萝卜青菜各有所爱，本项目采用的是Vue.js做前端页面展示，大家完全可以换成自己别的喜欢的，React、Angular等等，每个框架都有可取的地方，这里不多说😂下面扯到正题上👇\r\r## 预览\r\r在线预览地址：👉 https://microzz.com/vue-chat/\r\r![Vue.js+Socket.io 智能聊天室 microzz.com](https://dn-mhke0kuv.qbox.me/24330ba3e01436df1eb8.png)\r\r![Vue.js+Socket.io 智能聊天室 microzz.com](https://dn-mhke0kuv.qbox.me/a5abbff92a442fa2d356.png)\r\r## 源代码\r 现在已经开源： 👉https://github.com/microzz/vue-chat\r 欢迎star和提出宝贵意见😄\r\r## 技术栈\r* **Vue2.0**：前端页面展示。\r* **Socket.io**：实现实时通信\r* **Vuex**：Vuex，实现不同组件间的状态共享\r* **vue-router**：页面路由切换\r* **axios**：一个基于 `Promise` 的 HTTP 库，向后端发起请求。\r* **Express**、**Koa2**：因为vue-cli生成的项目是基于**express**的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了**Koa2**。\r* **Moment.js**：一个时间处理的库，方便对时间进行格式化成需要的格式。\r* **ES6**、**ES7**：采用ES6语法，这是以后的趋势。箭头函数、Promise等等语法很好用。\r* **localStorage**：保存用户信息以及聊天记录。\r* **Webpack**：vue-cli自带Webpack，但是需要自己改造一下，比如要对需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要`\u003cstyle lang=\"scss\"\u003e\u003c/style\u003e`。\r* **SASS**(**SCSS**)：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看👉[SASS用法指南](https://microzz.com/2017/03/18/sass/))\r* **flex**：flex弹性布局，**简单**适配手机、PC端。\r* **CSS3**：CSS3过渡动画及样式。\r\r## 分析\r\r### Socket.io\r通过Express/Koa在服务端可以这样做:\r\r```javascript\r// Server (app.js)\r\rvar app = require('express')();\rvar server = require('http').Server(app);\rvar io = require('socket.io')(server);\r\rserver.listen(80);\r\rapp.get('/', function (req, res) {\r  res.sendfile(__dirname + '/index.html');\r});\r\rio.on('connection', function (socket) {\r  socket.emit('news', { hello: 'world' });\r  socket.on('my other event', function (data) {\r    console.log(data);\r  });\r});\r```\r\r客户端代码\r\r```javascript\r// Client (index.html)\r\r\u003cscript src=\"/socket.io/socket.io.js\"\u003e\u003c/script\u003e\r\u003cscript\u003e\r  var socket = io.connect('http://localhost');\r  socket.on('news', function (data) {\r    console.log(data);\r    socket.emit('my other event', { my: 'data' });\r  });\r\u003c/script\u003e\r```\r\r不管是服务器还是客户端都有 `emit` 和 `on` 这两个函数，可以说 socket.io 的核心就是这两个函数了，通过 `emit` 和 `on` 可以轻松地实现服务器与客户端之间的双向通信。\r\r`emit` ：用来发射一个事件或者说触发一个事件，第一个参数为事件名，第二个参数为要发送的数据，第三个参数为回调函数（一般省略，如需对方接受到信息后立即得到确认时，则需要用到回调函数）。\r`on` ：用来监听一个 emit 发射的事件，第一个参数为要监听的事件名，第二个参数为一个匿名函数用来接收对方发来的数据，该匿名函数的第一个参数为接收的数据，若有第二个参数，则为要返回的函数。\rsocket.io 提供了三种默认的事件（客户端和服务器都有）：`connect` 、`message` 、`disconnect` 。当与对方建立连接后自动触发 `connect` 事件，当收到对方发来的数据后触发 `message` 事件（通常为 `socket.send()` 触发），当对方关闭连接后触发 `disconnect` 事件。\r\r此外，socket.io 还支持自定义事件，毕竟以上三种事件应用范围有限，正是通过这些自定义的事件才实现了丰富多彩的通信。\r\r最后，需要注意的是，在服务器端区分以下三种情况：\r\r`socket.emit()` ：向建立该连接的客户端广播\r`socket.broadcast.emit()` ：向除去建立该连接的客户端的所有客户端广播\r`io.sockets.emit()` ：向所有客户端广播，等同于上面两个的和\r\r## Vue.js\r在Vue的方面就比较常规了，Vue全家桶：Vue2.0+Vuex+axios+vue-router,我GitHub的有几个开源项目可以参考👉https://github.com/microzz\r\r## 总结\r\r1. 组件状态多了用Vuex管理很方便，引用 Redux 的作者 Dan Abramov 的话说就是：\r\u003e Flux 架构就像眼镜：您自会知道什么时候需要它。\r\r2. 事先一定要先想好整个页面组成，怎样去分组件开发，这样在开发阶段会事半功倍。\r3. Moment.js在Vue中用ES6的方式引入会有问题，可以尝试在main.js尝试这样`import moment from 'moment'` `Vue.prototype.moment = moment;`给Vue的原型上添加moment，这样就可以在Vue的实例中随意使用它了。\r4. get方式通过URL传参最好使用`encodeURI`对参数进行编码\r5. 一定要处理好那些异步操作，否则会带来各种问题。开发阶段使用的是`Promise`，上线时候使用了ES7的`Async`+`Promise`的组合，让异步操作更加合理。\r\r## About\r关于我：👉https://microzz.com/about/\n\rGitHub：👉 https://github.com/microzz\n\rE-mail: 👉 [zhaohui@microzz.com](mailto:zhaohui@microzz.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrozz%2Fvue-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-chat/lists"}