Moving data from a webpage to a datastore in Helia

Hello Helia team!

I am creating an interactive experience for an exhibition, to showcase community consensus in an abstract way. I am trying to use Helia to do so, as decentralisation is a key part of the exhibition.

The goal would be to have participants enter a frontend webpage and vote for their favourite colour, then the votes would be stored in a datastore on the IPFS network, and continuously pulled to another frontend site to show the community colour rankings.

I am practicing with the helia examples, using the ‘helia-script-tag’ specifically (unmodified so far), and have managed to publish data to the IPFS network from a webpage. I am wondering how to set up a specific datastore for the votes to be added to, and which datastore is the best choice for this. I am also wondering how to fetch the data from that same datastore to display on a webpage.

Thank you,
~Raph

1 Like

The way I’d do this is have one peer listen on pubsub for votes from peers, letting each peer get a vote each. Log all the data however you choose, publish the data by creating a CID and sharing it to the peers after votes complete.

I hope I understood the question correctly! (and welcome!!)

@Raph

A really cool demo @tabcat is working on that deals with syncing data and dealing with DB stuff is at GitHub - hldb/todomvc: collaborative todomvc built with welo. Which uses GitHub - tabcat/zzzync: sync with peers that have gone to sleep 😴, based on the writeup at GitHub - tabcat/dynamic-content: Hosting Dynamic Content on IPFS

This is second-hand info for me. I hope tabcat might be able to correct any misinformation I’ve given.

Hi @Raph

You could use welo for this. However it doesn’t sound like zzzync (offline sync) would be very useful here.

For your case libp2p pubsub and helia, both using an indexedDB datastore would be fine. You would need to build a replication protocol and store the total votes locally on each device. Instead of having separate sites for the display and the input, you could have a single site which starts the helia/libp2p instance and queries peers for the updates. The display node and the input clients would all run the same code.

feel free to message me for specifics on what’s needed to build this.

1 Like

Hey @Tabcat,
Thank you for your suggestion, I am using pubsub and libp2p now, and have opted to have a single site containing both the voting and ranking.

For the pubsub part, I am using a modified version of the helia-script-tag example:

let heliaInstance = null
const instantiateHeliaNode = async () => {
  // application-specific data lives in the datastore
  const datastore = new DatastoreCore.MemoryDatastore()
  const blockstore = new BlockstoreCore.MemoryBlockstore()

  if (heliaInstance != null) {
    return heliaInstance
  }

  heliaInstance = await Helia.createHelia({
    datastore,
    blockstore,
    libp2p: {
      services: {
        pubsub: gossipsub(
          {emitSelf:true}, 
          
        )
      }
    }
  })
  addToLog('Created Helia instance')

  return heliaInstance
}

And when running the Helia node I seem to be connecting to the same three pairs and only discovering six in total, compared to the hundreds I discover when running the unmodified helia-script-tag example.

Do you (or anyone else) have any idea what would cause that?

You are passing a custom libp2p config and may be losing some of the defaults. I can’t remember precisely how config merging in libp2p works, but I would bet that’s the issue. You may want to copy over some of the config from https://github.com/ipfs/helia/blob/main/packages/helia/src/utils/libp2p-defaults.browser.ts

1 Like