js-libp2p
js-libp2p copied to clipboard
libp2p
The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws:<URL>/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS
In Ubuntu 18.04.4 Desktop I tried to use this example: https://github.com/libp2p/js-libp2p/tree/master/examples/libp2p-in-the-browser in order to understand how to deploy js-libp2p in my webapp.
This is the vue file:
<template>
<div>
</div>
</template>
<script>
// https://github.com/libp2p/js-libp2p/tree/master/examples/libp2p-in-the-browser
import Libp2p from 'libp2p'
import Websockets from 'libp2p-websockets'
import WebRTCStar from 'libp2p-webrtc-star'
import { NOISE } from 'libp2p-noise'
import Secio from 'libp2p-secio'
import Mplex from 'libp2p-mplex'
import Boostrap from 'libp2p-bootstrap'
export default {
name: 'Libp2p',
computed: {
},
data () {
return {
// our libp2p node
libp2p: null,
status: "",
output: ""
}
},
created() {
// https://github.com/libp2p/js-libp2p/tree/master/examples/libp2p-in-the-browser
(async () =>{
// Create our libp2p node
this.libp2p = await Libp2p.create({
addresses: {
// Add the signaling server address,
// along with our PeerId to our multiaddrs list
// libp2p will automatically attempt to dial to the signaling server so that it can
// receive inbound connections from other peers
listen: ['/ip4/0.0.0.0/tcp/9090/wss/p2p-webrtc-star']
},
modules: {
transport: [Websockets, WebRTCStar],
connEncryption: [NOISE, Secio],
streamMuxer: [Mplex],
peerDiscovery: [Boostrap]
},
config: {
peerDiscovery: {
bootstrap: {
enabled: true,
list: [
'/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
'/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
'/dns4/sfo-3.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM',
'/dns4/sgp-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu',
'/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
'/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64'
]
}
}
}
})
// Listen for new peers
this.libp2p.on('peer:discovery', (peerId) => {
console.log(`Found peer ${peerId.toB58String()}`)
})
// Listen for new connections to peers
this.libp2p.connectionManager.on('peer:connect', (connection) => {
console.log(`Connected to ${connection.remotePeer.toB58String()}`)
})
// Listen for peers disconnecting
this.libp2p.connectionManager.on('peer:disconnect', (connection) => {
console.log(`Disconnected from ${connection.remotePeer.toB58String()}`)
})
await this.libp2p.start();
})()
},
mounted() {
} // end of mounted()
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
But I'm getting this error: "Mixed Content: The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws:<URL>/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS."
I get the same error if I try to use the example in https://github.com/libp2p/js-libp2p-webrtc-star :
star-signal --port=13579 --host=127.0.0.1
Listening on: http://127.0.0.1:13579
With the vue file:
<template>
<div class="hello">
</div>
</template>
<script>
// https://github.com/libp2p/js-libp2p-webrtc-star
import WStar from 'libp2p-webrtc-star';
import multiaddr from 'multiaddr';
import pipe from 'it-pipe';
import { collect } from 'streaming-iterables';
const addr = multiaddr('/ip4/188.166.203.82/tcp/20000/wss/p2p-webrtc-star/p2p
/QmcgpsyWgH8Y8ajJz1Cu72KnS5uo2Aa2LpzU7kinSooo2a')
const ws = new WStar({ upgrader })
const listener = ws.createListener((socket) => {
console.log('new connection opened')
pipe(
['hello'],
socket
)
})
export default {
name: 'Libp2pWebrtcStar',
computed: {
},
data () {
return {
info: ""
}
},
created() {
this.listenerSetting();
}, // end of created()
mounted() {
},
methods: {
async listenerSetting() {
await listener.listen(addr);
console.log('listening');
const socket = await ws.dial(addr);
const values = await pipe(
socket,
collect
)
console.log(`Value: ${values.toString()}`);
// Close connection after reading
await listener.close();
} // end of async listenerSetting()
} // end of methods:
} // end of export default
</script>
Ubuntu 18.04..4 Desktop
Google Chrome: Version 83.0.4103.97 (Official Build) (64-bit)
node v14.3.0
"libp2p": "^0.28.0",
"libp2p-bootstrap": "^0.11.0",
"libp2p-noise": "^1.1.1",
"libp2p-webrtc-star": "^0.18.4",
"libp2p-websockets": "^0.13.6"
How to solve the problem? Looking forward to your kind help. Marco
It looks like you are using ip4/188.166.203.82/tcp/20000/wss/p2p-webrtc-star as your signaling server. This won't work, as the browser requires SSL encryption for websocket connections. You can see more details in the thread at https://discuss.libp2p.io/t/cant-connect-to-webrtc-star-with-ssl/522. You'll need to setup an SSL certificate for the server.
Hi @jacobheun ! Thank you for helping.
Following https://discuss.libp2p.io/t/cant-connect-to-webrtc-star-with-ssl/522
I added to the nginx configuration the following part:
upstream websocket {
ip_hash;
server localhost:13579;
}
server {
listen 81;
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/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 X-Forwared-For $remote_addr;
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
}
}
I spawned a signaling server at localhost:13579 :
(base) marco@pc01:~$ star-signal --port=13579 --host=127.0.0.1
Listening on: http://127.0.0.1:13579
But I get the same error message:
"Mixed Content: The page at 'https://ggc.world/signup' was loaded over HTTPS, but attempted to
connect to the insecure WebSocket endpoint 'ws://0.0.0.0:9090/socket.io/?EIO=3&
transport=websocket'. This request has been blocked; this endpoint must be available over WSS.
"
So... or what I added in nginx configuration is not correct, or I'm missing something else. Here https://discuss.libp2p.io/t/cant-connect-to-webrtc-star-with-ssl/522/3 I read that I have to replace ws:// with wss:// . But where exactly should I do that? And what am I doing wrong?
ws://0.0.0.0:9090/socket.io/?EIO=3&transport=websocket
You need to change the listen address of your libp2p node to match your webrtc server address, or get rid of it and connect manually.
this.libp2p = await Libp2p.create({
addresses: {
listen: ['/ip4/0.0.0.0/tcp/9090/wss/p2p-webrtc-star']. // Change this address, it's trying to connect to a local node
},
...
@jacobheun Where do I get the precise webrtc server address?
With this nginx configuration, which strictly follows these indications: https://discuss.libp2p.io/t/cant-connect-to-webrtc-star-with-ssl/522/4?u=marcoi
upstream websocket {
server ggc.world:13579;
}
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/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;
}
}
And with this vue file:
<template>
<div class="hello">
</div>
</template>
<script>
import Libp2p from 'libp2p'
import Websockets from 'libp2p-websockets'
import WebRTCStar from 'libp2p-webrtc-star'
import { NOISE } from 'libp2p-noise'
import Secio from 'libp2p-secio'
import Mplex from 'libp2p-mplex'
import Boostrap from 'libp2p-bootstrap'
export default {
name: 'Libp2p',
data () {
return {
// our libp2p node
libp2p: null,
status: "",
output: ""
}
},
created() {
(async () =>{
// Create our libp2p node
this.libp2p = await Libp2p.create({
addresses: {
// Add the signaling server address,
// along with our PeerId to our multiaddrs list
// libp2p will automatically attempt to dial to the signaling server so that it can
// receive inbound connections from other peers
listen: ['/127.0.0.1:13579/wss/p2p-webrtc-star']
},
modules: {
transport: [Websockets, WebRTCStar],
connEncryption: [NOISE, Secio],
streamMuxer: [Mplex],
peerDiscovery: [Boostrap]
},
config: {
peerDiscovery: {
bootstrap: {
enabled: true,
list: [
'/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
'/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
'/dns4/sfo-3.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM',
'/dns4/sgp-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu',
'/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
'/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/p2p
/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64'
]
}
}
}
})
// Listen for new peers
this.libp2p.on('peer:discovery', (peerId) => {
console.log(`Found peer ${peerId.toB58String()}`)
})
// Listen for new connections to peers
this.libp2p.connectionManager.on('peer:connect', (connection) => {
console.log(`Connected to ${connection.remotePeer.toB58String()}`)
})
// Listen for peers disconnecting
this.libp2p.connectionManager.on('peer:disconnect', (connection) => {
console.log(`Disconnected from ${connection.remotePeer.toB58String()}`)
})
await this.libp2p.start();
})()
},
} // end of export default
</script>
(base) marco@pc01:~$ star-signal --port=13579 --host=127.0.0.1
Listening on: http://127.0.0.1:13579
npm run serve
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
I get this error: "Error: no protocol with name: 127.0.0.1:13579"
So.. I guess this is wrong: listen: ['/127.0.0.1:13579/wss/p2p-webrtc-star']
'/127.0.0.1:13579/wss/p2p-webrtc-star'
This is not a valid multiaddr. If you go to the address the signaling server is running on it should load a webpage with the address you need to connect to, something like this:
Which for you should look like /ip4/127.0.0.1/tcp/13579/wss/p2p-webrtc-star. Assuming you have the signaling server deployed at https://gcc.world, the address should be /dns4/gcc.world/tcp/443/wss/p2p-webrtc-star/.
@jacobheun Now, with this address:
this.libp2p = await Libp2p.create({
addresses: {
// Add the signaling server address,
// along with our PeerId to our multiaddrs list
// libp2p will automatically attempt to dial to the signaling server so that it can
// receive inbound connections from other peers
listen: ['/dns4/gcc.world/tcp/8443/wss/p2p-webrtc-star/'] // in nginx configuration:
// server {
// listen 8443 ssl;
// }
I get this new error:
"If you go to the address the signaling server is running on it should load a webpage with the address you need to connect to" : I do not know where to look at, in order to get the address the signaling server is running on. To run the signaling server I just do this:
(base) marco@pc01:~$ star-signal --port=13579 --host=127.0.0.1
Listening on: http://127.0.0.1:13579
Are you running the server locally or on a server?
gcc.world doesn't resolve to anything so you aren't going to be able to connect to that address.
$ nslookup gcc.world
Server: 192.168.178.1
Address: 192.168.178.1#53
** server can't find gcc.world: NXDOMAIN
@jacobheun I'm developing locally using a local PC as server ( https://www.ssllabs.com/ssltest/analyze.html?d=ggc.world ). In future I will deploy everything in the cloud. But now I'm running the server locally. Developing locally, as I'm doing now, ggc.world in the signaling-server's address doesn't work as we see.
(base) marco@pc01:~$ nslookup ggc.world
Server: 127.0.0.53
Address: 127.0.0.53#53
Non-authoritative answer:
Name: ggc.world
Address: 37.116.208.13
I read here: https://github.com/libp2p/js-libp2p-webrtc-star#hosted-rendezvous-server
"A libp2p-webrtc-star address, using the signalling server we provide, looks like:
/dns4/star-signal.cloud.ipfs.team/wss/p2p-webrtc-star/p2p/
So I tried with
listen: ['/dns4/192.168.178.1/wss/p2p-webrtc-star/p2p/']
"Error: Error parsing address: invalid address: /dns4/192.168.178.1/wss/p2p-webrtc-star/p2p"
with
listen: ['/dns4/127.0.0.53/wss/p2p-webrtc-star/p2p/']
"Error: Error parsing address: invalid address: /dns4/127.0.0.53/wss/p2p-webrtc-star/p2p"
with
listen: ['/dns4/192.168.178.1/tcp/8443/wss/p2p-webrtc-star/']
"WebSocket connection to 'wss://192.168.178.1:8443/socket.io/?EIO=3&transport=websocket'
failed: WebSocket is closed before the connection is established.
Uncaught (in promise) Error: Transport (WebRTCStar) could not listen on any available address"
