今天小编我逛论坛看到了一位前端大神，分享他的一个项目，vue全家桶打造一个类似QQ群的聊天室，因为最近我们公司也在招聘前端，要求把工资压低到6000左右，于是大伙都到各个论坛上寻找大神，浏览器调到这位大神项目时我们部门的各位HR大佬按捺不住了，纷纷表示要招聘他，最高的人事总监甚至把转正工资提到3万，不得不佩服这位博主技术还是挺不错的，我自己COPY了一份，把他的项目源码分享给大家，大伙也看看你们的差距多大吧，想自己练手的也可以拿去练手。
这篇文章分享之前我还是要推荐下我自己的前端群：595549645，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
Vue.js+Socket.io+Koa2打造一个智能聊天室
Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室。已经开源啦！为了方便大家学习，智能机器人、IP定位接口也开放了！接口请在源码中查看
QQ群里面的智能机器人很火，于是用Vue.js+Socket.io+Koa2打造了一个智能聊天室，实现了IP定位、在线群聊，加入了Emoji表情，以及接入了智能机器人
前言
话说最近前端技术圈也有派系之争了，是好事还是坏事？萝卜青菜各有所爱，本项目采用的是Vue.js做前端页面展示，大家完全可以换成自己别的喜欢的，React、Angular等等，每个框架都有可取的地方，这里不多说下面扯到正题上
技术栈
分析
Socket.io
通过Express/Koa在服务端可以这样做:
客户端代码
不管是服务器还是客户端都有 emit 和 on这两个函数，可以说 socket.io 的核心就是这两个函数了，通过 emit和on可以轻松地实现服务器与客户端之间的双向通信。
emit：用来发射一个事件或者说触发一个事件，第一个参数为事件名，第二个参数为要发送的数据，第三个参数为回调函数（一般省略，如需对方接受到信息后立即得到确认时，则需要用到回调函数）。
on：用来监听一个 emit 发射的事件，第一个参数为要监听的事件名，第二个参数为一个匿名函数用来接收对方发来的数据，该匿名函数的第一个参数为接收的数据，若有第二个参数，则为要返回的函数。
socket.io 提供了三种默认的事件（客户端和服务器都有）：connect 、message、disconnect。当与对方建立连接后自动触发connect事件，当收到对方发来的数据后触发 message事件（通常为 socket.send()触发），当对方关闭连接后触发 disconnect事件。
此外，socket.io 还支持自定义事件，毕竟以上三种事件应用范围有限，正是通过这些自定义的事件才实现了丰富多彩的通信。
最后，需要注意的是，在服务器端区分以下三种情况：
socket.emit()：向建立该连接的客户端广播
socket.broadcast.emit() ：向除去建立该连接的客户端的所有客户端广播
io.sockets.emit()：向所有客户端广播，等同于上面两个的和
Vue.js
在Vue的方面就比较常规了，Vue全家桶：Vue2.0+Vuex+axios+vue-route
学好前端开发， 并非一朝一夕。兴趣---是迈向前端开发高手之路的一个好的开端：如果你本身对前端开发并不感兴趣，只是因为工作需要而刻意去学，那么你无论拜读哪位大师的教程，或是投奔哪位前端开发高手的门下，你也只能学会一点皮毛而已。学习是一个漫长的过程，只有确定自己的兴趣才能在这个行业长期发展下去。对于刚开始学习前端开发的伙伴们，可以选择先模仿。这样才能在模仿中慢慢发现规律。当过了一定阶段后，就不要再盲目去模仿了，要突破自己哦！
这个仿QQ群的案例到这里就做结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：595549645，欢迎初学和进阶中的小伙伴。
