How to connect from IPFS node in browser to IPFS node in terminal?

[satoshi999]

I have enabled listening on the websocket in the terminal and am trying to connect to it from the IPFS node in the browser

For websocket enablement, I refer to this page
https://github.com/ipfs-examples/js-ipfs-examples/tree/master/examples/browser-exchange-files
The above repository is connected in the following way. That's what it looks like when you actually look at the code.

ipfs.swarm.connect('/ip4/127.0.0.1/tcp/4003/ws/ipfs/<your_peer_id>')

So, I wrote the below simple code and tried,
I get the error The dial request has no valid addresses

Is it necessary to assign ssl or domain to connect from the IPFS node of the browser to the IPFS node of the terminal?
The browser-exchange-files example project is written to connect by simply enabling listening on ws but Is there anything else I should do?

import {WebSockets} from '@libp2p/websockets'
import {create} from 'ipfs-core'

window.addEventListener('load', async() => {
  const ipfs = await create({
    repo: 'IPFS-' + Math.random(),
    libp2p: {
      modules: {
        transport: [WebSockets]
      }
    }
  })
  
  await ipfs.swarm.connect('/ip4/127.0.0.1/tcp/4003/wss/p2p/{peerId of the node running in the terminal}')

  setInterval(async() => {
    const peers = await ipfs.swarm.peers()
    for(const peer of peers) {
      console.log(peer.peer.toString())
    }
  }, 1000)
})

by the way, the browser-exchange-files example project does not work due to a build error.

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

Node.js v18.7.0
npm 8.15.1
macOS monterey 12.0.1

[2color]

@satoshi999 Which version of ipfs-core are you using?

[2color]

I get the error The dial request has no valid addresses

This is likely due to js-ipfs (specifically libp2p) filtering out connections to non-secure WebSockets when running in the browser (for more context see libp2p/js-libp2p-websockets#116).

You can prevent this error by enabling all connections (changing the default filter)

import { WebSockets } from '@libp2p/websockets'
import { create } from 'ipfs-core'
import { all } from '@libp2p/websockets/filters'

window.addEventListener('load', async () => {

  const ws = new WebSockets({
    //       👇 allow all WebSocket connections 
    filter: all,
  })
  const ipfs = await create({
    libp2p: {
      transports: [ws],
    },
  })
  // ---------------------------------------------  👇 note that this should be ws. wss is only supported for
  await ipfs.swarm.connect('/ip4/127.0.0.1/tcp/4003/ws/p2p/{peerId of the node running in the terminal}')
})

Is it necessary to assign ssl or domain to connect from the IPFS node of the browser to the IPFS node of the terminal?

You need a TLS certificate if you want to deploy a browser app with ipfs-core to a hostname/domain other than localhost

See this doc https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md#limitations-of-the-browser-context for more information.

by the way, the browser-exchange-files example project does not work due to a build error.

Thanks for reporting this. Could you please open an issue in the https://github.com/ipfs-examples/js-ipfs-examples/issues repo?

[satoshi999]

@2color
I applied filter:all but still get the same error.
ipfs-core version is 0.15.4

[2color]

Are you getting the error with the BigIntegers or with the "no valid addresses"?

Could you please share a full reproduction?

[satoshi999]

@2color

I've attached a screenshot of the JavaScript console.

Here is the source code.
Changed wss to ws and added filter:all

import {WebSockets} from '@libp2p/websockets'
import { all } from '@libp2p/websockets/filters'
import {create} from 'ipfs-core'

window.addEventListener('load', async() => {
  const ws = new WebSockets({
    filter: all
  })
  const ipfs = await create({
    repo:'IPFS-' + Math.random(),
    libp2p: {
      modules: {
        transport: [ws]
      }
    }
  })
  
  await ipfs.swarm.connect('/ip4/127.0.0.1/tcp/4003/ws/p2p/{peerId of the node running in the terminal}')

  setInterval(async() => {
    const peers = await ipfs.swarm.peers()
    for(const peer of peers) {
      console.log(peer.peer.toString())
    }
  }, 1000)
})

[2color]

To make sure the error is coming from your connect call try:

const node = await create({
        config: {
          Bootstrap: [],
        },
        libp2p: {
          transports: [ws],
          connectionManager: {
            autoDial: false,
          },
        },
      })

Can you also share a screenshot of the network tab?

[satoshi999]

After rewriting the options as follows referring to your code, it seems to have worked.

It looks like you didn't need the optional modules property.

     libp2p: {
       modules: {
         transport: [ws]
       }
     }

↓↓↓↓↓

     libp2p: {
       transport: [ws]
     }

Solved for now. thank you so much.

[silkroadnomad]

Thank you for this issue and how to resolve this, since I ran into the same. But now, did you try to add a file to the browser ipfs and Ipfs cat it from the go-ipfs? Doesn't work for me. Also ping works just from the browser side to go-ipfs but not vice verca. I need a way to get my browser cids down to other ipfs nodes. I'm connected via wss to go-ipfs and via webrtc in-between browsers. I am wondering, if I can make go-ipfs talk WebRTC to my WebRTC-star as the browser do.