show live connections + copy to clipboard

server.js

@@ -9,17 +9,27 @@ process.setMaxListeners(0);
 const ecstatic = require(`ecstatic`)(`${__dirname}/static`);
 const socks = {};
 
+function genRandString() {
+  return randomstring.generate({
+    length: 3,
+    capitalization: `lowercase`
+  });
+}
+
 function callback(req, res) {
   const path = req.url;
 
   // index
   if (/^\/$/.test(path)) {
-    res.writeHead(301, {
-      Location: `/${randomstring.generate({
-        length: 3,
-        capitalization: `lowercase`
-      })}`
-    });
+    let Location = null;
+
+    // generate different path id if already being used
+    do {
+      randString = genRandString();
+      Location = `/${randString}`;
+    } while (socks[Location] && socks[Location].clients.length);
+
+    res.writeHead(301, {Location});
     res.end();
     return;
   }
@@ -58,13 +68,33 @@ function createSock(path) {
   sock.on(`connection`, conn => {
     clients.push(conn);
     console.log(`connected ${conn.id} ${path}`);
+
+    const sendConnections = () => {
+      clients.forEach(client => {
+        client.write(JSON.stringify({
+          __server_message__: {
+          data: {
+            connectionId: conn.id,
+            connections: clients.map(client => {
+              return {id: client.id}
+            })
+            .filter(x => (x.id !== conn.id))
+          }
+        }}));
+      });
+    }
+
+    sendConnections();
+
     conn.on(`close`, function() {
       console.log(`close ${conn.id}`);
       clients.splice(clients.indexOf(conn), 1);
+      sendConnections();
     });
   });
 
   sock.install(server, `${path}___`);
+  sock.clients = clients;
 
   return sock;
 }

static/index.html

@@ -13,10 +13,14 @@ <h1>streamlet</h1>
     <small>
       nothing is stored, only streamed. originally created this to quickly share data and files between devices.<br />
       path names map to channels. anyone in the same channel can view what's streamed.</small>
-      <input id="share-url" type="text" placeholder="share url" />
+      <div>
+        <input id="share-url" type="text" placeholder="share url" />
+      </div>
     </hgroup>
   </header>
 
+  <pre id="log"></pre>
+
   <form id="form">
     <div class="form-group">
       <label>Text</label>
@@ -34,9 +38,10 @@ <h1>streamlet</h1>
   <output id="output"></output>
 
   <footer id="footer">
-    <a href="https://github.com/miguelmota/streamlet" target="_blank">Fork me on github</a>
+    <a href="https://github.com/miguelmota/streamlet" target="_blank" title="fork this project on github">Fork me on github</a>
   </footer>
 
+  <script src="./scripts/zeroclipboard.min.js"></script>
   <script src="./scripts/bundle.js"></script>
 </body>
 </html>

static/scripts/bundle.js

@@ -9117,18 +9117,34 @@ const base64ToBlob = require('base64toblob');
 const path = window.location.pathname;
 const stream = shoe(`${path}___`);
 
+const log = document.querySelector(`#log`);
 const form = document.querySelector(`#form`);
 const input = document.querySelector(`#input`);
 const text = document.querySelector(`#text`);
 const file = document.querySelector(`#file`);
 const output = document.querySelector(`#output`);
 const shareUrl = document.querySelector(`#share-url`);
 
+function setClipboard(element) {
+  const client = new ZeroClipboard(element);
+
+  client.on(`copy`, event => {
+    element.textContent = `copied!`;
+    setTimeout(() => {
+      element.textContent = `copy`;
+    }, 3e3);
+  });
+}
+
 shareUrl.value = window.location.href;
 shareUrl.addEventListener(`click`, event => {
   event.currentTarget.select()
 }, false);
 
+function logMessage(data) {
+  log.innerHTML = JSON.stringify(data, null, 2);
+}
+
 function isBase64(text) {
   return /data:/gi.test(text);
 }
@@ -9170,6 +9186,17 @@ file.addEventListener(`change`, event => {
 
 stream.pipe(through(data => {
   console.log(`incoming:`, data.substr(0,20).concat(`...`));
+
+  try {
+    const json = JSON.parse(data);
+    if (json.__server_message__) {
+      logMessage(json.__server_message__.data);
+      return false;
+    }
+  } catch(error) {
+
+  }
+
   const doc = document.createDocumentFragment();
   const el = create(`div`);
   el.classList.add(`item`);
@@ -9198,12 +9225,15 @@ stream.pipe(through(data => {
 
   const a = create(`a`);
   a.appendChild(create(`text`)(url));
+  a.title = `view asset`;
   a.href = url;
   a.target = `_blank`;
   doc.appendChild(a);
 
   const dv = create(`article`);
 
+  let clipboardNode = null;
+
   if (/image/gi.test(mime)) {
     const img = create(`img`);
     img.src = data;
@@ -9222,11 +9252,15 @@ stream.pipe(through(data => {
   } else if (/(json|javascript|text)/gi.test(mime)) {
     const t = isBase64(data) ? atob(data.replace(/.*base64,/gi, ``)) : data;
     const pr = create(`pre`);
+    pr.id = `id_${Date.now()}`;
+    clipboardNode = pr;
     const tt = create(`text`)(t);
     pr.appendChild(tt);
     dv.appendChild(pr);
   } else {
     const pr = create(`pre`);
+    pr.id = `id_${Date.now()}`;
+    clipboardNode = pr;
     const t = create(`text`)(data);
     pr.appendChild(t);
     dv.appendChild(pr);
@@ -9237,14 +9271,28 @@ stream.pipe(through(data => {
   const filename = `${Date.now()}_${ext}`;
   const dla = create(`a`);
   dla.className = `download`;
+  dla.title = `download asset`;
   dla.href = url;
   dla.download = filename;
   const dlat = create(`text`)(`download`);
   dla.appendChild(dlat);
 
   const btd = create(`footer`);
-
-  btd.appendChild(dla)
+  const btdl = create(`div`);
+  btdl.appendChild(dla)
+  btd.appendChild(btdl)
+
+  if (clipboardNode) {
+    const cp = create(`a`);
+    cp.href='#'
+    cp.className = `copy`;
+    cp.title = `copy to clipboard`;
+    cp.dataset.clipboardTarget = clipboardNode.id;
+    const cpt = create(`text`)(`copy`);
+    setClipboard(cp);
+    cp.appendChild(cpt);
+    btdl.appendChild(cp)
+  }
 
   const dt = create(`time`);
   const dtt = create(`text`)((new Date()).toString());

static/scripts/client.js

@@ -7,18 +7,34 @@ const base64ToBlob = require('base64toblob');
 const path = window.location.pathname;
 const stream = shoe(`${path}___`);
 
+const log = document.querySelector(`#log`);
 const form = document.querySelector(`#form`);
 const input = document.querySelector(`#input`);
 const text = document.querySelector(`#text`);
 const file = document.querySelector(`#file`);
 const output = document.querySelector(`#output`);
 const shareUrl = document.querySelector(`#share-url`);
 
+function setClipboard(element) {
+  const client = new ZeroClipboard(element);
+
+  client.on(`copy`, event => {
+    element.textContent = `copied!`;
+    setTimeout(() => {
+      element.textContent = `copy`;
+    }, 3e3);
+  });
+}
+
 shareUrl.value = window.location.href;
 shareUrl.addEventListener(`click`, event => {
   event.currentTarget.select()
 }, false);
 
+function logMessage(data) {
+  log.innerHTML = JSON.stringify(data, null, 2);
+}
+
 function isBase64(text) {
   return /data:/gi.test(text);
 }
@@ -60,6 +76,17 @@ file.addEventListener(`change`, event => {
 
 stream.pipe(through(data => {
   console.log(`incoming:`, data.substr(0,20).concat(`...`));
+
+  try {
+    const json = JSON.parse(data);
+    if (json.__server_message__) {
+      logMessage(json.__server_message__.data);
+      return false;
+    }
+  } catch(error) {
+
+  }
+
   const doc = document.createDocumentFragment();
   const el = create(`div`);
   el.classList.add(`item`);
@@ -88,12 +115,15 @@ stream.pipe(through(data => {
 
   const a = create(`a`);
   a.appendChild(create(`text`)(url));
+  a.title = `view asset`;
   a.href = url;
   a.target = `_blank`;
   doc.appendChild(a);
 
   const dv = create(`article`);
 
+  let clipboardNode = null;
+
   if (/image/gi.test(mime)) {
     const img = create(`img`);
     img.src = data;
@@ -112,11 +142,15 @@ stream.pipe(through(data => {
   } else if (/(json|javascript|text)/gi.test(mime)) {
     const t = isBase64(data) ? atob(data.replace(/.*base64,/gi, ``)) : data;
     const pr = create(`pre`);
+    pr.id = `id_${Date.now()}`;
+    clipboardNode = pr;
     const tt = create(`text`)(t);
     pr.appendChild(tt);
     dv.appendChild(pr);
   } else {
     const pr = create(`pre`);
+    pr.id = `id_${Date.now()}`;
+    clipboardNode = pr;
     const t = create(`text`)(data);
     pr.appendChild(t);
     dv.appendChild(pr);
@@ -127,14 +161,28 @@ stream.pipe(through(data => {
   const filename = `${Date.now()}_${ext}`;
   const dla = create(`a`);
   dla.className = `download`;
+  dla.title = `download asset`;
   dla.href = url;
   dla.download = filename;
   const dlat = create(`text`)(`download`);
   dla.appendChild(dlat);
 
   const btd = create(`footer`);
-
-  btd.appendChild(dla)
+  const btdl = create(`div`);
+  btdl.appendChild(dla)
+  btd.appendChild(btdl)
+
+  if (clipboardNode) {
+    const cp = create(`a`);
+    cp.href='#'
+    cp.className = `copy`;
+    cp.title = `copy to clipboard`;
+    cp.dataset.clipboardTarget = clipboardNode.id;
+    const cpt = create(`text`)(`copy`);
+    setClipboard(cp);
+    cp.appendChild(cpt);
+    btdl.appendChild(cp)
+  }
 
   const dt = create(`time`);
   const dtt = create(`text`)((new Date()).toString());

static/styles/main.css

@@ -13,6 +13,7 @@ body {
 h1 {
   font-size: 32px;
   font-weight: normal;
+  display: inline-block;
 }
 
 input[type="text"],
@@ -23,6 +24,16 @@ textarea {
   padding: 5px;
 }
 
+#log {
+  width: 100%;
+  max-height: 120px;
+  color: #aaa;
+  overflow: auto;
+  font-size: 9px;
+  white-space: pre-wrap;
+  margin-bottom: 20px;
+}
+
 #header {
   margin: 0 0 25px 0;
 }
@@ -32,8 +43,8 @@ textarea {
 }
 
 #header hgroup small {
+  display: inline-block;
   font-size: 9px;
-  display: block;
   margin: 10px 0 10px 0;
   color: #999;
 }
@@ -105,8 +116,12 @@ textarea {
   justify-content: space-between;
 }
 
-#output .item .download {
- display: inline-flex;
+#output .item footer .download {
+  margin-right: 5px;
+}
+
+#output .item footer .left {
+  display: inline-flex;
   align-items: flex-start;
 }