Aws ec2 with lb does not return 101 on websocket

i have a problem with my app.
Basically while everything runs smooth on localhost, when i deploy to aws websocket connections does not work.
The problem is that when I make an wss request on ec2 it seems it does let the response to get out of the machine ,so instead of becoming 101 and stable a connection my app hangs on pending until 1 min pass and get a timeout, then it returns 200 but no connection establish.
Api is written in go lang with gin framework and app is written in js with React framework.
While asking some people for their advise they told me that I can "wrap" an wss request with https and pass it through lb and upgrade it with nginx, but I really cannot find anything similar.
Here is my backend code

main.go

	{

		ws.GET("/:id", func(c *gin.Context) {
			websocket.ServeWs(c, pool)
		})
	}

websocket.go

ar upgrader = websocket.Upgrader{
    ReadBufferSize:  1024,
    WriteBufferSize: 1024,
    CheckOrigin: func(r *http.Request) bool { return true },
}

func Upgrade(w http.ResponseWriter, r *http.Request) (*websocket.Conn, error) {
    ws, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return ws, err
    }
    return ws, nil
}

func ServeWs(c *gin.Context, pool *Pool) {

	w := c.Writer
	r := c.Request
    conn, err := Upgrade(w, r)
    if err != nil {
        fmt.Fprintf(w, "%+V\n", err)
    }
    client := &Client{
        Conn: conn,
        Pool: pool,
		ID: c.Param("id"),
    }

    pool.Register <- client
    client.Read()
}

Here is react code

const socket = new WebSocket(
  `${
    process.env.REACT_APP_ENV === "dev"
      ? "ws://localhost:8080"
      : "wss://api.blabla.prod"
  }/ws/${sessionStorage.getItem("userID")}`
);


let WebSocketConnect = () => {
  console.log("Attempting Connection...");

  socket.onopen = () => {
    console.log("Successfully Connected");
  };

  socket.onclose = (event) => {
    console.log("Socket Closed Connection: ", event);
    // WebSocketConnect();
  };

  socket.onerror = (error) => {
    console.log("Socket Error: ", error);
  };
};

let sendMsg = (msg) => {
  //   console.log("sending msg: ", msg);
  socket.send(msg);
};

export { WebSocketConnect, sendMsg, socket };

Here is nginx config

server {

    listen 80;
    server_name api.blabla.prod;

    if ($http_x_forwarded_proto = 'http') {
        return 301 https://$server_name$request_uri;
    }
    location /ws {
        proxy_pass "http://127.0.0.1:8080";
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location / {
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass       "http://127.0.0.1:8080";
    }
}

Thanks in advance!

The issue seems to be in your nginx configuration, I would replicate this for your /ws endpoint. Seems to be missing the $proxy_add_x_forwarded_for

server {
        listen 80;
        server_name goddit.pro; // change this
        location / { // You can leave it at / or set it for another location, i.e. /ws
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;

                proxy_pass http://localhost:8080/;
                proxy_redirect off;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
}

The issue could also be in your javaScript, here's how you connect and upgrade.

window.onload = function () {
  // Somewhere in your HTML document
  var conn;
  // Then you need to connect
  function connectWs(id) {
    if (window["WebSocket"]) {
      conn = new WebSocket("wss://" + document.location.host + "/id/" + id);
      conn.onopen = function (evt) {
        var item = document.createElement("li");
        item.innerHTML = "<em>Connected to " + id + "</em>";
        log.appendChild(item);
      };
      conn.onclose = function (evt) {
        var item = document.createElement("li");
        item.innerHTML = "<em>Connection to " + id + " closed</em>";
        log.appendChild(item);
      };
      conn.onmessage = function (evt) {
        var message = JSON.parse(evt.data);
        // console.log(message);
        printMessage(message);
      };
    } else {
      var item = document.createElement("li");
      item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
      log.appendChild(item);
    }
  }
  connectWs(id);
}

After you shared the error logs from the React console:

Close Code 1006 is a special code that means the connection was closed abnormally (locally) by the browser implementation.

If your browser client reports close code 1006, then you should be looking at the websocket.onerror(evt) event for details.