vgrichina/index.html

## index.html
<!DOCTYPE html>

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>js-libp2p parcel.js browser example</title>
  </head>

  <body>
    <header>
      <h1 id="status">Starting libp2p...</h1>
    </header>

    <main>
      <pre id="output"></pre>
    </main>

    <script src="./index.js"></script>

  </body>

</html>

## index.js
import 'babel-polyfill'
import Libp2p from 'libp2p'
import Websockets from 'libp2p-websockets'
import WebRTCStar from 'libp2p-webrtc-star'
import { NOISE } from 'libp2p-noise'
import Gossipsub from 'libp2p-gossipsub'
import Mplex from 'libp2p-mplex'
import Bootstrap from 'libp2p-bootstrap'

document.addEventListener('DOMContentLoaded', async () => {
  // Create our libp2p node
  const libp2p = await Libp2p.create({
    addresses: {
      // Add the signaling server address, along with our PeerId to our multiaddrs list
      // libp2p will automatically attempt to dial to the signaling server so that it can
      // receive inbound connections from other peers
      listen: [
        '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
        '/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
      ]
    },
    modules: {
      transport: [Websockets, WebRTCStar],
      connEncryption: [NOISE],
      streamMuxer: [Mplex],
      peerDiscovery: [Bootstrap],
      pubsub: Gossipsub
    },
    config: {
      peerDiscovery: {
        // The `tag` property will be searched when creating the instance of your Peer Discovery service.
        // The associated object, will be passed to the service when it is instantiated.
        [Bootstrap.tag]: {
          enabled: true,
          list: [
            '/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
            '/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
            '/dnsaddr/bootstrap.libp2p.io/p2p/QmZa1sAxajnQjVM8WjWXoMbmPd7NsWhfKsPkErzpm9wGkp',
            '/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
            '/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
          ]
        }
      }
    }
  })

  // UI elements
  const status = document.getElementById('status')
  const output = document.getElementById('output')

  output.textContent = ''

  function log (txt) {
    console.info(txt)
    output.textContent += `${txt.trim()}\n`
  }

  // Listen for new peers
  libp2p.on('peer:discovery', (peerId) => {
    log(`Found peer ${peerId.toB58String()}`)
  })

  // Listen for new connections to peers
  libp2p.connectionManager.on('peer:connect', (connection) => {
    log(`Connected to ${connection.remotePeer.toB58String()}`)
  })

  // Listen for peers disconnecting
  libp2p.connectionManager.on('peer:disconnect', (connection) => {
    log(`Disconnected from ${connection.remotePeer.toB58String()}`)
  })

  await libp2p.start();
  status.innerText = 'libp2p started!';
  log(`libp2p id is ${libp2p.peerId.toB58String()}`);

  libp2p.pubsub.subscribe('general');
  libp2p.pubsub.on('general', ({ data }) => {
    console.log('received', data);
    log(`#general: ${new TextDecoder().decode(data)}`);
  });

  setTimeout(() => {
    libp2p.pubsub.publish('general', new TextEncoder().encode(`Hello: ${new Date()}`));
  }, 500);

  // Export libp2p to the window so you can play with the API
  window.libp2p = libp2p
})

