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

Question

我正在尝试使用socket.io (client)，websocket.org (server)和vue.js进行连接。在阅读完所有示例之后，我能够连接到套接字，但是一旦发出事件BOARD_ID，就不会收到任何返回。作为套接字服务器，我使用的是wss://echo.websocket.org，我尝试了一个独立的示例，它可以工作。

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

Socket.IO客户端需要Socket.IO服务器进行通信。echo.websocket.org是一个普通的WebSocket服务器，不能连接到使用Socket.IO客户端。

如果您想连接到echo.websocket.org，您正在寻找WebSocket API。也许您只是尝试使用echo服务器进行测试，并且希望使用Socket.IO。在这种情况下，我建议设置您自己的Socket.IO服务器。

阅读更多: Socket.IO不是什么