Question 344446 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I have a websocket server. It works connecting with postman, but in my react proyect doesnt

So i have a websocket server built with python, which is deployed in a EC2 container. Connecting through postman works perfectly, but when connecting via Websocket in React, it throws always this error:

WebSocket connection to ‘wss://xxx:3500/’ failed:

with no further description.

    useEffect(() => {
        const socket = new WebSocket(
            process.env.NODE_ENV === 'production' ? "wss://xxxx:3500" : "ws://localhost:3500",
        );
        setSocket(socket);
        socket.addEventListener("message", (event: MessageEvent<string>) => {
            handleWebSocketMessage(event, setFutures, setStocks, setBonds, setDollars)
        });

        socket.addEventListener("error", (event) => {
            console.error("WebSocket error:", event);
        });
    }, []);

The way i fixed this problem temporaly, was disabling the SSL certificates in my python websocket server, and connecting through ws instead of wss. But this is no solution, as i need it to be secure. The thing is that when the server is secure, it only works through postman.

I’ve already tryed debugging by connecting to a mock wss server in my React websocket connection and it worked perfectly, so i made the conclution that the client isn’t the problem. What could be happening?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed the problem by fixing my websocket server certificates. The reason it was failing on my browser and not on postman was because postman doesn't care about the server certificate, while an https client, can only connect to a wss server.


  2. 0

    Are you using nginx? Because if you are, you should add something like this to your .conf file:

    location /socket.io/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://127.0.0.1:3500;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search