WebRTC support in js-Ipfs browser node and how to use it?

Hello there
I’m a beginner to IPFS and I’m now trying to run the exchange-file example under js-ipfs.
As it gives a diagram like this:

┌──────────────┐                ┌──────────────┐
│   Browser    │ libp2p(WebRTC) │   Browser    │
│              │◀──────────────▶│              │
└──────────────┘                └──────────────┘
       ▲                                  ▲
       │WebSockets              WebSockets│
       │        ┌──────────────┐          │
       │        │   Desktop    │          │
       └───────▶│   Terminal   │◀─────────┘
                └──────────────┘

It says "The goal of this tutorial is to create a simple application with an IPFS node that dials to other instances using WebRTC, and …"
However I didn’t find the WebRTC code in this example and when I connect two tab on the app it seems to be connecting the nodes running on the server while there seems to be no nodes running in browser.
I did some digging but because I’m really a rookie with the js codes I’m now deeply troubled.

The current goal is to know how two browser nodes connect to each other(webrtc)

Then I found there are some description on js-ipfs saying if I run IPFS node on browser I simply need to add a:

/dns4/wrtc-star.discovery.libp2p.io/tcp/443/wss/p2p-webrtc-star

addr to config.Address.swarm so that the node will have a WebRTC multiaddr.
First the server seems not functioning(I’m not sure) cause it gives

WebSocket connection to 'wss://wrtc-star.discovery.libp2p.io/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 502

while initing the node
Then I turned to js-libp2p-webrtc-star and start a signal server of my own:

steve@steve:~$ webrtc-star --host=10.108.165.159 Listening on: http://10.108.165.159:9090

and change the configed swarm to :
/ip4/10.108.165.160/tcp/9090/http/p2p-webrtc-direct

When I start the node this way , it logs:

Swarm listening on /ip4/10.108.165.159/tcp/9090/wss/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG Swarm listening on /p2p-circuit/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG Swarm listening on /p2p-circuit/ip4/10.108.165.159/tcp/9090/wss/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG

Seems the browser node has a p2p-webrtc-star now …
My understanding of this is that the browser has registered to the signal server, but what should happen next is still beyond my knowledge, how can two nodes build connection if they both have connected to the webrtc-star server.
I tried:

