神级程序员用Vue仿QQ群遭到疯抢，要求月薪6000，人事总监直接开3万

今天小编我逛论坛看到了一位前端大神，分享他的一个项目，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

1. 学好前端开发， 并非一朝一夕。兴趣---是迈向前端开发高手之路的一个好的开端：如果你本身对前端开发并不感兴趣，只是因为工作需要而刻意去学，那么你无论拜读哪位大师的教程，或是投奔哪位前端开发高手的门下，你也只能学会一点皮毛而已。学习是一个漫长的过程，只有确定自己的兴趣才能在这个行业长期发展下去。对于刚开始学习前端开发的伙伴们，可以选择先模仿。这样才能在模仿中慢慢发现规律。当过了一定阶段后，就不要再盲目去模仿了，要突破自己哦！

2. 这个仿QQ群的案例到这里就做结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：595549645，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频