Centrifuge在vue中基础使用，soket通讯

Centrifuge soket通讯前端使用
这个是后端在使用这个插件，然后前端只要引入一个这个文件，就可以使用，文章使用的文件，地址下本文底部，可直接访问地址下载

<template>
  <div>
    测试websoket
    <div>{{text}}</div>
    <button @click="Fncolos">关闭连接</button>
  </div>
</template>

<script>
import Centrifuge from '@/assets/js/centrifuge.min.js'
export default {
  data(){
    return{
      text:'--------',
      centrifuge:null
    };
  },
  methods:{
    FnwebS(){
      let that=this
      this.centrifuge = new Centrifuge("ws://192.168.0.16:8001/connection/websocket");
      const centrifuge=this.centrifuge
      // centrifuge.setToken("")
      console.log(centrifuge,'--------centrifuge');
      

      centrifuge.on('connect', function (ctx) {
          console.log("connected", ctx);
      });

      centrifuge.on('disconnect', function (ctx) {
          console.log("disconnected", ctx);
      });


      //订阅频道c1  频道不同 收到的信息不同
      centrifuge.subscribe("c1", function (ctx) {
        that.text=ctx.data.value;
        console.log(ctx,'--------shuju',that.text);
      });

      //连接
      centrifuge.connect();
      //关闭连接
      // this.centrifuge.disconnect()
    },
    Fncolos(){
      console.log(this.centrifuge);
      this.centrifuge.disconnect()
    }
  },
  mounted(){
    this.FnwebS()
  },

}
</script>

<style>

</style>

https://blog-static.cnblogs.com/files/enhengenhengNymph/centrifuge.min.js