WIP

ScaleDrone · Sep 2, 2017 · a624954 · a624954
1 parent 8f8d82c
commit a624954
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -24,14 +24,6 @@
       display: flex;
       flex-direction: column;
     }
-    .header {
-      line-height: 76px;
-      padding: 0 30px;
-      border-bottom: 1px solid rgba(156, 172, 172, 0.2);
-    }
-    .header__emoji {
-      margin-right: 20px;
-    }
     .messages {
       flex-grow: 1;
       padding: 20px 30px;
@@ -44,6 +36,9 @@
     .message--mine {
       align-items: flex-end;
     }
+    .message--theirs {
+      align-items: flex-start;
+    }
     .message__name {
       padding: 10px 0;
     }
@@ -70,6 +65,7 @@
       flex-grow: 1;
       padding: 0 30px;
       font-size: 16px;
+      background: transparent;
     }
     button {
       border: none;
@@ -82,28 +78,17 @@
 </head>
 <body>
   <div class="content">
-    <div class="header">
-      <span class="header__emoji">🐵</span>
-      <span class="header__text">Hello Serge!</span>
-    </div>
     <div class="messages">
-      <div class="message message--theirs">
-        <div class="message__name">🐵 Serge</div>
-        <div class="message__bubble">How long will I have to wait for this sofa?</div>
-      </div>
-      <div class="message message--mine">
-        <div class="message__name">🐵 Serge</div>
-        <div class="message__bubble">How long will I have to wait for this sofa?</div>
-      </div>
+
     </div>
-    <div class="footer">
+    <form class="footer" onsubmit="return false;">
       <input type="text" placeholder="Your message..">
       <button type="submit">Send</button>
-    </div>
+    </form>
   </div>
 
   <template data-template="message">
-    <div class="message message--theirs">
+    <div class="message">
       <div class="message__name"></div>
       <div class="message__bubble"></div>
     </div>

diff --git a/script.js b/script.js
@@ -1,4 +1,22 @@
-const roomHash = 'test';
+const possibleEmojis = [
+  '🐀','🐁','🐭','🐹','🐂','🐃','🐄','🐮','🐅','🐆','🐯','🐇','🐐','🐑','🐏','🐴',
+  '🐎','🐱','🐈','🐰','🐓','🐔','🐤','🐣','🐥','🐦','🐧','🐘','🐩','🐕','🐷','🐖',
+  '🐗','🐫','🐪','🐶','🐺','🐻','🐨','🐼','🐵','🙈','🙉','🙊','🐒','🐉','🐲','🐊',
+  '🐍','🐢','🐸','🐋','🐳','🐬','🐙','🐟','🐠','🐡','🐚','🐌','🐛','🐜','🐝','🐞',
+];
+function randomEmoji() {
+  var randomIndex = Math.floor(Math.random() * possibleEmojis.length);
+  return possibleEmojis[randomIndex];
+}
+
+const emoji = randomEmoji();
+const name = Math.round(Math.random() * 100) + ''; //prompt("What's your name?");
+
+// Generate random room name if needed
+if (!location.hash) {
+  location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
+}
+const roomHash = location.hash.substring(1);
 
 // TODO: Replace with your own channel ID
 const drone = new ScaleDrone('63o6Zfoz6yeAcJDG');
@@ -9,30 +27,45 @@ const configuration = {
     url: 'stun:stun.l.google.com:19302'
   }]
 };
+// Scaledrone room used for signaling
 let room;
 let pc;
 let dataChannel;
