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

imzjd6km 于 2023-01-17 发布在 Vue.js

关注(0)|答案(2)|浏览(433)

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

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 ()，如果我不刷新页面，它将不会重新连接。
我试过使用watcher：

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

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

vue.js

来源：https://stackoverflow.com/questions/53584245/how-to-reconnect-a-websocket-connection-after-manual-close-vue

2条答案

按热度按时间

xqkwcwgp1#

你的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

赞(0）回复(0）举报 2023-01-17

qcuzuvrc2#

重新连接前，应检查关闭状态代码。e.code === 1e3||即代码=== 1001||即代码=== 1005

赞(0）回复(0）举报 2023-01-17