websocket para adelante a websocket

Question

Estoy usando el nginx como proxy inverso para django y React con como config worker_processes 1; events { worker_connections 1024; } http{ server{ include mime.types; default_type application/octet-stream; keepalive_timeout 240; sendfile on; listen 8001; server_name 127.0.0.1; location /{ proxy_pass http://localhost:3000; } location /backend { proxy_pass http://127.0.0.1:8000; } } } su trabajo bien pero quiero reenviar websocket para reactr carga caliente. Todavía no tengo solución después de mucho googling. actualmente tiene error de conexión como de la consola cromo WebSocket connection to 'ws://127.0.0.1:8001/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 404

bytebuster · Accepted Answer

debido a la directiva http, que pensó que no apoyará el proxy de WebSocket hacia adelante pero después de más pasar tiempo en google. Sé que http se actualiza a Websocket después del apretón de manos inicial Así que finalmente la solución está aquí

su trabajo para mí como proxy hacia adelante para Django como backend y reactr como frontend. así que puedo pasar el problema de CORS debido al servidor están en diferentes IP y su insegura por lo que el encabezado de configuración no admite mucha relación compartir cookies

worker_processes  1;
events {
    worker_connections  1024;
}
http{
    client_max_body_size 100M;
    server{
        include mime.types;
        default_type application/octet-stream;
        keepalive_timeout  240;
        sendfile on;
        listen 8001;
        server_name 127.0.0.1;

        location /{
            proxy_pass http://localhost:3000;
        }

        location /backend {
                proxy_pass http://127.0.0.1:8000;
        }   
        location /sockjs-node {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
 }
}

Respondida el Dec 16, 2020 a las 13:32 - por bytebuster

Gpt · Answer

El problema que estás experimentando se debe a que las conexiones websocket no están siendo manejadas correctamente por tu configuración de Nginx. Para poder reenviar las conexiones websocket a tu aplicación de React con hot reloading, necesitas realizar algunas modificaciones en la configuración de Nginx.

Aquí te dejo un ejemplo de cómo podrías modificar tu configuración para que funcione correctamente:

nginx
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    server {
        include mime.types;
        default_type application/octet-stream;
        keepalive_timeout  240;
        sendfile on;
        listen 8001;
        server_name 127.0.0.1;

        location / {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        location /backend {
            proxy_pass http://127.0.0.1:8000;
        }

        location /sockjs-node {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

En este ejemplo, se ha agregado una nueva ubicación /sockjs-node que reenviará las conexiones websocket a tu aplicación de React. También se han configurado las cabeceras necesarias para manejar las conexiones websocket correctamente.

Una vez que realices estos cambios en tu configuración de Nginx, reinicia Nginx para que los cambios surtan efecto. Después de eso, deberías poder conectar correctamente a las conexiones websocket sin errores.

Espero que esta solución te sea de ayuda. Si tienes más preguntas, ¡no dudes en hacerlas!

Respondida el Dec 17, 2020 a las 13:32 - por Gpt

Gemini · Answer

Para reenviar correctamente las conexiones WebSocket desde Nginx a React, debes realizar los siguientes pasos:

Habilitar WebSockets en Nginx. Agrega la siguiente línea a tu bloque `http` en el archivo de configuración de Nginx:


   proxyhttpversion 1.1;

Habilitar WebSockets en la aplicación React. Asegúrate de que tu aplicación React esté configurada para utilizar WebSockets. Puedes hacer esto importando el módulo `sockjs-client` y creando una nueva instancia de `SockJS` con la URL correcta del WebSocket:

javascript
   import SockJS from 'sockjs-client';

const sock = new SockJS('ws://localhost:8001/sockjs-node');

Configurar la ubicación de WebSocket en Nginx. Agrega una nueva ubicación al bloque `http` de Nginx para manejar las conexiones WebSocket:


   location /sockjs-node {
       proxypass http://localhost:3000;
       proxyhttpversion 1.1;
       proxysetheader Upgrade $httpupgrade;
       proxysetheader Connection "Upgrade";
   }

Reiniciar Nginx. Una vez que hayas realizado los cambios en el archivo de configuración de Nginx, reinicia Nginx para que los cambios surtan efecto.

Después de realizar estos cambios, deberías poder establecer conexiones WebSocket entre tu aplicación React y el servidor a través del proxy inverso de Nginx.

Respondida el Dec 17, 2020 a las 13:36 - por Gemini

websocket para adelante a websocket

3 Respuestas: