How to disable websockets in browser for testing?

Phoenix Forum Questions / Help
,
1

I want to disable websockets in my browser (e.g Chrome, Firefox, etc) to experience the JS fallback (longPoll) in my LiveView application.

You think it would be simple to turn off websockets somewhere, but it’s not!

Note that I don’t want to “hack” the fallback in app.js by altering longpollFallbackMs or similar approaches. I want to experience the fallback as a user would if their network connection blocks websockets.

Thanks for any suggestions and hopefully I’ve just overlooked something.

2

Would it work for you if you blocked requests to a specific URL or URL pattern?

If that’s the case, then you can simply right click a URL in the “Network” tab of the Chrome dev tools and select “Block request URL”.

You can also add URLs and URL patterns manually on the “Network request blocking” tab.

image
image654×631 55.9 KB

3

I hadn’t tried that… but it doesn’t seem to work.
After blocking the socket URL, it still seems to send messages over it.

Update: I also tried adding wildcards to block the socket URL, to no avail.

4

My bad. A quickly googling suggest that this option only blocks requests like those done with XMLHttpRequest or fetch. :frowning:

Using an extension like https://chromewebstore.google.com/detail/url-blocker/jpakadanffilpnjijlmmkljogkfaognd does seem to work (I just tested it). It’s not nearly as nice to work with, and that particular extension might not be allowed by Chrome for much longer…but it works for now, and maybe there’s a nicer extension out there which you could make use of.

5

Thanks for taking a look!

I can’t get that extension working. I set up a regex to block the websocket, but when I reload the page with the extension enabled, the WS continues to pass messages when I inspect the payloads.

Screenshot 2025-01-09 at 9.22.22 pm
Screenshot 2025-01-09 at 9.22.22 pm1136×1290 52.7 KB

6

Hmm, how weird.

I actually did get it to block the WS connection using that extension (it showed as blocked in the dev tools, and the app reacted to it)…but now that I’m trying again I can’t get it to work either :frowning:

7

Perhaps there’s a way to get Bandit to block websockets? It’s interesting how difficult it is!

8

Like, you could always comment out the socket "/live" from your endpoint.ex, or make a plug that refuses the connection…then you definitely won’t get any ws connections :slight_smile: . I feel I’m treading a bit into “I don’t want to “hack” the fallback” territory here though.