Browser dialer + nodejs listener

[AcidLeroy]

Type: Question

Severity: Low

Description:

Hey all,

I'm trying to use a combination of the examples to achieve my desired goal with libp2p. My goal is simple: I want to create a listener in Node.js and then dial that node from the browser. As a result, I am using two examples to achieve this. The first is the browser example, and the second is the chat app. In both cases, however, I am using the node bundles for both the browser and NodeJS instead of the bundle provided by the examples. What I can't seem to figure out is how to dial the NodeJS application from the browser. Here is a code snippet of what my NodeJS multiaddrs config looks like:

  peerInfo.multiaddrs.add(`/dns4/star-signal.cloud.ipfs.team/tcp/443/wss/p2p-webrtc-star/p2p/${id.id}`)
  peerInfo.multiaddrs.add(`/ip4/0.0.0.0/tcp/0/p2p/${id.id}`)
  peerInfo.multiaddrs.add(`/ip4/0.0.0.0/tcp/0/ws/p2p/${id.id}`)

In this case id.id is the id of the listener node. I'm hoping to connect either over web sockets or WebRTC.

In the browser, I added a snippet of code to the example in an attempt to send a simple message to the NodeJs Application:

    node.on('peer:connect', (peerInfo) => {
      const idStr = peerInfo.id.toB58String()
      console.log('Got connection to: ' + idStr)
      const connDiv = document.createElement('div')
      connDiv.innerHTML = 'Connected to: ' + idStr
      connDiv.id = idStr
      swarmDiv.append(connDiv)

    
      PeerId.createFromJSON(listenerId).then(id => {
          if (err) throw err

          let peerInfo = new PeerInfo(id)
          peerInfo.multiaddrs.add(`/dns4/star-signal.cloud.ipfs.team/tcp/443/wss/p2p-webrtc-star/p2p/${listenerId.id}`)
          console.log("info = ", peerInfo)
          node.dialProtocol(peerInfo, '/api', (err, conn) => {
            console.log('dialed!!')
            if (err) { throw err }

            pull(pull.values(['Hello', ' ', 'p2p', ' ', 'world', '!']), conn)
          })
        }
        )
    })

When I start my listener up, it runs smoothly, however, my dialer never sends the message to my listener. The error message that I get is: No available transports to dial peer. How do I properly setup the transports correctly to speak from browser to node using webrtc or websockets? Does anyone have an example they could share with me?

Steps to reproduce the error:

[AcidLeroy]

I should also mention that ANY transport would work, I just need something. If I can use Websockets, that would be fantastic too.

[AcidLeroy]

So in case I wasn't clear in my first posts, my goal is the following:

Have a node running in the browser that can exchange messages with a node running in NodeJs. From the documentation, I can't seem to get this scenario working. If anyone was some advice on getting this rolling, that would be extremely helpful.

[AcidLeroy]

@jacobheun Can you or someone point to me to some documentation on this? I haven't found a clear way to connect a nodejs app to a browser app. Any tips would be helpful!

[jacobheun]

@AcidLeroy the course materials we created for IPFS Camp are available, https://github.com/ipfs/camp/tree/master/CORE_AND_ELECTIVE_COURSES/CORE_COURSE_B#preparation-for-the-course. This includes a slide deck with speaker notes and a much more in depth chat example of libp2p, at https://github.com/libp2p/js-libp2p-examples. It walks through setting up a Bootstrap node (with signaling server), as well as browser and node clients.

I'd recommend going through that. It's hard to say what's going on without seeing all of your code, but I believe the dial code you have needs to be updated. Right now, the snippet of code you have is going to attempt to dial listenerId when any peer connects to you, via the peer:connect event. Ultimately you should either be dialing to specific, known peers when your node starts, or when you discover them via peer:discovery.