Vue Socket.io源码详细分析-js教程-PHP中文网

这篇文章主要介绍了Vue Socket.io源码解读，现在分享给大家，也给大家做个参考。

背景

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

开始

文件架构

我们主要看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', {})了

以上就是Vue Socket.io源码详细分析的详细内容，更多请关注php中文网其它相关文章！