Log out causes "attempting to reconnect" messages on additional browser tabs

The section Disconnecting all instances of a live user is going to be helpful.

Phoenix LiveView uses a heartbeat to monitor the websocket connection so when the websocket disconnects, it gives you an error.

So what you do is broadcast to all subscribed live users that they are disconnected.

MyAppWeb.Endpoint.broadcast("users_socket:#{user.id}", "disconnect", %{})

But that is what he is doing because he used phx.gen.auth:

Note: If you use mix phx.gen.auth to generate your authentication system, lines to that effect are already present in the generated code. The generated code uses a user_token instead of referring to the user_id.

It seems the websocket connection handling in liveview javascript is a bit flakey, even on mobile browsers almost always show that annoying “can’t find the internet”, especially when you switch tabs and come back or open and close the device.

Why the need to display this jarring housekeeping message is beyond me, it tarnishes all liveview sites IMO.

I found a better solution.

Instead of broadcasting the “Disconnect” event I’m subscribing and broadcasting to a reload event that forces a full page reload instead of disconnecting the socket. I left more details in this post