Web socket refreshes causing duplicate

When I navigate to a page with a web socket / channel implementation on my local dev server and let my browser idle, eventually there will be additional web socket connections. This leads to subsequent channel join and receive events where the payload gets duplicated and rendered on screen again.

There are no errors in the terminal / server logs when this happens.

Is this a default dev environment behavior that can be disabled?

websocket

1 Like

I think this has to do with the web socket token expiration.

If the user session’s duration prior to expiration is greater than the web socket’s token duration prior to expiration, then the web socket token establishes a new token. This causes a subsequent channel join event.

Is this a bug or perhaps I am mistaken w.r.t the issue?

Do you have the live reload options enabled? If so that sets up it’s own websocket connection to handle that.

yes, it was enabled by default. Does that mean a new websocket connection gets reestablished even if no code was updated? The page does not reload, only the web socket connection is duplicated. In the screenshot, there are 4 web socket connections.

The first is the phoenix channel/socket.
Second is the live reload.
Third is the duplicated phoenix channel/socket.
Fourth is the live reload.

No errors were reported in the js console or server logs aside from the session expiry.

Screenshot of console.log after the receive block on a channel join event. Is there any way of setting a breakpoint to find out what is specifically causing the join event duplication?

join

I’m a month too late but maybe it’ll help somebody having the same problem in the future.

This looks like something that it’s addressed in the annotations exercise from the Programming Phoenix (Chapter 10: “Using Channels”, the “Handling Disconnects” section).

Yes, if you are sending a payload when the user joins a channel, it’ll be sent again on reconnects –even in production, this is not about the default dev environment.

The way around it, is to send some timestamp or id when making a connection, in a way your server can know what info has already been sent and only include the newest information in the payload.

1 Like

How? Can you show an example?