WebSocket：死后如何自动重新连接

Question

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function () {
  ws.send(JSON.stringify({
      .... some message the I must send when I connect ....
  }));

};

ws.onmessage = function (e) {
  console.log('Got a message')
  console.log(e.data);
};

ws.onclose = function(e) {  
  console.log('socket closed try again'); 

}

ws.onerror = function(err) {
  console.error(err)
};

当我第一次连接到socket时，我必须先向服务器发送一条消息来验证自己并订阅频道。

我遇到的问题是，有时套接字服务器不可靠，这会触发 'ws' 对象的 onerror 和 onclose 事件。

问题：有什么好的设计模式可以让我在套接字关闭或遇到错误时等待 10 秒，然后重新连接到套接字服务器（并将初始消息重新发送到服务器）

Answer 1

这就是我最终的结果。它适用于我的目的。

function connect() {
  var ws = new WebSocket('ws://localhost:8080');
  ws.onopen = function() {
    // subscribe to some channels
    ws.send(JSON.stringify({
        //.... some message the I must send when I connect ....
    }));
  };

  ws.onmessage = function(e) {
    console.log('Message:', e.data);
  };

  ws.onclose = function(e) {
    console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
    setTimeout(function() {
      connect();
    }, 1000);
  };

  ws.onerror = function(err) {
    console.error('Socket encountered error: ', err.message, 'Closing socket');
    ws.close();
  };
}

connect();

Answer 2

这对我有用 setInterval，因为客户端连接可能会丢失。

ngOnInit(): void {
    if (window.location.protocol.includes('https')) {
        this.protocol = 'wss';
    }

    this.listenChanges();
}


listenChanges(): void {
    this.socket = new WebSocket(`${this.protocol}://${window.location.host}/v1.0/your/url`);

    this.socket.onmessage = (event): void => {
        // your subscription stuff
        this.store.dispatch(someAction);
    };

    this.socket.onerror = (): void => {
        this.socket.close();
    };


    this.socket.onopen = (): void => {
        clearInterval(this.timerId);

        this.socket.onclose = (): void => {
            this.timerId = setInterval(() => {
                this.listenChanges();
            }, 10000);
        };
    };
}

当套接字打开时不要忘记调用clearInterval。

Answer 3

这不是一个明确的反应问题，但这是一个反应风格的答案：

TLDR：您可以使用setInterval定期检查websocket连接状态，如果连接关闭则尝试重新连接。 https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.connect = this.connect.bind(this);
  }

  componentDidMount() {
    this.interval = setInterval(this.connect, 1000);
  }

  componentWillUnmount() {
    if (this.ws) this.ws.close();
    if (this.interval) clearInterval(this.interval);
  }

  connect() {
    // https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState
    if (this.ws === undefined || (this.ws && this.ws.readyState === 3)) {
      this.ws = new WebSocket(`ws://localhost:8080`);

      this.ws.onmessage = (e) => {
        console.log(JSON.parse(e.data));
      };
    }
  }

  render() {
    return <div>Hey!</div>;
  }
}

Answer 4

原生 Websocket api 之上的一个非常有趣的包装器，可以很好地添加它

https://github.com/joewalnes/reconnecting-websocket

Answer 5

如果套接字关闭或服务器上发生任何错误，则使用 async-await 客户端将永远尝试每 5 秒自动连接一次 看看my answer

Answer 6

我发现这个包https://github.com/pladaria/reconnecting-websocket可以解决Websocket连接的重连问题。它有一个可配置选项列表，其中之一是reconnectionDelayGrowFactor，它决定了重新连接延迟增长的速度。

Answer 7

更新答案：

最后，（如果您不使用 java）我发现您最好实现自己的“ping/pong”策略。 （如果你用的是java，请看一下ping/pong“动作类型”，我记不太清楚了……）

1. 客户端每 5 秒向服务器发送一次“ping”。
2. 服务器收到“ping”后，应向客户端回显“pong”。
3. 如果在 5 秒内没有收到“pong”，客户端应该重新连接服务器。

不要依赖任何第三方库。

警告：请勿使用这些工具：（原因：它们不可靠且不稳定，并且工作方式非常有限。）

1. 检查网络是否可用：https://github.com/hubspot/offline
2. 重新连接：https://github.com/joewalnes/reconnecting-websocket