最详细的vue-socket.io用法

     通过最近一系列的踩坑之后，总结出了这篇相对较为完善的关于vue-socket.io的使用文章，包含大家困扰的（socket连接、断开重连，以及当连接的地址是动态的情况下，我们应该注意的事项

---

一.下载vue-socket.io

    npm install vue-socket.io --save

二.引入到vue-cli项目中

        引入的方式有两种情形，具体根据你们的项目需求来做

 a.第一种情景：webSocket连接的地址是固定的

在main.js中直接这样写

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({

    debug: true,

    connection: 'http://metinseylan.com:1992',  //

}))

在这里我有句话要说，我百度出来的，连接方式很多直接在main.js中如下这样写：

import VueSocketio from 'vue-socket.io'; 

Vue.use(VueSocketio, 'http://socketserver.com:1923');              //*****这种方法我试了，我这边不行***//

如果有大神知道原因，可在评论下方告诉我哦

 b.第二种情形：webSocket连接的地址的是动态的，是后台通过接口传给我们的

如图所示

  **这里要提示的一点就是，当连接的地址是动态的，代码的执行顺序就很重要了，即new VueSocket在main.js中的位置**

三.在mounted中执行connect

a.当socket地址是静态的写法

mounted(){

this.$socket.emit('connect', 1)

}

b.当socket地址是动态的

因为此时的socket连接地址是动态的，就会存在请求响应然后渲染的时间，这个时候就会出现socket还没渲染成功就执行了App.vue，这时候connect连接事件就不会触发，所以采用定时器的方法来执行connect

mounted() {

    var timerOne = window.setInterval(() => {

      if (this.$socket) {

        this.$socket.emit('connect', 1)

        window.clearInterval(timerOne)

        return;

      }

    }, 500)

  },

四，推送消息给后台，连接socket

五、socket连接成功

因为我们在  new VueSocketIO中开启了debug: true,就会在控制台中出现那些蓝色字体，来帮助我们调试socket，注意，如果蓝色的字中，没有包含我们在socket中定义的事件（connect、users、reconnect......），那就可能是我们在main,js中创建的new VueSocketIO渲染时间有问题,这个时候，connect事件也不会执行

后台定义的事件

如图上所示user、transferMessage这些名词，都是后台自定义的，每个项目中可能都会有所不同，我们接受消息的事件就是靠后台来告诉我们的

vue-socket.io中自带的几个事件

connect:查看socket是否渲染成功 

disconnect:检测socket断开连接 

reconnect:重新连接socket事件

以上就是所有啦，有问题可评论区见，如以上文章有错误地方，也可评论区指出......