手动关闭后如何重新连接websocket连接 - Vue

Question

这是我打开/关闭套接字连接的方法：

methods: {
  connect () {
    this.$socket.onopen = () => {
      this.status = 'connected'
      this.$socket.onmessage = ({data}) => {
        this.$socket.send(this.message)
        console.log({ event: "Recieved message", data })
      }
    }
    this.$socket.onclose = (e) => {
      console.log('Socket is closed. Reconnect will be attempted in 1 second.')
      setTimeout(() => {
        this.connect()
      }, 1000)
    }
  },
  disconnect () {
    this.$socket.close()
    this.status = 'disconnected'
  }
}

我没有使用 socket.io 等，只是内置在 Websocket 对象中。 当我手动调用disconnect () 方法时 - 它按预期关闭连接，但是当我再次发送消息时 - 它说连接已关闭。由于我在挂载中调用connect ()，因此如果我不刷新页面，它将不会重新连接。

我尝试过使用观察者：

watch: {
  '$socket': 'connect'
}

但是没有效果。有没有办法监视 websocket 连接状态？如果它已关闭 - 调用 connect ()，如果它出错 - 调用 connect () 重新连接它。

Answer 1

您的 connect() 方法不会“重新连接”到 WebSocket 服务器。所以调用this.connect() 只是重写你的onopen 处理程序。

您必须采取必要的步骤重新连接到 WebSocket 服务器。这个问题的最出色的答案很好地解释了您的代码的良好结构：

vue: emitting global events from websocket listener

很遗憾，它没有回答您的具体问题。因此，我从该答案中分叉了沙箱，并在下面添加了修改后的代码，以便您实现目标。

import Vue from "vue";

const url = "wss://echo.websocket.org";
let socket;

const emitter = new Vue({
  methods: {
    send(message) {
      if (1 === socket.readyState) socket.send(message);
    },
    close() {
      if (1 === socket.readyState) {
        emitter.$emit("message", "Closing Socket.");
        socket.close();
        socket = null; // prevent memory leak
      }
    },
    connect() {
      socket = new WebSocket(url);
      socket.onmessage = function(msg) {
        emitter.$emit("message", msg.data);
      };
      socket.onerror = function(err) {
        emitter.$emit("error", err);
      };
      emitter.$emit("message", "Openning Socket.");
    }
  }
});

emitter.connect();

export default emitter;

要了解如何使用此服务，请查看运行示例中的index.js： https://codesandbox.io/s/ry4993q654