问使用VUE或vue-socket.io连接Socket.io

EN

import Vue from "vue";
import VueSocketIO from "vue-socket.io";
import router from "./router";
import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: "wss://echo.websocket.org"
  })
);

new Vue({
  sockets: {
    connect: function () {
      console.log("Socket Connected");
    }
  },
  router,
  render: (h) => h(App)
}).$mount("#app");

<template>
  <div id="Board">
    <h3>Board ID is :{{ this.$route.params.Bid }}</h3>
    <button v-on:click="goToHome">Go To Home</button>
    <button v-on:click="updateBoard">Send To Socket</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "Board",
  data() {
    return {
      domain: "https://someapp.app",
      path: "https://someapp.app/board/" + this.$route.params.Bid,
      message: "Not Recived",
    };
  },
  methods: {
    goToHome() {
      this.$router.push({ name: "Home" });
    },
    updateBoard: function (e) {
      this.$socket.emit("BOARD_ID", this.$route.params.Bid);
      console.log("Sent...");
    },
    listenBoard: function () {

      this.$socket.on("BOARD_ID", (data) => {
        console.log(data);
        this.message = "Recived: " + data;
      });

      this.sockets.subscribe("BOARD_ID", (data) => {
        console.log(data);
        this.message = "Recived: " + data;
      });

      console.log("Litening...");
    }
  },
  mounted: function () {
    this.listenBoard();
  },
};
</script>