feifan
[LiveView] LiveReload socket failing to connect on `live` routes
I’ve installed LiveView into an existing Phoenix project (originally created on Phoenix 1.4.16) following this guide. I’m currently working on a LiveView that’s rendered directly in my router: i.e. live "/url", LiveViewModule. I’ve added a regex for this source file to my live_reload config in dev.exs, and I see the [debug] Live reload logline when I make changes to this file.
However, the LiveReload socket for this page gets disconnected immediately after the page loads. In Chrome, the socket to ws://localhost:4000/phoenix/live_reload/socket/websocket?vsn=2.0.0 errors with “WebSocket is closed before the connection is established.”
This only happens on this live route; other views (rendered through get routes and normal controllers and views) live-reload fine.
How might I go about debugging the LiveReload socket and why it’s getting disconnected on live routes?
Marked As Solved
bob
Update: Correct markup also results from specifying a layout on the live route itself, without using plug :put_root_layout. Bad markup seems to only occur when there is no root or route-specific layout specified in the router, and the layout is specified on the LiveView module itself.
Also Liked
shamanime
Were you able to sort this out?
If not you can try to generate a new Phoenix application with --live (the guide you linked has the command) and compare the generated files with the ones in your project. That’d be app/js, Endpoint, dev config, Plug.Session config and a few main others.
bob
Oh, man. Nice catch @feifan. I had noticed that <div>, but I didn’t pay attention to its placement.
I’m also getting some weird markup. My <head> tag is now empty, and that inserted <div data-phx-main ...> is the first tag inside the <body>, with the rest of the <head> elements moved inside the <body> tag.
I notice that is not occurring in a freshly generated liveview app, so now I need to hunt down what is screwing up the HTML source.
EDIT: Okay, looks like I got it working. I had to add plug :put_root_layout into the pipeline, and it stopped screwing up the markup and connected both my LiveView and the live_reload socket.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"