## package.json
{
  "name": "libp2p-in-browser",
  "version": "1.0.0",
  "description": "A libp2p node running in the browser",
  "main": "index.js",
  "browserslist": [
    "last 2 Chrome versions"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "parcel build index.html",
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-env": "^7.13.0",
    "libp2p": "^0.30.0",
    "libp2p-bootstrap": "^0.12.1",
    "libp2p-gossipsub": "^0.8.0",
    "libp2p-mplex": "^0.10.0",
    "libp2p-noise": "^2.0.0",
    "libp2p-webrtc-star": "^0.20.0",
    "libp2p-websockets": "^0.14.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.0",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "parcel-bundler": "1.12.3"
  }
}
	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>js-libp2p parcel.js browser example</title>
	</head>

	<body>
	<header>
	<h1 id="status">Starting libp2p...</h1>
	</header>

	<main>
	<pre id="output"></pre>
	</main>

	<script src="./index.js"></script>

	</body>

	</html>
	import 'babel-polyfill'
	import Libp2p from 'libp2p'
	import Websockets from 'libp2p-websockets'
	import WebRTCStar from 'libp2p-webrtc-star'
	import { NOISE } from 'libp2p-noise'
	import Gossipsub from 'libp2p-gossipsub'
	import Mplex from 'libp2p-mplex'
	import Bootstrap from 'libp2p-bootstrap'

	document.addEventListener('DOMContentLoaded', async () => {
	// Create our libp2p node
	const libp2p = await Libp2p.create({
	addresses: {
	// Add the signaling server address, along with our PeerId to our multiaddrs list
	// libp2p will automatically attempt to dial to the signaling server so that it can
	// receive inbound connections from other peers
	listen: [
	'/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
	'/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
	]
	},
	modules: {
	transport: [Websockets, WebRTCStar],
	connEncryption: [NOISE],
	streamMuxer: [Mplex],
	peerDiscovery: [Bootstrap],
	pubsub: Gossipsub
	},
	config: {
	peerDiscovery: {
	// The `tag` property will be searched when creating the instance of your Peer Discovery service.
	// The associated object, will be passed to the service when it is instantiated.
	[Bootstrap.tag]: {
	enabled: true,
	list: [
	'/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
	'/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
	'/dnsaddr/bootstrap.libp2p.io/p2p/QmZa1sAxajnQjVM8WjWXoMbmPd7NsWhfKsPkErzpm9wGkp',
	'/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
	'/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
	]
	}
	}
	}
	})

	// UI elements
	const status = document.getElementById('status')
	const output = document.getElementById('output')

	output.textContent = ''

	function log (txt) {
	console.info(txt)
	output.textContent += `${txt.trim()}\n`
	}

	// Listen for new peers
	libp2p.on('peer:discovery', (peerId) => {
	log(`Found peer ${peerId.toB58String()}`)
	})

	// Listen for new connections to peers
	libp2p.connectionManager.on('peer:connect', (connection) => {
	log(`Connected to ${connection.remotePeer.toB58String()}`)
	})

	// Listen for peers disconnecting
	libp2p.connectionManager.on('peer:disconnect', (connection) => {
	log(`Disconnected from ${connection.remotePeer.toB58String()}`)
	})

	await libp2p.start();
	status.innerText = 'libp2p started!';
	log(`libp2p id is ${libp2p.peerId.toB58String()}`);

	libp2p.pubsub.subscribe('general');
	libp2p.pubsub.on('general', ({ data }) => {
	console.log('received', data);
	log(`#general: ${new TextDecoder().decode(data)}`);
	});

	setTimeout(() => {
	libp2p.pubsub.publish('general', new TextEncoder().encode(`Hello: ${new Date()}`));
	}, 500);

	// Export libp2p to the window so you can play with the API
	window.libp2p = libp2p
	})
	{
	"name": "libp2p-in-browser",
	"version": "1.0.0",
	"description": "A libp2p node running in the browser",
	"main": "index.js",
	"browserslist": [
	"last 2 Chrome versions"
	],
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "parcel build index.html",
	"start": "parcel index.html"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"@babel/preset-env": "^7.13.0",
	"libp2p": "^0.30.0",
	"libp2p-bootstrap": "^0.12.1",
	"libp2p-gossipsub": "^0.8.0",
	"libp2p-mplex": "^0.10.0",
	"libp2p-noise": "^2.0.0",
	"libp2p-webrtc-star": "^0.20.0",
	"libp2p-websockets": "^0.14.0"
	},
	"devDependencies": {
	"@babel/cli": "^7.13.10",
	"@babel/core": "^7.13.0",
	"babel-plugin-syntax-async-functions": "^6.13.0",
	"babel-plugin-transform-regenerator": "^6.26.0",
	"babel-polyfill": "^6.26.0",
	"parcel-bundler": "1.12.3"
	}
	}