How to make Websocket connection working with HTTPS / TLS? - https

Question

In Ubuntu 18.04.4 Desktop I'm trying to make websocket connection working.
I started the discovery-swarm-webrtc :
(base) marco#pc01:~/webMatters/vueMatters/GGC/node_modules/hyperswarm-web/node_modules/.bin$ ./discovery-signal-
webrtc
discovery-signal-webrtc running on 4000
I modified in the Hyperswarmweb.vue file the wsProxy as :
this.swarm = hyperswarm({
// If you omit this, it'll try to connect to 'wss://hyperswarm.mauve.moe'
// It will also attempt to connect to a local proxy on `ws://localhost:4977`
//wsProxy: 'ws://yourproxy.com',
wsProxy: 'ws://ggc.world:4000',
simplePeer:{
config:{
}
}
})
// look for peers listed under this topic
const topic = crypto.createHash('sha256')
.update('my-hyperswarm-topic')
.digest()
this.swarm.join(topic)
I get this error :
"
Websocket connection to 'ws://localhost:4977/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Mixed Content: The page at 'https://ggc.world/signup' was loaded over HTTPS, but attempted to connect to the insecure
WebSocket endpoint 'ws://ggc.world:4000'. This request has been blocked; this endpoint will be available over WSS.
Uncaught DOMException: Failed to construct 'WebSocket': an insecure WebSocket connection may not be initiated from a page
loaded
"
This is the part of the nginx webserver configuration related to websocket:
upstream websocket {
#server ggc.world:4977;
#server ggc.world:1234;
server ggc.world:4000;
}
server {
listen 8443 ssl;
server_name ggc.world;
ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location /p2p {
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade "Websocket";
proxy_set_header Connection "Upgrade";
proxy_set_header Host ggc.world;
}
}
As far as I understand reading here: WebSocket with SSL , we cannot use websockets with HTTPS but we can se websockets over TLS.
And in order to use websockets over TLS, we have to use wss:// : Mixed Content error when accessing WebSocket server hosted in a different port
I modified in the Hyperswarmweb.vue file the wsProxy:
//wsProxy: 'ws://yourproxy.com',
wsProxy: 'wss://ggc.world:4000',
and now get this error:
"
WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
"
If I modify the Proxy in Hyperswarmweb.vue :
//wsProxy: 'ws://yourproxy.com',
//wsProxy: 'wss://ggc.world:4000'
wssProxy: 'wss://ggc.world:4000',
I get this error:
"
WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
"
I tried also to follow these indications: https://www.nginx.com/blog/websocket-nginx/
and modified the nginx configuration's part related to websocket as follows:
upstream websocket {
server ggc.world:4000;
}
server {
listen 8443 ssl;
server_name ggc.world;
ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location / {
proxy_pass http://websocket;
proxy_http_version 1.1;
#proxy_set_header Upgrade "Websocket";
proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "Upgrade";
proxy_set_header Connection $connection_upgrade;
#proxy_set_header Host ggc.world;
proxy_set_header Host $host;
}
}
But I get the same error :
"
WebSocket connection to 'wss://ggc.world:4000/' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR
"
I read here: Using ws:// while on https:// (mixed content)
"If you can serve the page via https somewhere on your server there are certificate and chain files, use these to serve a wss"
I already put them in the NGINX configuration, in the part related to the websocket.
Where else should I put certificate and chain files paths? in wsProxy in Hyperswarmweb.vue?
Environment Info:
System:
OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU # 4.00GHz
Binaries:
Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
Browsers:
Chrome: 83.0.4103.116
Firefox: 77.0.1
npmGlobalPackages:
#vue/cli: 4.4.4
How to make the Websocket connection working?
Looking forward to your kind help.
Marco

Answer 1

WebSocket connection to 'ws://localhost:4977' failed:
Is simply because you are not running a local hyperswarm proxy server on your machine. Start one up and your app will connect to it locally.