Fall back to LongPoll when websocket fails?

Phoenix Forum Questions / Help
,
1

In some corporate environments we’re experiencing that WebSocket transport is not working, because it is blocked by a proxy. The longpolling fallback of Phoenix JS seems only to check whether global.WebSocket is set or not, but does not do any smartness in the case that the browser supports WebSockets but the connection somehow is blocked.

Is there a way to automatically detect whether websockets are working and if not, switching to long polling? Before I start hacking JS, has anybody been doing something in this direction?

2

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

2 Likes
3

Thanks, this is indeed an elegant solution.

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

1 Like
4

It seems that doesn’t work fully as expected as discussed at Live view fallback with no websocket?

5

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:

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 :smile:

6

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.

4 Likes