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

Question

我正在尝试在 vue.js 中使用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 server 进行测试，并且想使用 Socket.IO。 在这种情况下，我建议设置您自己的 Socket.IO 服务器。

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