-window.dataChannel = dataChannel;
 
 drone.on('open', error => {
   if (error) {
     return console.error(error);
   }
+  let isOfferer;
+  let members = [];
   room = drone.subscribe(roomName);
   room.on('open', error => {
-    console.log('Connected to signaling server');
     if (error) {
-      console.error(error);
+      return console.error(error);
     }
+    console.log('Connected to signaling server');
   });
   // We're connected to the room and received an array of 'members'
   // connected to the room (including us). Signaling server is ready.
-  room.on('members', members => {
-    console.log('Connected members in signaling server room', members);
+  room.on('members', m => {
+    members = m;
     // If we are the second user to connect to the room we will be creating the offer
-    const isOfferer = members.length === 2;
+    isOfferer = members.length === 2;
     startWebRTC(isOfferer);
   });
+
+  room.on('member_join', member => {
+    members.push(member);
+  });
+
+  room.on('member_leave', member => {
+    const index = members.findIndex(m => m.id === member.id);
+    members.splice(index, 1);
+    // Quickfix: If the parter leaves we need to refresh the page to reset everything
+    if (members.length === 1) {
+      location.reload();
+    }
+  });
 });
 
 // Send signaling data via Scaledrone
@@ -44,6 +77,7 @@ function sendSignalingMessage(message) {
 }
 
 function startWebRTC(isOfferer) {
+  console.log('Starting WebRTC in as', isOfferer ? 'offerer' : 'waiter');
   pc = new RTCPeerConnection(configuration);
 
   // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
@@ -79,6 +113,7 @@ function startWebRTC(isOfferer) {
     if (message.sdp) {
       // This is called after receiving an offer or answer from another peer
       pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
+        console.log('pc.remoteDescription.type', pc.remoteDescription.type);
         // When receiving an offer lets answer it
         if (pc.remoteDescription.type === 'offer') {
           console.log('Answering offer');
@@ -102,27 +137,57 @@ function localDescCreated(desc) {
 
 // Hook up data channel event handlers
 function setupDataChannel() {
-  console.log('>', dataChannel.readyState);
-  dataChannel.onopen = function() {
-    console.log('Data channel is open', arguments);
-    document.body.style.opacity = 1;
-    dataChannel.send(JSON.stringify({foo: 'bar', content: 'test'}))
-  }
-  dataChannel.onclose = function() {
-    console.log('Data channel is closed', arguments);
-    document.body.style.opacity = 0.2;
-  }
-  dataChannel.onmessage = function(event) {
-    console.log(arguments);
-    console.log('Received message from data channel', event.data);
-    insertMessageToDOM(JSON.parse(event.data));
+  checkDataChannelState();
+  dataChannel.onopen = checkDataChannelState;
+  dataChannel.onclose = checkDataChannelState;
+  dataChannel.onmessage = event =>
+    insertMessageToDOM(JSON.parse(event.data), false)
+}
+
+function checkDataChannelState() {
+  console.log('WebRTC channel state is:', dataChannel.readyState);
+  if (dataChannel.readyState === 'open') {
+    insertMessageToDOM({content: 'WebRTC data channel is now open'});
   }
 }
 
-function insertMessageToDOM(options) {
+function insertMessageToDOM(options, isFromMe) {
   const template = document.querySelector('template[data-template="message"]');
-  template.content.querySelector('.message__name').innerText = options.emoji + ' ' + options.name;
+  const nameEl = template.content.querySelector('.message__name');
+  if (options.emoji || options.name) {
+    nameEl.innerText = options.emoji + ' ' + options.name;
+  }
   template.content.querySelector('.message__bubble').innerText = options.content;
   const clone = document.importNode(template.content, true);
-  document.querySelector('.messages').appendChild(clone);
+  const messageEl = clone.querySelector('.message');
+  if (isFromMe) {
+    messageEl.classList.add('message--mine');
+  } else {
+    messageEl.classList.add('message--theirs');
+  }
+
+  const messagesEl = document.querySelector('.messages');
+  messagesEl.appendChild(clone);
+
+  // Scroll to bottom
+  messagesEl.scrollTop = messagesEl.scrollHeight - messagesEl.clientHeight;
 }
+
+const form = document.querySelector('form');
+form.addEventListener('submit', () => {
+  const input = document.querySelector('input[type="text"]');
+  const value = input.value;
+  input.value = '';
+
+  const data = {
+    name,
+    content: value,
+    emoji,
+  };
+
+  dataChannel.send(JSON.stringify(data));
+
+  insertMessageToDOM(data, true);
+});
+
+insertMessageToDOM({content: 'Chat URL is ' + location.href});