Vue Socket.io源码解读
人气：495 时间：2019-04-09
这篇文章主要为大家详细介绍了Vue Socket.io源码解读，具有一定的参考价值，可以用来参考一下。
感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！
背景
有一个项目，今年12月份开始重构，项目涉及到了socket。但是socket用的是以前一个开发人员封装的包（这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子）。因此，趁着这个重构的机会，将vue-socket.io引入，后端就用socket.io。我也好奇看了看vue-socket.io的源码（我不会说是因为这个库的文档实在太简略了，我为了稳点去看源码了解该怎么用）
开始
文件架构
【q1010.com温馨提示：图片暂缺】
我们主要看src下的三个文件，可以看出该库是用了观察者模式
Main.js
代码如下：
// 这里创建一个observe对象，具体做了什么可以看Observer.js文件
let observer = new Observer(connection, store)
// 将socket挂载到了vue的原型上,然后就可以
// 在vue实例中就可以this.$socket.emit('xxx', {})
Vue.prototype.$socket = observer.Socket;
代码如下：
import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
我们如果要使用这个库的时候，一般是这样写的代码（上图2）。上图一的connection和store就分别是图二的后两个参数。意思分别为socket连接的url和vuex的store啦。图一就是将这两个参数传进Observer，新建了一个observe对象，然后将observe对象的socket属性挂载在Vue原型上。那么我们在Vue的实例中就可以直接 this.$sockets.emit('xxx', {})了
代码如下：
//
本文来自：http://www.q1010.com/184/4671-0.html
注：关于Vue Socket.io源码解读的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。
关键词：vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。