Add new websockets doc page

[stefanitsky]

Description

Added small docs for websocket that was added in #2506

[Andrew-Chen-Wang]

Edit: I misinterpreted this entirely... I'm stuck in thinking about AWS ELB. LGTM.

Thanks for the comment @stefanitsky! Regarding this PR, is it really necessary to set whatever you had in the nginx configuration? (Never tried, but I'm pushing to AWS ALB soon, so this perked my interest since I have to use nginx as a reverse proxy). The headers should just transfer over though, without explicitly specifying, right, for a reverse proxy?

Because what I'm sensing in this doc is that the dev set the use_docker config to "yes" which allows for Traefik. In that case, a simple nginx configuration as a reverse proxy shouldn't need this. Maybe you could add in that this is for "non-docker" developers?

Unless I'm totally getting this wrong.

[stefanitsky]

@Andrew-Chen-Wang yes, it is necessary, personally verified on a real project. I removed the traefik image, because im using backend and frontend separately. Config example:

upstream backend {
    server 0.0.0.0:5000 fail_timeout=0;
}

upstream frontend {
    server 0.0.0.0:3000;
}

server {
    server_name openwiden.com www.openwiden.com;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
	proxy_pass http://frontend;
    }

    location /static/ {
        alias /home/openwiden/backend/staticfiles/;
    }

    location /media/ {
        alias /home/openwiden/backend/media/;
    }

    location /api/ {
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto https;
	proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://backend/api/;
    }

    location /websocket/ {
	proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/openwiden.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/openwiden.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.openwiden.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = openwiden.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name openwiden.com www.openwiden.com;
    listen 80;
    return 404; # managed by Certbot
}

You can verify that by using JS example:

ws = new WebSocket("wss://openwiden.com/websocket/");
ws.onmessage = event => console.log(event.data);
ws.send("ping");

[Andrew-Chen-Wang]

Ah I see, I'm misinterpreting this use-case. I'm stuck in a different mindset than before... My mind was in AWS mode for way too long. Just to clarify, this is for self-hosting, right? If so, then thanks for the addition!

[stefanitsky]

@Andrew-Chen-Wang hehe, and i'm not familiar with AWS, so i don’t know how everything is there. Yes, it's for self-hosting like VDS or something else.

[browniebroke]

Thanks for the addition, left a couple of small suggestions.

[browniebroke]

Why are our writing it nGinx? Doesn't look like a thing according to Wikipedia. I would stick to Nginx, unless you can quote a source supporting your spelling.

[browniebroke]

I'm not sure about adding this to our docs... I appreciate that Nginx is more widely used, but this is a piece of code that I'd rather NOT maintain and instead link to Nginx, which is more likely to remain updated.

Can we rephrase this to something more generic? Something along the lines of

"if you don't use Traefik, you might have to configure your reverse proxy accordingly (example with Nginx)"

[browniebroke]

Suggested change

	You can enable web sockets if you select ``use_async`` option when creating a project. That indicates whether the project should use web sockets with Uvicorn + Gunicorn.
	You can enable web sockets if you select ``use_async`` option when creating a project. That indicates whether the project can use web sockets with Uvicorn + Gunicorn.

[stefanitsky]

@browniebroke i completely agree, updated