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

Question

I'm trying to connect using socket.io (client) , websocket.org (server) in vue.js . After I reading all examples I'm able to connect to the socket but once I emit the event BOARD_ID I'm not receiving anything back. As a socket server, I'm using wss://echo.websocket.org and I tried a standalone example and it works.

main.js

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");

Board.vue

<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>

Answer 1

A Socket.IO client requires a Socket.IO server to communicate. The echo.websocket.org is a plain WebSocket server and cannot be connected to using a Socket.IO client.

If you want to connect to echo.websocket.org you are looking for the WebSocket API . Perhaps you are only trying to use the echo server for testing, and would like to use Socket.IO. In that case I recommend setting up your own Socket.IO server.

Read more: What Socket.IO is not