刚开始使用了 socket.io-client 和 vue-socket.io进行结合 但是新项目出现了重复链接的问题 在搞心跳重连的时候不能实时更新发送的数据 参考了好多 终于完工了 然后文章进行了大篇幅修改

安装依赖

npm install vue-socket.io --save  //根据自己用npm / cnpm 

在全局中引入组件

在main.js中引入并调用一下 VueSocketio

import VueSocketIO from 'vue-socket.io'
//  https://XXXXXX2120  是后台给你的长链接地址
Vue.use(new VueSocketIO({
  debug: false,  //测试的时候可以打开
  connection: 'https://XXXXXX2120',
}))

页面使用

sockets位置和你的methods同级

sockets: {
    //查看socket是否渲染成功
    connect() {
      console.log("链接成功");
    },
    //检测socket断开链接
    disconnect() {
      console.log("断开链接");
    }, 
    // 重新链接
    reconnect() {
      console.log("重新链接");
    },
    //客户端接收后台传输的socket事件
    kline: function (msg) {
      console.log(msg);
      //然后记性你的一系列操作
    },
  },

kline名字位置图 （后台返回什么名字 上面写什么）

data() {
    return {
      Timer: null, //定时器
    };
  },
mounted() {
    //我这边需求 一秒钟发送一次数据到后台 （我的位置是在获取数据之后发送 根据自己需求修改位置）
    let that = this;
    //清楚计时器
    if (that.Timer != null) {
      clearInterval(that.Timer);
    }
    that.Timer = setInterval(function () {
      that.$socket.emit("sub", that.emitData); //触发socket连接
      //sub 发送的名字  根据自己项目来
      //that.emitData 发送的内容
    }, 1000);
  },

全局使用了之后 socket就已经全局了 页面可以直接使用 this.$socket

拓展：其他方法里面调用 （项目需求） connect() 在methods里面 需要拿到sockets里面的数据

this.$socket.on("connect", function () {
        this.$socket.on("kline", (msg) => {
        //msg  返回数据进行操作
        });
      });

每秒钟传送数据到后台 重复链接也解决了

最后记得消除计时器和socket

参考文章：https://www.jianshu.com/p/d509e8695850