Opens too many WebSockets

[Joris-van-der-Wel]

I am having hard time reproducing this issue consistently, however every once in a while a single instance of ReconnectingWebSocket seems to create two WebSocket connections at the same time. It even reconnects both of these two instances automatically.

My code boils down to this:

const webSocket = new ReconnectingWebSocket('ws://localhost:1234/' + uniqueToken(), [], {
    maxReconnectionDelay: 10000,
    minReconnectionDelay: 100,
    reconnectionDelayGrowFactor: 1.5,
    connectionTimeout: 2000,
    maxRetries: Infinity,
});
webSocket.addEventListener('open', event => {
    webSocket.binaryType = 'arraybuffer';
    // start sending stuff
});
webSocket.addEventListener('message', event => {
    // do something with event.data
});
webSocket.addEventListener('close', event => {
    // logging
});
webSocket.addEventListener('error', event => {
    // logging
});

(In the logs of the server I find that both of the connections are using the same unique id in the URL)

[pladaria]

It would be great to have some consistent steps to reproduce. Please, update the ticket if you gather more information.

Aso, additional details about your environment would be appreciated. Is this running in browser? Happens for all vendors / versions? Is the uniqueToken() always returning different tokens in every call? Are you sure that the constructor isn't called multiple times?

[hugows]

Hi @Joris-van-der-Wel , did you solve this? I have something similar and not sure if its the library or my use with Redux. I'm trying now to use a unique ID so I can keep a single websocket on the server side..

[hugows]

I was calling close like this:

websocket.close({ keepClosed: true });

I feel very ashamed now, re-reading the docs.

[ngugcx]

I'm using this module with react. If init websocket in the constructor, it will connect twice.

class TokenWatch extends Component {
  constructor(props) {
    super(props);
    // this.ws = new ReconnectingWebSocket(URL) // will have two sockets if init here
  }

  componentDidMount() {
    this.ws = new ReconnectingWebSocket(URL) // only one socket if init here
  }
}

[LKNSI]

Yes can confirm when calling it inside of React, inside of a Vanilla Class...

...
constructor(){
   this.ws = null
}

init(){
  this.ws = new ReconnectingWebSocket('ws://...',[],{startClosed: true})
}
...

will cause two connections to be opened. Unaware if this is down to react's development strict mode, or a bug with reconnecting-websocket.

But most likely strict mode:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods Class component static getDerivedStateFromProps method Function component bodies State updater functions (the first argument to setState) Functions passed to useState, useMemo, or useReducer

[C5H8NNaO4]

I'm having this issue as well. It doesn't seem to happen with a production build; But there are two seperate socket connections even though the constructor is only being called once.