docs: update browser ipns publish example (#3596)

Applying all the magic from #3584, updating the dependencies, adding tips (address example) for working with a local node

Co-authored-by: Vasco Santos <vasco.santos@ua.pt>
Co-authored-by: Alen Šiljak <code@alensiljak.eu.org>
Co-authored-by: achingbrain <alex@achingbrain.net>

examples/browser-ipns-publish/index.html

@@ -137,6 +137,13 @@ <h1 class="aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy">
       >
         Connect
       </button>
+      <div
+        class="custom-block callout"
+        style="font-size: 0.75em; width: 75%; margin: 1em;"
+      >
+        For connecting to a local go-ipfs node, you can check its listening address similar to:
+        <pre>/ip4/127.0.0.1/tcp/4003/ws/p2p/QmTheirServerPeerId</pre>
+      </div>
     </div>
 
     <div class="ph3 mb3">

examples/browser-ipns-publish/index.js

@@ -10,6 +10,10 @@ const uint8ArrayToString = require('uint8arrays/to-string')
 const uint8ArrayFromString = require('uint8arrays/from-string')
 const { sha256 } = require('multiformats/hashes/sha2')
 
+const WS = require('libp2p-websockets')
+const transportKey = WS.prototype[Symbol.toStringTag]
+const filters = require('libp2p-websockets/src/filters')
+
 const { sleep, Logger, onEnterPress, catchAndLog } = require("./util");
 
 async function main() {
@@ -40,6 +44,17 @@ async function main() {
   ipfsBrowser = await IPFS.create({
     pass: "01234567890123456789",
     EXPERIMENTAL: { ipnsPubsub: true },
+    libp2p: {
+      config: {
+        transport: {
+          // This is added for local demo!
+          // In a production environment the default filter should be used
+          // where only DNS + WSS addresses will be dialed by websockets in the browser.
+          [transportKey]: {
+            filter: filters.all
+          }
+        }
+      }}
   });
   const { id } = await ipfsBrowser.id();
   log(`Browser IPFS ready! Node id: ${id}`);