From f881a740572f7f4523ed3af3f7d0f66637cbae72 Mon Sep 17 00:00:00 2001
From: Mathieu Dombrock <matdombrock@gmail.com>
Date: Sun, 26 Feb 2023 17:33:02 -0800
Subject: [PATCH] basic chat support

---
 client/index.html | 32 ++++++++++++++++++++-
 client/webrtc.js  | 72 +++++++++++++++++++++++++++++++++++++++++++++--
 dataChan.js       | 38 +++++++++++++++++++++++++
 test.js           | 10 +++++++
 4 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 dataChan.js
 create mode 100644 test.js

diff --git a/client/index.html b/client/index.html
index 1e932d7..0b8f664 100755
--- a/client/index.html
+++ b/client/index.html
@@ -15,9 +15,20 @@
     <div class="btn-wrap">
       <input type="button" id="start" onclick="start(true)" value="Connect"></input>
     </div>
+      <div id="chatWrap" class="chat-wrap" style="visibility:hidden">
+	<div id="msgArea" class="msg-area">
+	  MESSAG AREA<br>
+	</div>
+	<div class="chat-input">
+	  <input type="text" id="chatInput">
+	  <br><br>
+	  <input type="button" id="send" onclick="sendMsg()" value="send"></input>
+	</div>
+      </div>
     <div id="statusWrap" class="status-wrap" style="visibility: hidden">
       Status: <span id="status">Page Loaded</span>
     </div>
+
     <br>
     <div id="uuid">...</div>
     <script type="text/javascript">
@@ -46,6 +57,15 @@
     input[type="button"]:hover{
       background: var(--accent2);
     }
+    input[type="text"]{
+      background: rgb(45,45,45);
+      color:white;
+      font-size:1.1rem;
+      padding:0.5rem;
+      border: 2px solid white;
+      text-align:left;
+      width:calc(100% - 1rem);
+    }
     .rnd{
       border-radius:0.5rem;
     }
@@ -71,12 +91,22 @@
       background: rgb(33,33,33);
     }
     .status-wrap{
-      background: rgb(22,22,22);
+      background: rgb(22,55,22);
       padding: 0.5rem;
       height:4.5rem;
       resize: vertical;
       overflow-y: scroll;
     }
+    .chat-wrap{
+      background: rgb(33,33,33);
+    }
+    .msg-area{
+      background: rgb(65,65,65);
+      padding:1rem;
+    }
+    .chat-input{
+    	text-align:right;
+    }
     
   </style>
   </body>
