QQ 群里面的智能机器人很火,于是用 vue.js+Socket.io+Koa2 打造了一个智能聊天室,实现了 IP 定位、在线群聊,加入了 Emoji 表情: smile:,以及接入了智能机器人: smirk:
在线预览地址::point_right: https://microzz.com/vue-chat/
的 HTTP 库,向后端发起请求。
- Promise
。
- <style lang="sCSS"></style>
通过 Express/Koa 在服务端可以这样做:
- // Server (app.js)
- var app = require('express')();
- var server = require('http').Server(app);
- var io = require('socket.io')(server);
- server.listen(80);
- app.get('/',
- function(req, res) {
- res.sendfile(__dirname + '/index.html');
- });
- io.on('connection',
- function(socket) {
- socket.emit('news', {
- hello: 'world'
- });
- socket.on('my other event',
- function(data) {
- console.log(data);
- });
- });
客户端代码
- // Client (index.html)
- <script src="/socket.io/socket.io.js"></script>
- <script>
- var socket = io.connect('http://localhost');
- socket.on('news', function (data){
- console.log(data);
- socket.emit('my other event', { my: 'data' });
- });
- </script>
不管是服务器还是客户端都有
和
- emit
这两个函数,可以说 socket.io 的核心就是这两个函数了,通过
- on
和
- emit
可以轻松地实现服务器与客户端之间的双向通信。
- on
:用来发射一个事件或者说触发一个事件,第一个参数为事件名,第二个参数为要发送的数据,第三个参数为回调函数(一般省略,如需对方接受到信息后立即得到确认时,则需要用到回调函数)。
- emit
:用来监听一个 emit 发射的事件,第一个参数为要监听的事件名,第二个参数为一个匿名函数用来接收对方发来的数据,该匿名函数的第一个参数为接收的数据,若有第二个参数,则为要返回的函数。
- on
socket.io 提供了三种默认的事件(客户端和服务器都有):
、
- connect
、
- message
。当与对方建立连接后自动触发
- disconnect
事件,当收到对方发来的数据后触发
- connect
事件(通常为
- message
触发),当对方关闭连接后触发
- socket.send()
事件。
- disconnect
此外,socket.io 还支持自定义事件,毕竟以上三种事件应用范围有限,正是通过这些自定义的事件才实现了丰富多彩的通信。
最后,需要注意的是,在服务器端区分以下三种情况:
:向建立该连接的客户端广播
- socket.emit()
:向除去建立该连接的客户端的所有客户端广播
- socket.broadcast.emit()
:向所有客户端广播,等同于上面两个的和
- io.sockets.emit()
在 Vue 的方面就比较常规了,Vue2.0+Vuex+axios+vue-router, 我 GitHub 的有几个开源项目可以参考: point_right: https://github.com/microzz
- import moment from 'moment'
给 Vue 的原型上添加 moment,这样就可以在 Vue 的实例中随意使用它了。
- Vue.prototype.moment = moment;
对参数进行编码
- encodeURI
,上线时候使用了 ES7 的
- Promise
+
- Async
的组合,让异步操作更加合理。
- Promise
涉及到很多后端代码,暂时不开源,可以联系我获取相关代码
:postbox:[zhaohui@microzz.com] (mailto:zhaohui@microzz.com)
也可以关注我的 GitHub 获取最新情况
:point_right: https://github.com/microzz
来源: http://www.tuicool.com/articles/Mrq22e2