Phoenix Livewview - websocket connection fails

I have a small app deployed at temporaryhack.com for playing around with Elixir/Phoenix/LiveView etc.

The main page I converted to a LiveView - though it doesn’t do anything “LiveView-specific” just yet.

When deployed on fly.io, websockets are broken:

WebSocket connection to 'wss://temporaryhack.com/live/websocket?_csrf_token=Jms9AAQSPR4YbUsAOSN5JzUsYlUSRAwOn-N8BJpL_5sKtp-sPXW2KsvQ&_track_static%5B0%5D=https%3A%2F%2Ftemporaryhack.com%2Fassets%2Fapp-f1ac6921074f4d4f0db4ec733775c544.css%3Fvsn%3Dd&_track_static%5B1%5D=https%3A%2F%2Ftemporaryhack.com%2Fassets%2Fapp-4fe838d26a3620637ab66dd64d0c15a2.js%3Fvsn%3Dd&_mounts=0&vsn=2.0.0' failed: 

This only happens when deployed to fly.io, I am unable to reproduce this issue locally.

I’m new to LiveView, and surely just missing something straightforward.

Thanks for the help!

What is the value if your check_origin config in config/runtime.exs. By default, we ensure the websocket connections match the URL host of the endpoint. For recent phoenix projects this is usually set to the PHX_HOST environment variable which is configured in your fly.toml. My guess is this value is the original fly.dev domain, but needs to be changed to your temporaryhack.com domain.

Sure enough, that did it.

Thanks!

Errr actually you were proposing something slightly different, let me do that.

Perfect. Thanks again.

Great! For posterity for you and others, you can also do check_origin: :conn, which will allow any x-forwarded-for host. This is convenient if you have multiple domains that you don’t want to list explicitly, but can only be used if you are behind a proxy such that you can trust x-forwarded wasn’t set by the client. Fly sets this header so check_origin: :conn is a good option, but you’ll still want to configure your endpoint’t :url (which is based on PHX_HOST by default) for link/url generation.

1 Like