Show room feature in Exchange Files Example

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

@@ -24,8 +24,12 @@ const $allDisabledButtons = document.querySelectorAll('button:disabled')
 const $allDisabledInputs = document.querySelectorAll('input:disabled')
 const $allDisabledElements = document.querySelectorAll('.disabled')
 
-const FILES = []
-const workspace = location.hash
+// Workspace inputs
+const $workspaceInput = document.querySelector('#workspace-input')
+const $workspaceBtn = document.querySelector('#workspace-btn')
+
+let FILES = []
+let workspace = location.hash
 
 let fileSize = 0
 
@@ -65,6 +69,8 @@ function start () {
         .catch((error) => onError(error))
 
       subscribeToWorkpsace()
+
+      window.addEventListener('hashchange', workspaceUpdated)
     })
   }
 }
@@ -87,9 +93,25 @@ const messageHandler = (message) => {
 
 const subscribeToWorkpsace = () => {
   node.pubsub.subscribe(workspace, messageHandler)
+    .then(() => {
+      const msg = `Subscribed to workspace ${workspace}`
+      $logs.innerHTML = msg
+    })
     .catch(() => onError('An error occurred when subscribing to the workspace.'))
 }
 
+// unsubscribe from old workspace and re-subscribe to new one
+const workspaceUpdated = () => {
+  node.pubsub.unsubscribe(workspace).then(() => {
+    // clear files from old workspace
+    FILES = []
+    $fileHistory.innerHTML = ''
+
+    workspace = location.hash
+    subscribeToWorkpsace()
+  })
+}
+
 const publishHash = (hash) => {
   const data = Buffer.from(hash)
 
@@ -327,6 +349,9 @@ const startApplication = () => {
   $dragContainer.addEventListener('dragleave', onDragLeave)
   $fetchButton.addEventListener('click', getFile)
   $connectButton.addEventListener('click', connectToPeer)
+  $workspaceBtn.addEventListener('click', () => {
+    window.location.hash = $workspaceInput.value
+  })
 
   start()
 }

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

@@ -31,6 +31,14 @@ <h3>Logs</h3>
             <pre id="logs" class="success">Initializing node...</pre>
           </div>
         </div>
+
+        <div>
+          <h3>Workspace</h3>
+          <div class="input-button">
+            <input id="workspace-input" type="text" placeholder="Enter workspace name" disabled />
+            <button id="workspace-btn" disabled>Join</button>
+          </div>
+        </div>
       </div>