Fall back to LongPoll when websocket fails?

Hi I had a similar issue, and I found the information from this thread to be useful and the code posted there (I’m not sure about the author’s name) does what you want :

socket.onError(() => {
  if (navigator.onLine) {
    console.error(`Error connecting using ${socket.transport == window.WebSocket ? 'WebSocket' : 'LongPoll'}`)
    if (socket.transport == window.WebSocket) socket.transport = LongPoll;
    else if (window.WebSocket) socket.transport = window.WebSocket;
  }
});

There are other examples (I believe in some github issue) of how to tackle this.

Edit : the linlk to the aforementioned github issue is given by Chris McCord In the same thread

Thanks, this is indeed an elegant solution.

Here is also a link to the suggested implementation by @chrismccord

It seems that doesn’t work fully as expected as discussed at Live view fallback with no websocket? - #12 by chrismccord

For anyone running into these kinds of errors, the best working solution for this currently seems to be this code snippet posted by @josevalim (September 2020) here:

https://github.com/phoenixframework/phoenix/issues/2914#issuecomment-693562742

As said in the issue thread, no guarantees about whether this works, but sharing this link might save some people a few steps in their research

For reference, Longpoll Fallback has been officially implemented in Phoenix, but will only take effect for newly generated apps.

For existing apps, after upgrading to Phoenix 1.7.11 or later, you should be able to do something like this (adjust to your situation):

# in MyAppWeb.Endpoint, adjust the socket/3 call to configure longpoll in addition to web socket
  socket "/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [session: @session_options]],
    longpoll: [connect_info: [session: @session_options]]

// in assets/js/app.js
// adjust LiveSocket configuration to declare`longPollFallbackMs` 
let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
  params: {_csrf_token: csrfToken}
})

Also make sure your Phoenix JS packages are up-to-date as well.