Liveview recharging all the time (external environment)

I have a small problem with my liveview application.

On localhost
Liveview works perfectly …

Already in an external environment, he is reloading the page all the time …
Have you been through this?
How can I solve this?

liveview.leex

    def render(assigns) do
      ~L"""
      <%= MyProjectWeb.PageView.render("index.html", assigns) %>
      """
    end

    def mount(_session, socket) do
      {:ok, assign(socket, _session)}
    end

mix.exs

{:phoenix_live_view, github: "phoenixframework/phoenix_live_view"}

config/dev.exs

config :myproject, MyProjectWeb.Endpoint,
  live_reload: [
    interval: 9000,
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/myproject_web/{live,views}/.*(ex)$",
      ~r"lib/myproject_web/templates/.*(eex)$"
    ]
  ]

Error Console(Google Chrome)

phoenix.js:501 WebSocket connection to ‘ws://mydomain.com.br/live/websocket?_csrf_token=AyIiJSAaFAcnOBJbLxQhNjEncR4UOTRWFgDhJcEUBoGoHnyEXq8glvY5&vsn=2.0.0’ failed: Error during WebSocket handshake: Unexpected response code: 400

frame:3 WebSocket connection to ‘ws://mydomain.com.br/phoenix/live_reload/socket/websocket?vsn=2.0.0’ failed: Error during WebSocket handshake: Unexpected response code: 400
value @ frame:3
(anonymous) @ frame:57

Replace this with just:

def render(assigns) do
  MyProjectWeb.PageView.render("index.html", assigns)
end

You’re wrapping a view in a view basically, which surely can’t help. Start there and see if that improves things.

1 Like

parameters with a leading underscore are ignored, so if you don’t want to add any assigns to the socket when the liveview mounts you can just do this:

def mount(_session, socket) do 
  {:ok, socket} 
end

unfortunately it remains the same. @benwilson512 and @mindok
The scenery still remains the same.

A small observation.

On my machine I access:
http://localhost:4000 e funciona perfeitamente

In an external environment I access:
http://mydomain.com.br

need to make any changes to the configuration files for this external domain?

Another observation I am using nginx as a proxy.

following

I don’t believe that that guide sets up websocket forwarding through Nginx (but only basic HTTP -> HTTPS redirection), which might be while LiveView cannot get a proper connection.

Maybe the information in this topic can help: Phoenix WebSocket behind proxy

1 Like

If you open up the browser do you get any javascript errors on the external domain?

Worse than not,
the only error that returns would be this

phoenix.js: conexão 501 do WebSocket com ‘ws: //mydomain.com.br/live/websocket? _csrf_token = AyIiJSAaFAcnOBJbLxQhNjEncR4UOTRWFgDhJcEUBoGoHnyEXq8glvY5 & vsn = 2.0.0’

frame: 3 Conexão do WebSocket com ‘ws: //mydomain.com.br/phoenix/live_reload/socket/websocket? vsn = 2.0.0’ falhou: Erro durante o handshake do WebSocket: Código de resposta inesperado: 400
value @ frame: 3
(anônimo ) @ frame: 57

I’m starting to think the problem is related to nginx
just like @Qqwy said

I really just solved the problem.

Problem was related to nginx.
If someone goes through this, the settings are shown below.

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
worker_connections 768;
# multi_accept on;
}

http {
upstream phoenix_upstream {
server 127.0.0.1:4000 max_fails=5 fail_timeout=60s;
}
server {
server_name IP;
listen 80;

location /socket {
allow all;

client_max_body_size 50M;

# a hack to enforce capitalized response header
#more_clear_headers 'Connection';
#more_clear_headers 'connection';
#more_set_input_headers 'Connection';
#more_clear_input_headers 'Connection';
#more_set_headers 'Connection: Upgrade';
#add_header Connection "Upgrade" always;

proxy_set_header Proxy "";

proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Cluster-Client-Ip $remote_addr;

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";

# allow remote connections
proxy_set_header Origin '';

proxy_pass http://phoenix_upstream;

}

location / {
allow all;

client_max_body_size 50M;

proxy_set_header Proxy "";

proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Cluster-Client-Ip $remote_addr;

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";

# allow remote connections
proxy_set_header Origin '';
proxy_pass http://phoenix_upstream;
}

}
}

Don’t forget to change nginx’s server_name
Thank you all @benwilson512, @Qqwy, @mindok

6 Likes