A bit of coloring in

web-client/answerScript.js

@@ -1,3 +1,35 @@
+function el(type, style, content) {
+  const element = document.createElement(type);
+  element.setAttribute('class', style);
+  element.append(content);
+  return element;
+}
+
+const UI = {
+  createMessageElement: function(style, message) {
+    const conversation =  document.getElementById('messages');
+    const messageElement = el('p', style + ' message', message);
+    conversation.append(messageElement);
+
+    const d = new Date();
+    const time = el('span', 'time', [
+      d.getHours().toString().padStart(2, '0'),
+      d.getMinutes().toString().padStart(2, '0'),
+      d.getSeconds().toString().padStart(2, '0')
+    ].join(':'));
+    messageElement.append(time);
+  },
+  messageTextBoxValue: function() {
+    return document.getElementById('message-text-box').value;
+  },
+  sendMessageButton: function() {
+    return document.getElementById('send-message-button');
+  },
+  setConnectionState: function(state) {
+    const stateEl = document.getElementById('connection-state');
+    stateEl.innerHTML = state;
+  }
+};
 (function (){
   const connectionParam = getQueryParameter('connection');
   const parsedConnection = atob(connectionParam).split(',');
@@ -52,13 +84,13 @@ function createRemoteConnection(connectionMetadata) {
     }
   };
   connection.ondatachannel = (e) => {
-    UI.setConnectionState('received channel');
+    UI.setConnectionState('received channel: ' + JSON.stringify(e));
     const channel = e.channel;
-    console.dir(channel);
-    const sendButton = document.getElementById('sendDataBtn');
+    console.log(channel);
+    const sendButton = UI.sendMessageButton();
     sendButton.addEventListener('click', sendMessage.bind(null, channel), false);
     channel.onopen = () => {
-      console.log('channel open');
+      console.log('open');
       UI.setConnectionState('channel open');
     };
     channel.onmessage = (msg) => {
@@ -67,25 +99,8 @@ function createRemoteConnection(connectionMetadata) {
   };
 }
 
-const UI = {
-  createMessageElement: function(style, message) {
-    const conversation =  document.getElementById('messages');
-    const messageElement = document.createElement('p');
-    messageElement.setAttribute('class', style);
-    messageElement.append(message);
-    conversation.append(messageElement);
-  },
-  messageInputValue: function() {
-    return document.getElementById('sendData').value;
-  },
-  setConnectionState: function(state) {
-    const stateEl = document.getElementById('connection-state');
-    stateEl.innerHTML = state;
-  }
-};
-
 function sendMessage(channel) {
-  const message = UI.messageInputValue();
+  const message = UI.messageTextBoxValue();
   UI.createMessageElement('from-me', message);
   channel.send(message);
 }

web-client/answerer.html

@@ -8,14 +8,13 @@
         <h1>Web Rtc</h1>
         <div>
             <p id="connection-state">Pending</p>
-            <textarea id="sendData"
+            <textarea id="message-text-box"
                 placeholder="Send a message"
             ></textarea>
             <br/>
-            <button id="sendDataBtn">Send Data</button>
+            <button id="send-message-button">Send Data</button>
         </div>
-        <div id="messages">
-        <div>
+        <div id="messages"></div>
         <script src="/answerScript.js"></script>
     </body>
 </html>

web-client/script.js

@@ -1,82 +1,69 @@
 (function (){
-    console.log('Hello');
-    const connectButton = document.getElementById('createConnectionBtn')
-    connectButton.addEventListener('click', createConnection, false)
+  console.log('Hello');
+  const connectButton = document.getElementById('createConnectionBtn');
+  connectButton.addEventListener('click', createConnection, false);
 })();
 
 function createConnection() {
-    const localConnection = new RTCPeerConnection();
-    const sendChannel = localConnection.createDataChannel('channel');
-    console.dir(sendChannel);
-    sendChannel.onopen = e => {
-        console.log('open')
-        console.log(e)
-    }
-    sendChannel.onclose = e => {
-        console.log('close')
-        console.log(e)
-    }
-    const connectionInfo = {};
-    localConnection.onicecandidate = e => {
-        if (e.candidate) {
-            const candidate = e.candidate.candidate;
-            connectionInfo.candidate = candidate;
-            const answererUrl = 'http://localhost:8080/answerer.html?connection=' + btoa(JSON.stringify(connectionInfo));
-            const createLink = document.createElement('a');
-            createLink.setAttribute('href', answererUrl);
-            createLink.setAttribute('target', 'new');
-            createLink.append('Open me ;)');
-            document.body.append(createLink);
-            const pollForConnection = setInterval(() => {
-                fetch(
-                    'http://localhost:8000/state/json'
-                ).then(response => {
-                    if (response.status !== 200) {
-                        throw new Error('bad status ' + response.status);
-                    }
-                    return response.json();
-                }).then(data => {
-                    if (data.description) {
-                        console.log('yes');
-                        clearInterval(pollForConnection);
-                        createRemoteConnection(data.description);
-                    }
-                    else {
-                        console.log('no');
-                    }
-                })
-            }, 5000)
-        }
-    }
-    localConnection.onicecandidateerror = err => {
-        console.log(err)
-    }
-    
-    localConnection.createOffer().then((desc) => {
-            connectionInfo.description = desc.sdp;
-            localConnection.setLocalDescription(desc);
-        }
-    )
-
-    function createRemoteConnection(desc) {
-        const remoteDesc = {
-            type: "answer",
-            sdp: desc
-        }
-        localConnection.setRemoteDescription(remoteDesc).then((e) => {
-            console.log(e)
+  const localConnection = new RTCPeerConnection();
+  const sendChannel = localConnection.createDataChannel('channel');
+  const connectionInfo = {};
+  localConnection.onicecandidate = e => {
+    if (e.candidate) {
+      const candidate = e.candidate.candidate;
+      connectionInfo.candidate = candidate;
+      const answererUrl = 'http://localhost:8080/answerer.html?connection=' + btoa(JSON.stringify(connectionInfo));
+      const createLink = document.createElement('a');
+      createLink.setAttribute('href', answererUrl);
+      createLink.setAttribute('target', 'new');
+      createLink.append('Open me ;)');
+      document.body.append(createLink);
+      const pollForConnection = setInterval(() => {
+        fetch(
+          'http://localhost:8000/state/json'
+        ).then(response => {
+          if (response.status !== 200) {
+            throw new Error('bad status ' + response.status);
+          }
+          return response.json();
+        }).then(data => {
+          if (data.description) {
+            console.log('yes');
+            clearInterval(pollForConnection);
+            createRemoteConnection(data.description);
+          }
+          else {
+            console.log('no');
+          }
         });
+      }, 5000);
     }
+  };
 
-    const sendButton = document.getElementById('sendDataBtn')
-    sendButton.addEventListener('click', sendMessage, false)
-    function sendMessage() {
-        const messageText = document.getElementById('sendData').value;
-        sendChannel.send(messageText);   
-    }
-    sendChannel.onmessage = (msg) => {
-        document.body.append(msg.data);
-    }
+  localConnection.createOffer().then((desc) => {
+    connectionInfo.description = desc.sdp;
+    localConnection.setLocalDescription(desc);
+  });
+
+  function createRemoteConnection(desc) {
+    const remoteDesc = {
+      type: 'answer',
+      sdp: desc
+    };
+    localConnection.setRemoteDescription(remoteDesc).then((e) => {
+      console.log(e);
+    });
+  }
+
+  const sendButton = document.getElementById('sendDataBtn');
+  sendButton.addEventListener('click', sendMessage, false);
+  function sendMessage() {
+    const messageText = document.getElementById('sendData').value;
+    sendChannel.send(messageText);   
+  }
+  sendChannel.onmessage = (msg) => {
+    document.body.append(msg.data);
+  };
 }
 
 

web-client/style.css

@@ -0,0 +1,41 @@
+body {
+  background-color: #fff5e3;
+  font-family: sans-serif;
+}
+
+#message-text-box {
+  width: 500px;
+  height: 50px;
+  border-radius: 8px;
+}
+
+#messages {
+  display: flex;
+  flex-direction:column;
+  width: 70%;
+  margin: auto;
+}
+
+.message {
+  width: 25%;
+  flex-basis: 100%;
+  border: 1px solid;
+  padding: 1%;
+  border-radius: 8px;
+  box-shadow: 2px 2px #a0a0a0f7;
+}
+
+.message .time {
+  font-size: x-small;
+  display: flex;
+  align-self:flex-end;
+}
+
+.from-me {
+  background-color: #dcf8c6;
+}
+
+.from-them {
+  background-color: #fff;
+  align-self:flex-end;
+}