Unable to Create Stream (`dialProtocol`) Between Listener/Dialer in a Browser Environment

[nickreynolds]

• Version: "@chainsafe/libp2p-noise": "^7.0.1", "@libp2p/bootstrap": "^2.0.0", "@libp2p/mplex": "^4.0.0", "@libp2p/peer-id-factory": "^1.0.16", "@libp2p/webrtc-star": "^3.0.0", "@libp2p/websockets": "^3.0.1", "libp2p": "^0.37.3", "libp2p-websockets": "^0.16.2", "peer-id": "^0.16.0", "react": "^18.2.0",

• Platform: Chrome on OSX

• Subsystem: Dialer ?

Severity:

High

Description:

I have attempted to translate the "chat" example (https://github.com/libp2p/js-libp2p/tree/master/examples/chat) from this repo into a browser environment, making changes to the libp2p node setup process as needed based on the "libp2p-in-the-browser" example (https://github.com/libp2p/js-libp2p/blob/master/examples/libp2p-in-the-browser/index.js). I am able to create a Listener node and a Dialer node successfully (in separate tabs or browsers), however the dialProtocol step fails. The Listener never seems to handle any protocol message and no stream is ever created.

Steps to reproduce the error:

I have created a minimal react app that reproduces the error here: https://github.com/nickreynolds/libp2p-browser-demo

To reproduce, run this demo in 2 separate tabs. In 1 tab, click the "SETUP LIBP2P LISTENER" button. In the other tab, click the "SETUP LIBP2P DIALER" button, then, once it has finished setting up, click the "CREATE STREAM DIALER -> LISTENER" button, which calls the createStream function.

export async function createStream(nodeDialer) { const idListener = await createFromJSON(peerIdListenerJson) const listenerMa = new Multiaddr(/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star/p2p/${idListener.toString()}) console.log("listenerMa: ", listenerMa) const stream = await nodeDialer.dialProtocol(listenerMa, '/chat/1.0.0') console.log("stream: ", stream) return stream }

If you open the "dialer" browser console, you will see that the function called here to create a stream never reaches the 2nd console log, which should print the stream object. In other words, the dialProtocol promise never resolves. Similarly, in the "listener" tab, the protocol handler is never reached (the handler should output to the console, but it does not)

If absolutely necessary, I can attempt to recreate this demo using parcel.js.