How to get IP address of WebRTC peer in IPFS / libp2p?

I'm using this code to play around with IPFS in the browser. I'm wondering how I can access the ip addresses of the webRTC peers? or even know if the peers are actually webRTC, or http peers?

<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>

<script>
    (async () => {
        window.node = await Ipfs.create({
          config: {
            Addresses: {
              Swarm: []
            },
            Bootstrap: []
          }
        })
        window.node.libp2p.on('peer:discovery', (peer) => console.log('peer:discovery', peer))
        window.node.libp2p.on('peer:connect', peerInfo => console.log('peer:connect', peerInfo))
        window.node.libp2p.on('peer:disconnect', peerInfo => console.log('peer:disconnect', peerInfo))
        window.node.libp2p.peerStore.on('peer', (peerId) => console.log('peer', peerId))
        window.node.libp2p.peerStore.on('change:multiaddrs', ({ peerId, multiaddrs}) => console.log('change:multiaddrs', {peerId, multiaddrs}))
        window.node.libp2p.peerStore.on('change:protocols', ({ peerId, protocols}) => console.log('change:protocols', {peerId, protocols}))
        window.node.libp2p.on('error', (err) => console.log('error', err))
        window.node.libp2p.connectionManager.on('peer:connect', (connection) => console.log('peer:connect', connection))
        window.node.libp2p.connectionManager.on('peer:disconnect', (connection) => console.log('peer:disconnect', connection))

        const data = 'Hello'
        const results = await window.node.add(data)
        console.log({results})
    })()

</script>

node.swarm.peers() gives me a list of peers, but it doesn't seem to include the IP address.

Solution

Looking at your config, it seems that you did not configure any swarm address. A swarm address must be configured for your peer to be diable from other peers in the network.

Some context, in this specific case, you are dealing with a browser environment. Currently, Browsers do not allow listening for connections. One of the limitations is actually that a browser does not provide an "IP Address" that someone can use to reach to it. They are designed in a client-server model where the server IP Address is known and the client will establish the connection with it.

As one of the ways to solve the issue above, there is libp2p-webrtc-star transport. It basically uses a server that will be responsible for listening for connections on behalf of browser nodes. You can use one of the available servers for experimenting https://github.com/libp2p/js-libp2p-webrtc-star#hosted-rendezvous-server. Basically, you should add to your swarm addresses, a multiaddr such as /dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star. Once your node starts, your browser node will establish a connection with the server and the server will inform all the other peers about the peer who joined. These peers can dial your peer via this star server and the multiaddrs will look something like: /dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star/p2p/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM.

With this setup, you should be able to open multiple browsers and peers discover and connect to each other. If you run the ipfs.swarm.peers you should see the addresses of the other nodes peers via the star server.

I hope this helps you move forward. I also highly recommend you to check the following examples:

As a complement, there are a few new features being worked on that aim to improve the browser experience in this regard. You can follow the developments on: https://github.com/libp2p/js-libp2p/issues/703