diff --git a/client/webrtc.js b/client/webrtc.js
index f1ae079..4d9a218 100755
--- a/client/webrtc.js
+++ b/client/webrtc.js
@@ -3,6 +3,7 @@ let _s = {
   localStream: undefined,
   remoteVideo: undefined,
   peerConnection: undefined,
+  dataChannel: undefined,
   uuid: undefined,
   serverConnection: undefined,
   statusLog: ''
@@ -16,7 +17,7 @@ const peerConnectionConfig = {
 };
 
 function pageReady() {
-  showStatus(true);
+  showStatus(false);
   setStatus('Page Ready');
   _s.uuid = createUUID();
   document.getElementById('uuid').innerHTML = 'UUID: '+_s.uuid;
@@ -32,6 +33,14 @@ function pageReady() {
     audio: true,
   };
 
+  document.getElementById('chatInput').addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      document.getElementById("send").click();
+    }
+  }); 
+
+
   if(navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
   } else {
@@ -40,7 +49,11 @@ function pageReady() {
 }
 
 function showStatus(show=true){
-  document.getElementById('statusWrap').style.visibility = show ? "visible" : "hidden";
+  document.getElementById('statusWrap').style.visibility = show ? 'visible' : 'hidden';
+}
+
+function showChat(show=true){
+  document.getElementById('chatWrap').style.visibility = show ? 'visible' : 'hidden';
 }
 
 function setStatus(msg){
@@ -48,11 +61,64 @@ function setStatus(msg){
   document.getElementById('status').innerHTML = _s.statusLog;
 }
 
+function sendMsg(){
+  const content = _s.uuid + ': ' + document.getElementById('chatInput').value;
+  _s.dataChannel.send(content);
+  // write local
+  writeMsg(content.replace(_s.uuid, 'You'));
+  document.getElementById('chatInput').value = '';
+}
+
+function writeMsg(msg){
+  //alert(msg);
+  document.getElementById('msgArea').innerHTML += msg + '<br>';
+}
+
 function getUserMediaSuccess(stream) {
   _s.localStream = stream;
   _s.localVideo.srcObject = stream;
 }
 
+function setupDataChannel(){
+  _s.peerConnection.ondatachannel = (event) => {
+    event.channel.onmessage = (e) =>{
+      writeMsg(e.data); 
+    };
+    event.channel.onerror = (e) =>{
+      alert(e);
+    }
+    event.channel.onopen = (e) =>{
+      //alert('OPEN');
+    };
+    event.channel.onclose = (e) =>{
+      //alert('CLOSE');
+      sendMsg('>> Peer DisconnectedX!');
+    }
+  };
+
+
+  _s.dataChannel = _s.peerConnection.createDataChannel('dataChannel');
+  _s.dataChannel.onopen = () => {
+    // The data channel is now open
+    // You can now send data
+    // alert('DC OPEN');
+    _s.dataChannel.send(_s.uuid + ': CONNECTED!');
+    showChat(true);
+  }
+
+  _s.dataChannel.onmessage = function(event){
+    console.log(event);
+    alert('GOT MSG');
+  }
+
+  _s.dataChannel.onclose = function(event){
+    writeMsg('>> Peer Disconnected!');
+  }
+
+}
+
+
+
 function start(isCaller) {
   setStatus('Starting');
   _s.peerConnection = new RTCPeerConnection(peerConnectionConfig);
@@ -63,6 +129,8 @@ function start(isCaller) {
   if(isCaller) {
     _s.peerConnection.createOffer().then(createdDescription).catch(errorHandler);
   }
+  setupDataChannel();
+  writeMsg('>> Connected to peer!');
 }
 
 function gotMessageFromServer(message) {
diff --git a/dataChan.js b/dataChan.js
new file mode 100644
index 0000000..a2e8c48
--- /dev/null
+++ b/dataChan.js
@@ -0,0 +1,38 @@
+// Setting up a data connection in JS using WebRTC is relatively straightforward. First, you need to create a RTCPeerConnection object. This object will be used to establish the connection between two peers.
+
+// Create an RTCPeerConnection object
+let pc = new RTCPeerConnection();
+
+// Create a data channel
+let dataChannel = pc.createDataChannel('dataChannel');
+
+// Set up the ICE candidate handler
+pc.onicecandidate = (e) => {
+  if (e.candidate) {
+    // Send the candidate to the remote peer
+    sendIceCandidate(e.candidate);
+  }
+};
+
+// Set up the data channel handler
+dataChannel.onopen = () => {
+  // The data channel is now open
+  // You can now send data
+};
+
+// Create an offer
+pc.createOffer().then((offer) => {
+  // Set the local description
+  pc.setLocalDescription(offer);
+  // Send the offer to the remote peer
+  sendOffer(offer);
+});
+
+// When the remote peer sends an answer
+pc.setRemoteDescription(answer);
+
+// When the remote peer sends an ICE candidate
+pc.addIceCandidate(candidate);
+
+// Now the connection is established and you can send data using the dataChannel object
+
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..3796c5b
--- /dev/null
+++ b/test.js
@@ -0,0 +1,10 @@
+var dataChannel = new RTCDataChannel();
+
+// Set up an event listener for when a message is received
+dataChannel.onmessage = function(event) {
+  console.log('Message received: ' + event.data);
+};
+
+// Send a message
+dataChannel.send('Hello World!');
+