Skip to content
This repository was archived by the owner on Jan 12, 2024. It is now read-only.

Latest commit

 

History

History

http-client-browser-pubsub

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.github
.github
 
 
images
images
 
 
src
src
 
 
tests
tests
 
 
README.md
README.md
 
 
favicon.ico
favicon.ico
 
 
index.html
index.html
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

README.md

IPFS in JavaScript logo

Pubsub in the browser

How to use pubsub in the browser!


Explore the docs · View Demo · Report Bug · Request Feature/Example

Table of Contents

About The Project

Getting Started

Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

Installation and Running example

With Node.js and git installed, install the project dependencies:

$ npm install

Start the example application:

npm start

You should see something similar to the following in your terminal and the web app should now be available if you navigate to http://127.0.0.1:8888 using your browser.

Usage

This example is a demo web application that allows you to connect to an IPFS node, subscribe to a pubsub topic and send/receive messages. We'll start two IPFS nodes and two browsers and use the ipfs-http-client to instruct each node to listen to a pubsub topic and send/receive pubsub messages to/from each other. We're aiming for something like this:

   +-----------+                   +-----------+
   |           +------------------->           |
   |  js-ipfs  |      pubsub       |  go-ipfs  |
   |           <-------------------+           |
   +-----^-----+                   +-----^-----+
         |                               |
         | HTTP API                      | HTTP API
         |                               |
+-------------------+         +-------------------+
+-------------------+         +-------------------+
|                   |         |                   |
|                   |         |                   |
|     Browser 1     |         |     Browser 2     |
|                   |         |                   |
|                   |         |                   |
|                   |         |                   |
+-------------------+         +-------------------+

1. Start two IPFS nodes

To demonstrate pubsub we need two nodes running so pubsub messages can be passed between them.

Right now the easiest way to do this is to install and start a js-ipfs and go-ipfs node. There are other ways to do this, see this document on running multiple nodes for details.

2. Start the IPFS nodes

JS IPFS node

npm install -g ipfs
jsipfs init
# Configure CORS to allow ipfs-http-client to access this IPFS node
jsipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://127.0.0.1:8888"]'
# Start the IPFS node, enabling pubsub
jsipfs daemon

GO IPFS node

ipfs init
# Configure CORS to allow ipfs-http-client to access this IPFS node
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://127.0.0.1:8888"]'
# Start the IPFS node, enabling pubsub
ipfs daemon --enable-pubsub-experiment

3. Open two browsers and connect to each node

Now, open up two browser windows. This could be two tabs in the same browser or two completely different browsers, it doesn't matter. Navigate to http://127.0.0.1:8888 in both.

In the "API ADDR" field enter /ip4/127.0.0.1/tcp/5001 in one browser and /ip4/127.0.0.1/tcp/5002 in the other and hit the "Connect" button.

This connects each browser to an IPFS node and now from the comfort of our browser we can instruct each node to listen to a pubsub topic and send/receive pubsub messages to each other.

N.B. Since our two IPFS nodes are running on the same network they should have already found each other by MDNS. So you probably won't need to use the "CONNECT TO PEER" field. If you find your pubsub messages aren't getting through, check the output from your jsipfs daemon command and find the first address listed in "Swarm listening on" - it'll look like /ip4/127.0.0.1/tcp/4002/ipfs/Qm.... Paste this address into the "CONNECT TO PEER" field for the browser that is connected to your go-ipfs node and hit connect.

Finally, use the "SUBSCRIBE TO PUBSUB TOPIC" and "SEND MESSAGE" fields to do some pubsub-ing, you should see messages sent from one browser appear in the log of the other (provided they're both subscribed to the same topic).

For more examples, please refer to the Documentation

References

Documentation

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the IPFS Project
  2. Create your Feature Branch (git checkout -b feature/amazing-feature)
  3. Commit your Changes (git commit -a -m 'feat: add some amazing feature')
  4. Push to the Branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Want to hack on IPFS?

The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:

Read the Code of Conduct and JavaScript Contributing Guidelines.

  • Check out existing issues The issue list has many that are marked as 'help wanted' or 'difficulty:easy' which make great starting points for development, many of which can be tackled with no prior IPFS knowledge
  • Look at the IPFS Roadmap This are the high priority items being worked on right now
  • Perform code reviews More eyes will help a. speed the project along b. ensure quality, and c. reduce possible future bugs.
  • Add tests. There can never be enough tests.
  • Join the Weekly Core Implementations Call it's where everyone discusses what's going on with IPFS and what's next