RblSb / SyncTube

Synchronized video viewing with chat and other features (one-channel web service)
MIT License
247 stars 52 forks source link

openWebSocket function for reverse proxying on a different url than root url #14

Closed SCP-155 closed 3 years ago

SCP-155 commented 3 years ago

Problem: When using a reverse proxy like nginx, the function WebSockets is trying to open the connection to the root url / host of the server and not the full url location.

Example: My root domain is example.de. Im using nginx to host SyncTube at the location https://example.de/video/. When I open the URL https://example.de/video/ im going to see the "dashboard" of SyncTube. But i cant see any videos or use chat, etc. Chrome & Firefox are producing an WebSocket connection to 'wss://example.de/' failed: Error during WebSocket handshake: Unexpected response code: 200 error. WebSocket passthrough is enabled and working on nginx for the full URL example.de/video/ but not for root URL example.de

I was able to trace back the error (with my non-existent programming skills ;) ) to the line this.ws = new WebSocket("" + protocol + "//" + host + colonPort); from \res\client.js file.

I dont know how the variable "host" is generated, but after creating a new variable var myhostname = new String("example.de/video/"); and changing host variable to myhostname it finally worked. WebSockets on Client side are now forced to connect to the full URL instead of trying to connect to root URL.

Is there a more elegant way of allow the use of reverse proxy? Like automatic detection for full URL?

RblSb commented 3 years ago

Check please if replacing res/client.js to this file works for you: client.js.zip

SCP-155 commented 3 years ago

Looks like the new file is forcing the wss url to be wss://example.de/video. Looks like its almost working.

The problem is, I´m currently not able to host the website at https://example.de/video. Im only able to host it at https://example.de/video/. Which is than going to be still broken, because wss is listing on /video/ and not /video. And the client is trying to connect to /video.

Maybe I´m just to dumb to get a working config file from nginx to host it at /video and not /video/. Tried a lot of different configuration in nginx proxy but nothing worked. But this is my problem now and not a problem anymore from SyncTube.

Anyway, maybe you could spot the error immediately in my nginx config:

#SyncTube
        location /video/ {

        proxy_pass http://127.0.0.1:4200/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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_redirect off;
        proxy_read_timeout 36000s;

        access_log /var/log/nginx/synctube-access.log;
        error_log /var/log/nginx/synctube-error.log;

        #rewrite (.*) /video/$1 redirect;
        #rewrite /video/$1 break;
        proxy_intercept_errors on;
        }

This config block is hosting it at https://example.de/video/ and not https://example.de/video as it maybe should be? All my other tries (to host it on /video) ended up with 404s on /css/... and /js/... files. But index.html worked.

RblSb commented 3 years ago

Don't know much about nginx setups and if /video should be redirected too, but maybe this can be fixed anyway, try this: client.js.zip

SCP-155 commented 3 years ago

Worked flawlessly. Thank you very much!