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

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

1 个答案: