VueSocket.io源码解读

背景

有一个项目&＃xff0c;今年12月份开始重构&＃xff0c;项目涉及到了socket。但是socket用的是以前一个开发人员封装的包&＃xff08;这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子&＃xff09;。因此&＃xff0c;趁着这个重构的机会&＃xff0c;将vue-socket.io引入&＃xff0c;后端就用socket.io。我也好奇看了看vue-socket.io的源码&＃xff08;我不会说是因为这个库的文档实在太简略了&＃xff0c;我为了稳点去看源码了解该怎么用&＃xff09;

开始

• 文件架构

我们主要看src下的三个文件&＃xff0c;可以看出该库是用了观察者模式

• Main.js

// 这里创建一个observe对象&＃xff0c;具体做了什么可以看Observer.js文件
let observer &＃61; new Observer(connection, store)// 将socket挂载到了vue的原型上,然后就可以
// 在vue实例中就可以this.$socket.emit(&＃39;xxx&＃39;, {})
Vue.prototype.$socket &＃61; observer.Socket;

import store from &＃39;./yourstore&＃39;
Vue.use(VueSocketio, socketio(&＃39;http://socketserver.com:1923&＃39;), store);

我们如果要使用这个库的时候&＃xff0c;一般是这样写的代码&＃xff08;上图2&＃xff09;。上图一的connection和store就分别是图二的后两个参数。意思分别为socket连接的url和vuex的store啦。图一就是将这两个参数传进Observer&＃xff0c;新建了一个observe对象&＃xff0c;然后将observe对象的socket属性挂载在Vue原型上。那么我们在Vue的实例中就可以直接 this.$sockets.emit(&＃39;xxx&＃39;, {})了

// ?就是在vue实例的生命周期做一些操作
Vue.mixin({created(){let sockets &＃61; this.$options[&＃39;sockets&＃39;]this.$options.sockets &＃61; new Proxy({}, {set: (target, key, value) &＃61;> {Emitter.addListener(key, value, this)target[key] &＃61; valuereturn true;},deleteProperty: (target, key) &＃61;> {Emitter.removeListener(key, this.$options.sockets[key], this)delete target.key;return true}})if(sockets){Object.keys(sockets).forEach((key) &＃61;> {this.$options.sockets[key] &＃61; sockets[key];});}},/*** 在beforeDestroy的时候&＃xff0c;将在created时监听好的socket事件&＃xff0c;全部取消监听* delete this.$option.sockets的某个属性时&＃xff0c;就会将取消该信号的监听*/beforeDestroy(){let sockets &＃61; this.$options[&＃39;sockets&＃39;]if(sockets){Object.keys(sockets).forEach((key) &＃61;> {delete this.$options.sockets[key]});}}

下面就是在Vue实例的生命周期做一些操作。创建的时候&＃xff0c;将实例中的$options.sockets的值先缓存下来&＃xff0c;再将$options.sockets指向一个proxy对象&＃xff0c;这个proxy对象会拦截外界对它的赋值和删除属性操作。这里赋值的时候&＃xff0c;键就是socket事件&＃xff0c;值就是回调函数。赋值时&＃xff0c;就会监听该事件&＃xff0c;然后将回调函数&＃xff0c;放进该socket事件对应的回调数组里。删除时&＃xff0c;就是取消监听该事件了&＃xff0c;将赋值时压进回调数组的那个回调函数&＃xff0c;删除&＃xff0c;表示&＃xff0c;我不监听了。这样写法&＃xff0c;其实就跟vue的响应式一个道理。也因此&＃xff0c;我们就可以动态地添加和移除监听socket事件了&＃xff0c;比如this.$option.sockets.xxx &＃61; () &＃61;> ()和 delete this.$option.sockets.xxx。最后将缓存的值&＃xff0c;依次赋值回去&＃xff0c;那么如下图的写法就会监听到事件并执行回调函数了&＃xff1a;

var vm &＃61; new Vue({sockets:{connect: function(){console.log(&＃39;socket connected&＃39;)},customEmit: function(val){console.log(&＃39;this method was fired by the socket server. eg: io.emit("customEmit", data)&＃39;)}},methods: {clickButton: function(val){// $socket is socket.io-client instancethis.$socket.emit(&＃39;emit_method&＃39;, val);}}
})

• Emitter.js

Emitter.js主要是写了一个Emitter对象&＃xff0c;该对象提供了三个方法&＃xff1a;

addListener

addListener(label, callback, vm) {// 回调函数类型是回调函数才对if(typeof callback &＃61;&＃61; &＃39;function&＃39;){// 这里就很常见的写法了&＃xff0c;判断map中是否已经注册过该事件了// 如果没有&＃xff0c;就初始化该事件映射的值为空数组&＃xff0c;方便以后直接存入回调函数// 反之&＃xff0c;直接将回调函数放入数组即可this.listeners.has(label) || this.listeners.set(label, []);this.listeners.get(label).push({callback: callback, vm: vm});return true}return false
}

其实很常规啦&＃xff0c;实现发布订阅者模式或者观察者模式代码的同学都很清楚这段代码的意思。Emiiter用一个map来存储事件以及它对应的回调事件数组。这段代码先判断map中是否之前已经存储过了该事件&＃xff0c;如果没有&＃xff0c;初始化该事件对应的值为空数组&＃xff0c;然后将当前的回调函数&＃xff0c;压进去&＃xff0c;反之&＃xff0c;直接压进去。

removeListener

if (listeners && listeners.length) {index &＃61; listeners.reduce((i, listener, index) &＃61;> {return (typeof listener.callback &＃61;&＃61; &＃39;function&＃39; && listener.callback &＃61;&＃61;&＃61; callback && listener.vm &＃61;&＃61; vm) ?i &＃61; index :i;}, -1);if (index > -1) {listeners.splice(index, 1);this.listeners.set(label, listeners);return true;}
}
return false;

这里也很简单啦&＃xff0c;获取该事件对应的回调数组。如果不为空&＃xff0c;就去寻找需要移除的回调&＃xff0c;找到后&＃xff0c;直接删除&＃xff0c;然后将新的回调数组覆盖原来的那个就可以了

emit


if (listeners && listeners.length) {listeners.forEach((listener) &＃61;> {listener.callback.call(listener.vm,...args)});return true;
}
return false;

这里就是监听到事件后&＃xff0c;执行该事件对应的回调函数&＃xff0c;注意这里的call&＃xff0c;因为监听到事件后我们可能要修改下vue实例的数据或者调用一些方法&＃xff0c;用过vue的同学都知道我们都是this.xxx来调用的&＃xff0c;所以一定得将回调函数的this指向vue实例&＃xff0c;这也是为什么存回调事件时也要把vue实例存下来的原因。

• Observer.js

constructor(connection, store) {// 这里很明白吧&＃xff0c;就是判断这个connection是什么类型// 这里的处理就是你可以传入一个连接好的socket实例&＃xff0c;也可以是一个urlif(typeof connection &＃61;&＃61; &＃39;string&＃39;){this.Socket &＃61; Socket(connection);}else{this.Socket &＃61; connection}// 如果有传进vuex的store可以响应在store中写的mutations和actions// 这里只是挂载在这个oberver实例上if(store) this.store &＃61; store;// 监听&＃xff0c;启动&＃xff01;this.onEvent()}

这个Observer.js里也主要是写了一个Observer的class&＃xff0c;以上是它的构造函数&＃xff0c;构造函数第一件事是判断connection是不是字符串&＃xff0c;如果是就构建一个socket实例&＃xff0c;如果不是&＃xff0c;就大概是个socket的实例了&＃xff0c;然后直接挂载在它的对象实例上。其实这里我觉得可以参数检查严格点&＃xff0c; 比如字符串被人搞怪地可能会传入一个非法的url&＃xff0c;对吧。这个时候判断下&＃xff0c;抛出一个error提醒下也好&＃xff0c;不过应该也没人这么无聊吧&＃xff0c;2333。然后如果传入了store&＃xff0c;也挂在对象实例上吧。最后就启动监听事件啦。我们看看onEvent的逻辑

onEvent(){// 监听服务端发来的事件&＃xff0c;packet.data是一个数组// 第一项是事件&＃xff0c;第二个是服务端传来的数据// 然后用emit通知订阅了该信号的回调函数执行// 如果有传入了vuex的store&＃xff0c;将该事件和数据传入passToStore&＃xff0c;执行passToStore的逻辑var super_onevent &＃61; this.Socket.onevent;this.Socket.onevent &＃61; (packet) &＃61;> {super_onevent.call(this.Socket, packet);Emitter.emit(packet.data[0], packet.data[1]);if(this.store) this.passToStore(&＃39;SOCKET_&＃39;&＃43;packet.data[0], [ ...packet.data.slice(1)])};// 这里跟上面意思应该是一样的&＃xff0c;我很好奇为什么要分开写&＃xff0c;难道上面的写法不会监听到下面的信号&＃xff1f;// 然后这里用一个变量暂存this// 但是下面都是箭头函数了&＃xff0c;我觉得没必要&＃xff0c;毕竟箭头函数会自动绑定父级上下文的thislet _this &＃61; this;["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"].forEach((value) &＃61;> {_this.Socket.on(value, (data) &＃61;> {Emitter.emit(value, data);if(_this.store) _this.passToStore(&＃39;SOCKET_&＃39;&＃43;value, data)})})}

这里就是有点类似重载onevent这个函数了&＃xff0c;监听到事件后&＃xff0c;将数据拆包&＃xff0c;然后通知执行回调和传递给store。大体的逻辑是这样子。然后这代码实现有两部分&＃xff0c;第一部分和第二部分逻辑基本一样。只是分开写。&＃xff08;其实我也不是很懂啦&＃xff0c;如果很有必要的话&＃xff0c;我猜第一部分的写法还监听不了第二部分的事件吧&＃xff0c;所以要另外监听&＃xff09;。最后只剩下一个passToStore了&＃xff0c;其实也很容易懂

passToStore(event, payload){// 如果事件不是以SOCKET_开头的就不用管了if(!event.startsWith(&＃39;SOCKET_&＃39;)) return// 这里遍历vuex的store中的mutationsfor(let namespaced in this.store._mutations) {// 下面的操作是因为&＃xff0c;如果store中有module是开了namespaced的&＃xff0c;会在mutation的名字前加上 xxx/// 这里将mutation的名字拿出来let mutation &＃61; namespaced.split(&＃39;/&＃39;).pop()// 如果名字和事件是全等的&＃xff0c;那就发起一个commit去执行这个mutation// 也因此&＃xff0c;mutation的名字一定得是 SOCKET_开头的了if(mutation &＃61;&＃61;&＃61; event.toUpperCase()) this.store.commit(namespaced, payload)}// 这里类似上面for(let namespaced in this.store._actions) {let action &＃61; namespaced.split(&＃39;/&＃39;).pop()// 这里强制要求了action的名字要以 socket_ 开头if(!action.startsWith(&＃39;socket_&＃39;)) continue// 这里就是将事件转成驼峰式let camelcased &＃61; &＃39;socket_&＃39;&＃43;event.replace(&＃39;SOCKET_&＃39;, &＃39;&＃39;).replace(/^([A-Z])|[\W\s_]&＃43;(\w)/g, (match, p1, p2) &＃61;> p2 ? p2.toUpperCase() : p1.toLowerCase())// 如果action和事件全等&＃xff0c;那就发起这个actionif(action &＃61;&＃61;&＃61; camelcased) this.store.dispatch(namespaced, payload)}}

passToStore嘛其实就是做两个事情&＃xff0c;一个是获取与该事件对应的mutation&＃xff0c;然后发起一个commit&＃xff0c;一个是获取与该事件对应的action&＃xff0c;然后dispatch。只是这里的实现对mutations和actions的命名有了要求&＃xff0c;比如mutations的命名一定得是SOCKET_开头&＃xff0c;action就是一个得socket_开头&＃xff0c;然后还得是驼峰式命名。

最后

• 首先&＃xff0c;这个源码是不是略有点简单&＃xff0c;哈哈哈&＃xff0c;不过&＃xff0c;能给你们一些帮助&＃xff0c;我觉得也挺好的
• 然后&＃xff0c;就是如果上面我说的有不是很对的&＃xff0c;请大家去这里发issue或者直接评论吧
• 最后&＃xff0c;源码的详细的注释在这里&＃xff0c;欢迎大家提issue&＃xff0c;如果能star和fork就更好了。以后我尽量更新自己阅读源码的感悟&＃xff0c;大家一起学习。