websocket failed with 'Invalid frame header'

Question

I created a simple chat app and deployed it to AWS EC2.

I built the frontend with Vue.js and use javascript's WebSocket.

In the backend, I used Django, channels, and Postgres.

It works fine on local but WebSocket is disconnected after some time on the server.

I used Nginx for deployment.

I also set proxy_read_timeout to 600s for the Nginx WebSocket configuration.

        this.chatSocket = new WebSocket(GlobalConstants.WEBSOCKET_URL + '/ws/chat/' + id + '/')
        this.chatSocket.onmessage = (m) => {
            let data = JSON.parse(m.data)
            let messageData = {}
            messageData[data.type] = data.message
            let message = {
                author: data.sender == this.currentUser ? 'me' : data.sender,
                type: data.type,
                data: messageData
            }
            this.receiveMessage(message)
            if (data.sender != this.currentUser) {
                this.addParticipant(data.sender)
            }
        }

This is nginx configuration.

server {
    listen 80;
    server_name x.x.x.x;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         "http://127.0.0.1:8000";
    }

    location /ws/ {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 600s;
    }
}

After the connection is established, it works for 10 or 20 seconds.

And then this error occurs.

Please help me.

Answer 1

It was a nginx configuration problem. I used nginx 1.18.0 and proxy_read_timeout didn't work.