Better signaling with pubsub

cretz · Feb 10, 2019 · a2ea583 · a2ea583
1 parent 7762961
commit a2ea583
Show file tree

Hide file tree

Showing 7 changed files with 304 additions and 90 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/*.exe
diff --git a/README.md b/README.md
@@ -1,4 +1,51 @@
-Early sandbox repo playing around w/ getting signaling to work w/ WebRTC via IPFS.
+# WebRTC IPFS Signaling
 
-Result: IPFS is close but not quite ready for DHT. It doesn't have any bootstrappable peers that I can see and the built
-JS from current master is like 2.5MB minimized. Will be waiting...
+This project is a proof of concept to see whether we can use IPFS to do WebRTC signaling obviating the need for a
+separate server.
+
+### Goal 1 - Browser to Browser Signaling
+
+Status: **Accomplished**
+
+I currently have debugging turned on so the console logs do show some details. Steps:
+
+Navigate to https://cretz.github.io/webrtc-ipfs-signaling/browser-offer.html. It will redirect to a version with a
+random URL hash. (Of course, you could navigate to a hand-entered URL hash). Take the URL given on that page and, in
+theory, open it up with the latest Chrome or FF anywhere in the world (that doesn't require TURN). After a few seconds,
+the offer/answer will communicate and WebRTC will be connected.
+
+Quick notes:
+
+* It may seem like you need some kind of server to share that URL hash, but that's just an example to make it easier. It
+  could be any preshared value, though you'll want it unique and may want to do other forms of authentication once
+  connected. E.g. one person could just go to
+  https://cretz.github.io/webrtc-ipfs-signaling/browser-offer.html#someknownkey and the other person could just go to
+  https://cretz.github.io/webrtc-ipfs-signaling/browser-answer.html#someknownkey
+* This works with `file:///` on Chrome and FF too, even across each other and even with http domains.
+* I have not tested mobile.
+* This uses js-ipfs's pubsub support which is in an experimental state. I even hardcode a swarm to
+  https://ws-star.discovery.libp2p.io/. So it probably won't work if this repo goes stale (which it likely will).
+* js-ipfs is pretty big at > 600k right now.
+* You might ask, "Why use WebRTC at all if you have a PubSub connection?" The features of WebRTC are many, in fact with
+  the latest Chrome release, I am making a screen sharing tool requiring no local code.
+* This is just a tech demo so I took a lot of shortcuts like not supporting restarts, poor error handling, etc. It would
+  be quite trivial to have multiple subscribers to a topic and group chat with multiple 
+* Security...not much. Essentially you need to do some other form of security (WebRTC peerIdentity? app level ID verify
+  once connected? etc). In practice, this is like an open signaling server.
+
+**How it Works**
+
+It's quite simple. Both sides subscribe t a pubsub topic on the preshared identifier. Then I just send JSON'd
+[RTCSessionDescription](https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription)s. Specifically, the
+offer side sends the offer and waits for an answer whereas the answer side waits for an offer then sends an answer.
+
+### Goal 2 - Browser to Native App Signaling
+
+Status: **Failing**
+
+I was pretty sure I could easily hook up [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs) with
+[pions/webrtc](https://github.com/pions/webrtc) and be all good. Although `pions/webrtc` is beautifully built, go-ipfs
+is not and very much not developer friendly for reading code or embedding. I was forced to use
+[ipsn/go-ipfs](https://github.com/ipsn/go-ipfs) which re-best-practicizes the deps. I have the code at `cli_offer.go`
+and while it looks right, the JS side cannot see the PubSub messages. I have a lot of annoying debugging to do in that
+unfriendly codebase.
diff --git a/browser-answer.html b/browser-answer.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>WebRTC IPFS Signalling Answerer</title>
-    <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
+    <title>WebRTC IPFS Signaling Answerer</title>
+    <script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
     <!-- <script src="js-ipfs.min.js"></script> -->
     <script src="browser.js"></script>
   </head>
   <body>
-      <h3>WebRTC IPFS Signalling Answerer</h3>
-      <div>
-        <strong>URL to offer:</strong>
-        <a id="offerUrl"></a>
-        <button id="regenerate">Restart and Regenerate</button>
-      </div>
-      <hr />
+    <h3>WebRTC IPFS Signaling Answerer</h3>
+    <div>
+      <strong>URL to offer:</strong>
+      <a id="offerUrl"></a>
+      <button id="regenerate">Restart and Regenerate</button>
+    </div>
+    <hr />
     <div>
       <label for="chat">Chat:</label>
       <textarea id="chat" style="width: 100%" rows="15" placeholder="(waiting for chat to start)" readonly></textarea>
@@ -38,8 +38,6 @@ <h3>WebRTC IPFS Signalling Answerer</h3>
       }
       // Create IPFS and do everything else once ready
       newIPFS(ipfs => {
-        console.log('IPFS ready')
-
         // Create new RTC conn
         const pc =  new RTCPeerConnection({
           // Could have a TURN server too, not worth it for the demo
@@ -55,19 +53,28 @@ <h3>WebRTC IPFS Signalling Answerer</h3>
           // No candidate means we're done
           if (e.candidate === null) {
             // Write the answer
-            writeIPFSFile(ipfs, 'answer', JSON.stringify(pc.localDescription), () => {
-              console.log('Added answer')
+            debug('Writing answer')
+            ipfsPublish(ipfs, JSON.stringify(pc.localDescription), () => {
+              debug('Added answer')
             })
           }
         }
 
         // Wait for offer
-        console.log('Waiting for offer')
-        waitForIPFSFile(ipfs, 'offer', offer => {
-          console.log('Got offer, adding answer')
-          pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(offer))).catch(console.error)
-          pc.createAnswer().then(d => pc.setLocalDescription(d)).catch(console.error)
-        })
+        debug('Waiting for offer')
+        let gotOffer = false
+        ipfsSubscribe(
+          ipfs,
+          data => {
+            const obj = JSON.parse(data)
+            debug('Received data', obj)
+            if (obj.type == 'offer') {
+              gotOffer = true
+              pc.setRemoteDescription(new RTCSessionDescription(obj)).then(() => {
+                pc.createAnswer().then(d => pc.setLocalDescription(d)).catch(console.error)
+              }).catch(console.error)
+            }
+          }, () => { })
       })
     </script>
   </body>

diff --git a/browser-offer.html b/browser-offer.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>WebRTC IPFS Signalling Offerer</title>
-    <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
+    <title>WebRTC IPFS Signaling Offerer</title>
+    <script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
     <!-- <script src="js-ipfs.min.js"></script> -->
     <script src="browser.js"></script>
   </head>
   <body>
-    <h3>WebRTC IPFS Signalling Offerer</h3>
+    <h3>WebRTC IPFS Signaling Offerer</h3>
     <div>
       <strong>URL to answer:</strong>
       <a id="answerUrl"></a>
@@ -38,8 +38,6 @@ <h3>WebRTC IPFS Signalling Offerer</h3>
       }
       // Create IPFS and do everything else once ready
       newIPFS(ipfs => {
-        console.log('IPFS ready')
-
         // Create new RTC conn
         const pc =  new RTCPeerConnection({
           // Could have a TURN server too, not worth it for the demo
@@ -50,19 +48,35 @@ <h3>WebRTC IPFS Signalling Offerer</h3>
         setupChatChannel(pc.createDataChannel('chat'))
 
         // Add the handlers
-        pc.oniceconnectionstatechange = e => console.log('RTC connection state change', pc.iceConnectionState)
+        pc.oniceconnectionstatechange = e => debug('RTC connection state change', pc.iceConnectionState)
         pc.onicecandidate = e => {
           // No candidate means we're done
           if (e.candidate === null) {
-            // Write the offer
-            writeIPFSFile(ipfs, 'offer', JSON.stringify(pc.localDescription), () => {
-              console.log('Added offer, waiting for answer')
-              // Wait for answer
-              waitForIPFSFile(ipfs, 'answer', answer => {
-                console.log('Got answer')
-                pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer))).catch(console.error)
+            // Keep publishing the offer until we receive the answer
+            let gotAnswer = false
+            ipfsSubscribe(
+              ipfs,
+              data => {
+                if (gotAnswer) return
+                const obj = JSON.parse(data)
+                debug('Received data', obj)
+                if (obj.type == 'answer') {
+                  gotAnswer = true
+                  pc.setRemoteDescription(new RTCSessionDescription(obj))
+                }
+              },
+              () => {
+                // This is the callback meaning subscribe completed so we can start sending offers
+                const sendOffer = () => {
+                  if (gotAnswer) return
+                  debug('Sending offer')
+                  ipfsPublish(ipfs, JSON.stringify(pc.localDescription), () => {
+                    // Try again in a couple of seconds
+                    setTimeout(() => sendOffer(), 2000)
+                  })
+                }
+                sendOffer()
               })
-            })
           }
         }
         pc.onnegotiationneeded = e =>

diff --git a/browser.js b/browser.js
@@ -1,25 +1,32 @@
 
 const debug = console.log
+// const debug = () => { }
 
 function createWindowHashIfNotPresent() {
   if (window.location.hash) return
   const base58Chars = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'
-  let array = new Uint8Array(40)
+  let array = new Uint8Array(20)
   window.crypto.getRandomValues(array);
   array = array.map(x => base58Chars.charCodeAt(x % base58Chars.length));
   window.history.replaceState(null, null, '#' + String.fromCharCode.apply(null, array))
 }
 
 function newIPFS(cb) {
   const ipfs = new Ipfs({
-    // repo: String(Math.random() + Date.now()),
+    repo: String(Math.random() + Date.now()),
+    EXPERIMENTAL: { pubsub: true },
+    config: {
+      Addresses: {
+        Swarm: ['/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star']
+      }
+    }
     // libp2p: {
     //   config: {
     //     dht: {
     //       enabled: true
     //     }
     //   }
-    // },
+    // }
     // relay: {
     //   enabled: true,
     //   hop: {enabled: true}
@@ -40,56 +47,33 @@ function newIPFS(cb) {
 }
 
 function ipfsDirBase() {
-  return window.location.hash.substring(1)
-}
-
-function writeIPFSFile(ipfs, file, content, cb) {
-  const path = '/' + ipfsDirBase() + '/' + file
-  const buf = ipfs.types.Buffer.from(content)
-  debug('Writing to ' + path)
-  writeIPFSFileMFS(ipfs, path, buf, cb)
-  // writeIPFSFileDHT(ipfs, path, buf, cb)
+  return 'wis-poc-' + window.location.hash.substring(1)
 }
 
-function writeIPFSFileMFS(ipfs, path, buf, cb) {
-  ipfs.files.write(path, buf, { create: true, truncate: true, parents: true}).then(() => {
-    console.log('Wrote to ' + path)
-    cb()
-  }).catch(console.error)
-}
-
-function writeIPFSFileDHT(ipfs, path, buf, cb) {
-  ipfs.dht.put(ipfs.types.Buffer.from(path), buf, (err) => {
-    if (err) throw err
-    console.log('Wrote to ' + path)
-    cb()
-  })
+function ipfsSubscribe(ipfs, handle, cb) {
+  ipfs.pubsub.subscribe(
+    ipfsDirBase(),
+    msg => handle(msg.data.toString('utf8')),
+    err => {
+      if (err) console.error('Failed subscribe', err)
+      else {
+        debug('Subscribe to ' + ipfsDirBase() + ' complete')
+        cb()
+      }
+    })
 }
 
-function waitForIPFSFile(ipfs, file, cb) {
-  const path = '/' + ipfsDirBase() + '/' + file
-  debug('Attempting to read from ' + path)
-  waitForIPFSFileMFS(ipfs, path, cb)
-  // waitForIPFSFileDHT(ipfs, path, cb)
-}
-
-function waitForIPFSFileMFS(ipfs, path, cb) {
-  ipfs.files.read(path, (err, buf) => {
-    if (err) {
-      debug('Failed reading', err.message)
-      if (!err.message || !err.message.endsWith(path + ' does not exist')) throw err
-      setTimeout(() => waitForIPFSFileMFS(ipfs, path, cb), 2000)
-    } else cb(buf.toString('utf8'))
-  })
-}
-
-function waitForIPFSFileDHT(ipfs, path, cb) {
-  ipfs.dht.get(ipfs.types.Buffer.from(path), (err, value) => {
-    if (err) {
-      debug('Failed reading', err.message)
-      setTimeout(() => waitForIPFSFileDHT(ipfs, path, cb), 2000)
-    } else cb(value.toString('utf8'))
-  })
+function ipfsPublish(ipfs, data, cb) {
+  ipfs.pubsub.publish(
+    ipfsDirBase(),
+    ipfs.types.Buffer.from(data),
+    err => {
+      if (err) console.error('Failed publish', err)
+      else {
+        debug('Publish complete')
+        cb()
+      }
+    })
 }
 
 function setupChatChannel(channel) {