在AWS Application Load Balancer上使用Go时，WebSocket连接失败并显示301

Question

I'm trying to run a Go Server with WebSockets on an AWS Application Load Balancer but I am getting an 'Error during WebSocket handshake: Unexpected response code: 301'.

AWS says that The Application Load Balancers supports WebSockets via ws:// protocols but I can not find any further documentation other than the following:

Here's aws load-balancer link

The Application Load Balancer supports two additional protocols: WebSocket and HTTP/2.

WebSocket allows you to set up long-standing TCP connections between your client and your server. This is a more efficient alternative to the old-school method which involved HTTP connections that were held open with a “heartbeat” for very long periods of time. WebSocket is great for mobile devices and can be used to deliver stock quotes, sports scores, and other dynamic data while minimizing power consumption. ALB provides native support for WebSocket via the ws:// and wss:// protocols.

I can get JavaScript to connect to my Go server via WebSockets locally but when I deploy AWS it does not work. This is when the JavaScript displays a 301 error.

The Application Load Balancer is listening on HTTP: 80 and that traffic is being directed to HTTPS: 443. All of the Security Groups are pretty much similarly set up to allow traffic through. If I do a normal GET call to retrieve data from my server while deployed on AWS it works perfectly fine.

Local call that works to connect to localhost

<script>
    let socket = new WebSocket("ws://localhost:8080/websocket")

    console.log("Attempting Websocket Connection")

    socket.onopen = () => {
        console.log("Successfully Connected");
        socket.send("Hi From the Client!")
    }

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

    socket.onmessage = (msg) => {
        console.log(msg);
    }

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

Connect to remote server that does not work.

<script>
    let socket = new WebSocket("ws://myexamplesite.com/websocket")

    console.log("Attempting Websocket Connection")

    socket.onopen = () => {
        console.log("Successfully Connected");
        socket.send("Hi From the Client!")
    }

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

    socket.onmessage = (msg) => {
        console.log(msg);
    }

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

nginx.conf

events {
    worker_connections 1024;
}

http {
  server_tokens off;
  server {
    listen 80;

    location / {
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host            $http_host;
      proxy_pass http://web:8080/;
    }
  }
}

I expect to be able to establish a WebSocket connection but the following error is returning from the JavaScript file:

WebSocket connection to 'ws://myexamplesite.com/websocket' failed: Error during WebSocket handshake: Unexpected response code: 301

Answer 1

I was able to get it to work by combining both answers.

nginx.conf now looks like

http {
  server_tokens off;
  server {
    listen 80;

    location / {
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host            $http_host;
      proxy_pass http://web:8080/;
    }

    location /websocket {
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_pass http://web:8080/websocket;
    }
  }
}

Then change the JavaScript file ws:// to wss://

<script>
    let socket = new WebSocket("wss://myexamplesite.com/websocket")

    console.log("Attempting Websocket Connection")

    socket.onopen = () => {
        console.log("Successfully Connected");
        socket.send("Hi From the Client!")
    }

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

    socket.onmessage = (msg) => {
        console.log(msg);
    }

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