let multiaddr = new Multiaddr('/p2p-circuit/ip4/10.108.165.159/tcp/9090/wss/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG') node.swarm.connect (multiaddr,function(err,res){...}

in the second browser node using the above multiaddr(if right), and the the second browser logged :

Error: No available transports to dial peer Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG!

What puzzled me more is that the page on js-libp2p-webrtc-star says to use the module in browser I should use the code:

const WStar = require('libp2p-webrtc-star')
const multiaddr = require('multiaddr')
const pipe = require('it-pipe')
const { collect } = require('streaming-iterables')

const addr = multiaddr('/ip4/188.166.203.82/tcp/20000/wss/p2p-webrtc-star/ipfs/QmcgpsyWgH8Y8ajJz1Cu72KnS5uo2Aa2LpzU7kinSooo2a')

const ws = new WStar({ upgrader })

const listener = ws.createListener((socket) => {
  console.log('new connection opened')
  pipe(
    ['hello'],
    socket
  )
})

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()

First its not as simple as what js-ipfs page said to simply add an swarm line, its a whole bunch of codes I don’t know how it functions. What is the multiaddr for and why is the WStar dailing it?
Second I tried browserify the js code and add it to my html file it said it doesn’t understand the upgrader, same for me … I found upgrader in github.com/libp2p/interface-transport which all module seems to have to implement, there are some descrition about upgrader but I don’t quite understand it.

There must be some pre-required knowledge to work with the js-ipfs lib and webrtc, which means I’m in desprate need for some kind instructions to clear my puzzles.
How can two browser IPFS node build connection and to do the normal ipfs job(using webrtc). I really need someone to advice and instruct me…

Thanks soooooo much

Thank you for the detailed notes, @fzk10306

With regards to your:

WebSocket connection to 'wss://wrtc-star.discovery.libp2p.io/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 502

@olizilla @Jacob do you know if the signalling services are down?

@fzk10306 as for your second attempt, did you try to dial on the " /ip4/10.108.165.159/tcp/9090/wss/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG" addr vs the p2p-circuit one?

@alanshaw are the Circuit Relays deployed for js-ipfs nodes at the moment? Can you verify why it is announcing itself on a circuit relay addr?

Yes I did.
I have a webrtc-star running:
steve@steve:~$ webrtc-star --host=127.0.0.1
Listening on: http://127.0.0.1:9090

On first node I ran:

const node = new Ipfs({ config: { Addresses: { Swarm: [ '/ip4/127.0.0.1/tcp/9090/ws/p2p-webrtc-star' ] } } }) node.on('error', (e) => handleError(e)) node.on('ready', () => { (async () =>{ console.log(node._peerInfo.id._idB58String) })() })

And the browser gives :
Swarm listening on /ip4/127.0.0.1/tcp/9090/ws/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG index.js:101382 Swarm listening on /p2p-circuit/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG index.js:101382 Swarm listening on /p2p-circuit/ip4/127.0.0.1/tcp/9090/ws/p2p-webrtc-star/ipfs/Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG emm.js:15 Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG

Then I ran the second node whose code is:


And the second browser gives:

failed Error: No available transports to dial peer Qmf3Zs8jowStXUK1ZB4dDtG9LrBGLuBoeqFkQaBepZ93hG!
at createError (index.js:39482)
at CONNECTION_FAILED (index.js:55188)
at nextTransport (index.js:106449)
at index.js:106461
at index.js:187842
at index.js:188069
at index.js:67970
at index.js:63202
at replenish (index.js:103055)
at iterateeCallback (index.js:103041)

Just don’t quite understand how webrtc work on IPFS node…
Appreciate for the reply![quote=“daviddias, post:2, topic:6564, full:true”]

I can’t actually replicate this - both my nodes find each other and swarm.connect does not error when dialing any of the advertised addresses. What version of JS IPFS are you running?

I’m experiencing the same issue as above, "Error: No available transports to dial peer " from my browser app.

I’m running webrtc-server (nodejs install).

I have a vuejs app and a nodejs server. In both I specify the webrtc-server in the ipfs config:

"config": { 
            "Addresses": { 
              "Swarm": ['/ip4/127.0.0.1/tcp/9090/wss/p2p-webrtc-star'], 
              "Bootstrap": [] 
            }
          }

From the browser I get Error: No available transports to dial peer QmacF… when using my nodejs server peer address in my vuejs app via ipfs.swarm.connect.

I’m trying with js-ipfs 0.40.0. The latest js-ipfs is causing other problems which I have outlined in another post.

@alanshaw what version of js-ipfs did you use to get a successful connection?

Edit: Just to confirm, I tried using ipfs.swarm.connect both client to server and server to client; both result in the "No available transports to dial peer " error.

As far as I understood the needed transport is directly available in the browser whereas a node js node must define the transport in the config

const wrtc = require('wrtc')
const WStar = require('libp2p-webrtc-star')

...

this.node = await this.Ipfs.create({
      repo: './ipfs',
      config: {
        Addresses: {
          Swarm: [
            "/dns4/dns-address/tcp/443/wss/p2p-webrtc-star/"
          ]
        }
      },
      libp2p: {
        modules: {
          transport: [WStar]
        },
        config: {
          peerDiscovery: {
            webRTCStar: { // <- note the lower-case w - see https://github.com/libp2p/js-libp2p/issues/576
              enabled: true
            }
          },
          transport: {
            WebRTCStar: { // <- note the upper-case w- see https://github.com/libp2p/js-libp2p/issues/576
              wrtc
            }
          }
        }
      }
    })