wip: add pubsub to file exchange

Author: fsdiogo

examples/exchange-files-in-browser/public/app.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const IPFS = require('ipfs')
+// const IPFS = require('ipfs')
 
 // Node
 const $nodeId = document.querySelector('.node-id')
@@ -22,6 +22,9 @@ const $allDisabledButtons = document.querySelectorAll('button:disabled')
 const $allDisabledInputs = document.querySelectorAll('input:disabled')
 const $allDisabledElements = document.querySelectorAll('.disabled')
 
+const FILES = []
+const workspace = location.hash
+
 let node
 let info
 let Buffer
@@ -33,6 +36,9 @@ let Buffer
 function start () {
   if (!node) {
     const options = {
+      EXPERIMENTAL: {
+        pubsub: true
+      },
       repo: 'ipfs-' + Math.random(),
       config: {
         Addresses: {
@@ -41,7 +47,8 @@ function start () {
       }
     }
 
-    node = new IPFS(options)
+    // node = new IPFS(options)
+    node = new window.Ipfs(options)
 
     Buffer = node.types.Buffer
 
@@ -52,16 +59,57 @@ function start () {
           updateView('ready', node)
           onSuccess('Node is ready.')
           setInterval(refreshPeerList, 1000)
+          // setInterval(sendFileList, 10000)
         })
         .catch((error) => onError(err))
+
+      subscribeToWorkpsace()
     })
   }
 }
 
+/* ===========================================================================
+   Pubsub
+   =========================================================================== */
+
+const messageHandler = (message) => {
+  const myNode = info. id
+  const hash = message.data.toString()
+  const messageSender = message.from
+
+  console.log('Node ID:', myNode)
+  console.log('Received message from:', messageSender)
+  console.log('Message:', hash)
+
+  // append new files when someone uploads them
+  if (myNode !== messageSender && !isFileInList(hash)) {
+    console.log(':: Append new file')
+    $multihashInput.value = hash
+    getFile()
+  }
+}
+
+const subscribeToWorkpsace = () => {
+  node.pubsub.subscribe(workspace, messageHandler)
+    .then(() => console.log(':: Subscribed to workspace:', workspace))
+}
+
+const publishHash = (hash) => {
+  const data = Buffer.from(hash)
+
+  node.pubsub.publish(workspace, data)
+    .then(() => console.log(':: Successfully published to workspace'))
+    .catch((error) => console.log(':: Error publishing:', error))
+}
+
 /* ===========================================================================
    Files handling
    =========================================================================== */
 
+const isFileInList = (hash) => FILES.indexOf(hash) !== -1
+
+const sendFileList = () => FILES.forEach((hash) => publishHash(hash))
+
 function appendFile (name, hash, size, data) {
   const file = new window.Blob([data], { type: 'application/octet-binary' })
   const url = window.URL.createObjectURL(file)
@@ -89,22 +137,27 @@ function appendFile (name, hash, size, data) {
   row.appendChild(downloadCell)
 
   $fileHistory.insertBefore(row, $fileHistory.firstChild)
+
+  publishHash(hash)
 }
 
 function getFile () {
-  const cid = $multihashInput.value
+  const hash = $multihashInput.value
 
   $multihashInput.value = ''
 
-  if (!cid) {
+  if (!hash) {
     return onError('No multihash was inserted.')
+  } else if (isFileInList(hash)) {
+    return onSuccess('The file is already in the current workspace.')
   }
 
-  node.files.get(cid)
+  node.files.get(hash)
     .then((files) => {
       files.forEach((file) => {
         if (file.content) {
-          appendFile(file.name, cid, file.size, file.content)
+          FILES.push(hash)
+          appendFile(file.name, hash, file.size, file.content)
           onSuccess(`The ${file.name} file was added.`)
           $emptyRow.style.display = 'none'
         }
@@ -260,6 +313,7 @@ function updateView (state, ipfs) {
 const startApplication = () => {
   // Setup event listeners
   $dragContainer.addEventListener('dragenter', onDragEnter)
+  $dragContainer.addEventListener('dragover', onDragEnter)
   $dragContainer.addEventListener('drop', onDrop)
   $dragContainer.addEventListener('dragleave', onDragLeave)
   $fetchButton.addEventListener('click', getFile)

examples/exchange-files-in-browser/public/index.html

@@ -84,7 +84,10 @@ <h2>Files</h2>
       </div>
     </main>
 
+    <script src="//unpkg.com/ipfs/dist/index.js"></script>
+    <script src="app.js"></script>
+
     <!-- The app bundled with IPFS -->
-    <script src="bundle.js"></script>
+    <!-- <script src="bundle.js"></script> -->
   </body>
 </html>