How to retrieve content uploaded via Helia using the IPFS gateway?

Help Helia
6

@eccker

user open up a webpage, run the Helia node, upload user’s content, pin it and content is available across all IPFS network from any client as long as user has open and running the page in the browser.

That’s a fair expectation if all the items previously mentioned are completed. Have you used pl-diagnose to debug problems? Do you have a code example that’s easy to run and test? (on codesandbox, stackblitz, codepen, etc…?)

I extended our script-tag example from the helia-examples repo that lives on codesandbox to:

  1. Use the latest versions of packages (from npm not script tags)
  2. show multiaddrs which you can attempt to dial

You can find it at https://codesandbox.io/p/sandbox/helia-script-tag-forked-3q8y35

With this node running from codesandbox in the browser, I could fetch new, unique content created by my Helia browser node, from a local Kubo node. Below are the steps I took, you will need 3 separate windows – one browser window and two terminals(shell prompts) – to complete this exercise.

An exercise in retrieving content from Helia

In your browser

  1. Open up https://codesandbox.io/p/sandbox/helia-script-tag-forked-3q8y35 and ensure the helia node is running and generates some Multiaddr(s) to connect to
  2. After you have some multiaddrs created, Copy the multiaddrs listed on the page, and paste to a text file somewhere. For reference in these instructions, we’ll call them commands.txt
    1. Prefix EACH line with npx go-ipfs swarm connect , they should look something like npx go-ipfs swarm connect /ip4/###.###.###.###/udp/...
  3. run the following script in your browser console:
 const textEncoder = new TextEncoder()
 const cid = await heliaFs.addBytes(textEncoder.encode('test-123-YYYY-MM-DD-Other-unique-text-stuff-to-ensure-unique-cid')) 
// If you don't create a unique CID, you are not guaranteed to retrieve the data from your Helia node.
 console.log('cid', cid.toString()) 
 // note this CID because you will need it.
 for await (const event of helia.libp2p.services.dht.provide(cid)) {
   console.log(event)
}
  1. Ensure you copy the CID logged to your console

In a terminal on your machine

  1. run the following: npx go-ipfs daemon

In a separate terminal

  1. paste the commands from commands.txt and run them.
    1. You should see a message output like connect $YOUR_HELIA_PEER_ID success. If you do not, repeat step 2 from the browser section above to ensure you have the latest multiaddrs, and try again.
  2. run npx go-ipfs cat $CID_YOU_COPIED_FROM_THE_BROWSER_CONSOLE
  3. You should see the unique text string you created in your browser.

At this point, you should also be able to get the same unique text string by visiting any IPFS gateway:

Note: if you’re not using a chromium based browser with webtransport support, you probably won’t ever get successful connections, discover more peers, and will likely never be able to generate multiaddrs. e.g. in Safari, the browser Helia node does not connect to anything and because of that, cannot discover new peers. I only get the following errors in the console: WebSocket connection to 'wss://ny5.bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa' failed: The operation couldn’t be completed. Protocol error

2 Likes