{"id":20388215,"url":"https://github.com/libp2p/js-libp2p-example-browser-pubsub","last_synced_at":"2025-04-12T10:32:26.727Z","repository":{"id":204714083,"uuid":"712489134","full_name":"libp2p/js-libp2p-example-browser-pubsub","owner":"libp2p","description":"How to use libp2p pubsub in browsers","archived":false,"fork":false,"pushed_at":"2024-10-23T15:59:50.000Z","size":13,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-23T21:25:16.743Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/libp2p.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-31T15:11:53.000Z","updated_at":"2024-10-23T15:59:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"646a51f3-98cc-429f-9e72-6acdedba36a8","html_url":"https://github.com/libp2p/js-libp2p-example-browser-pubsub","commit_stats":null,"previous_names":["libp2p/js-libp2p-example-browser-pubsub"],"tags_count":0,"template":false,"template_full_name":"libp2p/js-libp2p-example-fork-go-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-example-browser-pubsub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-example-browser-pubsub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-example-browser-pubsub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-example-browser-pubsub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/libp2p","download_url":"https://codeload.github.com/libp2p/js-libp2p-example-browser-pubsub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224722146,"owners_count":17358670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:07:58.145Z","updated_at":"2024-11-15T03:07:58.802Z","avatar_url":"https://github.com/libp2p.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @libp2p/example-browser-pubsub \u003c!-- omit in toc --\u003e\n\n[![libp2p.io](https://img.shields.io/badge/project-libp2p-yellow.svg?style=flat-square)](http://libp2p.io/)\n[![Discuss](https://img.shields.io/discourse/https/discuss.libp2p.io/posts.svg?style=flat-square)](https://discuss.libp2p.io)\n[![codecov](https://img.shields.io/codecov/c/github/libp2p/js-libp2p-examples.svg?style=flat-square)](https://codecov.io/gh/libp2p/js-libp2p-examples)\n[![CI](https://img.shields.io/github/actions/workflow/status/libp2p/js-libp2p-examples/ci.yml?branch=main\\\u0026style=flat-square)](https://github.com/libp2p/js-libp2p-examples/actions/workflows/ci.yml?query=branch%3Amain)\n\n\u003e User libp2p pubsub in browsers\n\nThis example leverages the [vite bundler](https://vitejs.dev/) to compile and serve the libp2p code in the browser. You can use other bundlers such as Webpack, but we will not be covering them here.\n\n## Table of contents \u003c!-- omit in toc --\u003e\n\n- [Setup](#setup)\n- [Running](#running)\n  - [Why do I need a Relay Server?](#why-do-i-need-a-relay-server)\n  - [Start the Relay Server](#start-the-relay-server)\n  - [Running the Example](#running-the-example)\n- [Need help?](#need-help)\n- [License](#license)\n- [Contribution](#contribution)\n\n## Setup\n\n1. Install example dependencies\n    ```console\n    $ npm install\n    ```\n2. Open 2 terminal windows in the `./src` directory.\n\n## Running\n\nThis example has three components.  Two browser windows which will send pubsub messages and a relay server that they will use to establish the initial connection.\n\n### Why do I need a Relay Server?\n\nThe only transport available to browser nodes that lets them be dialed by remote peers is the [WebRTC](https://www.npmjs.com/package/@libp2p/webrtc) transport.\n\nThis transport requires an initial [handshake](https://en.wikipedia.org/wiki/Session_Description_Protocol) to be done out-of-band, during which the two peers exchange their capabilities, addresses and open ports.\n\nWe use a [Circuit Relay](https://docs.libp2p.io/concepts/nat/circuit-relay/) server to establish an initial communication channel between the two browsers for this process, after which they will have negotiated a peer-to-peer connection and the relay will no longer be used.\n\n```mermaid\nsequenceDiagram\n    Browser A-\u003e\u003eRelay: Create reservation\n    activate Relay\n    Browser B-\u003e\u003eRelay: Dial Browser A\n    Relay-\u003e\u003eBrowser A: Relayed dial from Browser B\n    Browser B-\u003e\u003eRelay: WebRTC handshake request\n    Relay-\u003e\u003eBrowser A: Relayed WebRTC handshake request\n    Browser A-\u003e\u003eRelay: WebRTC handshake response\n    Relay-\u003e\u003eBrowser B: Relayed WebRTC handshake response\n    deactivate Relay\n    Browser B-\u003e\u003eBrowser A: WebRTC connection\n```\n\n### Start the Relay Server\n\nFor browsers to communicate, we first need to run the libp2p relay server:\n\n```console\n$ npm run relay\n```\n\nCopy one of the multiaddresses in the output.\n\n### Running the Example\n\nStart the Vite server:\n\n```console\n$ npm start\n```\n\nA browser window will automatically open. Let's call this `Browser A`.\n\n1. Paste the copied multiaddress from the relay server, paste it into the `Dial MultiAddr` input and click the `Connect` button\n2. `Browser A` is now connected to the relay server\n3. Copy the multiaddress located after the `Listening on` message\n\nNow open a second browser with the url `http://localhost:5173/`. Let's call this `Browser B`.\n\n1. Using the copied multiaddress from `Listening on` section in `Browser A`, paste it into the `Remote MultiAddress` input and click the `Connect` button\n2. `Browser B` is now connected to `Browser A`\n\nYou can now shut down the relay server if you wish.\n\n1. In both `Browser A` and `Browser B`, enter the same topic name in the \"Subscribe to topic\" input and click the \"Subscribe\" button\n2. In either browser, enter a message in the `Send Message to Topic` field and click \"Send\"\n\nYou should see the message appear in the output section towards the bottom of the other browser window.\n\n## Need help?\n\n- Read the [js-libp2p documentation](https://github.com/libp2p/js-libp2p/tree/main/doc)\n- Check out the [js-libp2p API docs](https://libp2p.github.io/js-libp2p/)\n- Check out the [general libp2p documentation](https://docs.libp2p.io) for tips, how-tos and more\n- Read the [libp2p specs](https://github.com/libp2p/specs)\n- Ask a question on the [js-libp2p discussion board](https://github.com/libp2p/js-libp2p/discussions)\n\n## License\n\nLicensed under either of\n\n- Apache 2.0, ([LICENSE-APACHE](LICENSE-APACHE) / \u003chttp://www.apache.org/licenses/LICENSE-2.0\u003e)\n- MIT ([LICENSE-MIT](LICENSE-MIT) / \u003chttp://opensource.org/licenses/MIT\u003e)\n\n## Contribution\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor inclusion in the work by you, as defined in the Apache-2.0 license, shall be\ndual licensed as above, without any additional terms or conditions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibp2p%2Fjs-libp2p-example-browser-pubsub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flibp2p%2Fjs-libp2p-example-browser-pubsub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibp2p%2Fjs-libp2p-example-browser-pubsub/lists"}