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
mindok
February 8, 2020, 1:22am
3
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
Qqwy
February 8, 2020, 2:48pm
5
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