Question

因此，我正在构建一个应用程序，必须使用套接字URL，然后使用socket.io连接到它。我想知道在Vue-CLI应用程序中从客户端进行连接的最佳方法是什么。当我将其插入创建时，应用程序变得异常缓慢。

var configUrl = "CONFIG_URL";
// Axios request to retrieve socket URL
axios.get(configUrl).then((response) => {
  var socketUrl = response.data.config.liveDistributionSSL;
  var socket = io(socketUrl);

  socket.on("connect", () => {
    console.log("Connected");
    socket.emit("subscribe", {
      subscribeMode: "topSportBets",
      language: {
        default: "en"
      },
      deliveryPlatform: "WebSubscribe",
      playerUuid: null,
      subscribeOptions: {
        autoSubscribe: true,
        betCount: 3,
        excludeMeta: false,
        resubscriptions: 0,
        fullBetMeta: true,
        browser: {}
      }
    });
  });

  socket.on("message", (message) => {
    switch (message.type) {
      case "state":
        //Calling commit on an mutation to add data to it sent from socket
        commit('updateData', message.data);
        console.log("Data =>", message.data)
        break;
      case "currentMatches":
        // We have matches to update
        break;
      case "betchange":
        // We have match bets to update
        break;
    }
  });
});

我正在使用Vuex，并将此代码放入了从Created生命周期挂钩调用的操作中。

Answer 1

如果我错了，请纠正我，但是我认为您不应该在操作中设置套接字连接。仅来自Socketio的请求。

您不需要每次调用动作时都建立连接，Socketio将处理连接，直到连接关闭或客户端断开连接为止。只需通过调用突变SOCKET_CONNECT（使用commit）一次即可建立连接，例如从您的主Vue文件中。

请参见以下示例：https://github.com/MetinSeylan/Vue-Socket.io

如何在Vue-cli应用程序中使用Socket.io客户端连接到套接字

1 个答案: