Trouble with browser dialing node.js

Users and Developers js
1

Hi All,

I’d like to have a browser application dial a localhost node.js service (both running libp2p) such that I can use the same app specfic protocols for peers as the browser within the node.js service.

I’m currently trying to do this in the browser with code that looks like this:

const peerId = await PeerId.create();

libp2p = await Libp2p.create({
    peerId,
    modules: {
        transport: [Websockets],
        connEncryption: [NOISE],
        streamMuxer: [MPLEX],
    },
});

// start libp2p
await libp2p.start();
console.log("libp2p has started");

const conn = await libp2p.dial(
 "/ip4/192.168.1.9/tcp/8000/ws/p2p/QmZ2R1h21iPYdsCiNeP3Dj8v2NgKkdzmGgXwC3fHwVSAou"
);

but I’m getting an error that

Error: The dial request has no valid addresses

Am I doing something simple wrong?

Thanks,
Tim

1 Like
2

I know nothing about any of these, but browsers can not do tcp. Use either Websockets: GitHub - libp2p/js-libp2p-websockets: WebSockets module that libp2p uses and that implements the interface-transport spec or WebRTC: GitHub - libp2p/js-libp2p-webrtc-direct: Dial using WebRTC without the need to set up any Signalling Rendezvous Point! or with a signaling server GitHub - libp2p/js-libp2p-webrtc-star: libp2p WebRTC transport that includes a discovery mechanism provided by the signalling-star

3

It’s possible that I am misconstructing the multiaddress because what I am trying to do is use Websockets with this address:

"/ip4/192.168.1.9/tcp/8000/ws/p2p/QmZ2R1h21iPYdsCiNeP3Dj8v2NgKkdzmGgXwC3fHwVSAou"

Is there another way I should be specifying this address to have the browser dial open a websocket connection locally?

For reference, here is my node.js service, which seems to work for node.js <-> node.js:

const peerId = await PeerId.create();

    const node = await Libp2p.create({
        peerId,
        addresses: {
            listen: ["/ip4/0.0.0.0/tcp/8000/ws"],
        },
        modules: {
            transport: [WebSockets],
            connEncryption: [NOISE],
            streamMuxer: [MPLEX],
        },
    });

    // start libp2p
    await node.start();
1 Like
4

It turns out that the default filter prevents dialing with ws and you have to use secure websockets (wss).

If this isn’t right for your use case, you can instead use the filter.all filter to allow this ala:

const peerId = await PeerId.create();

libp2p = await Libp2p.create({
    peerId,
    modules: {
        transport: [Websockets],
        connEncryption: [NOISE],
        streamMuxer: [MPLEX],
    },
   config: {
                transport: {
                    WebSockets: {
                        filter: filters.all,
                    },
                },
            },
});

// start libp2p
await libp2p.start();
console.log("libp2p has started");

const conn = await libp2p.dial(
 "/ip4/127.0.0.1/tcp/8000/ws/p2p/QmZ2R1h21iPYdsCiNeP3Dj8v2NgKkdzmGgXwC3fHwVSAou"
);
3 Likes
5

Thank you for this good solution! I am almost broke my head trying to understand why this websockets browser-standalone node connection is not working.

1 Like