X-Git-Url: https://git.kengrimes.com/?a=blobdiff_plain;f=client.js;h=cb3872fed4563fa532d7b6209d059e6a8c1a35af;hb=db732e6001859d6f3900ecf1d921513bc24a5c23;hp=8813f550da280b974e2ed144858aca2f12288d7c;hpb=d33866cf8b1a188ad9ab23a934986bfd1b4726cb;p=henge%2Fkiak.git

diff --git a/client.js b/client.js
index 8813f55..cb3872f 100644
--- a/client.js
+++ b/client.js
@@ -3,39 +3,7 @@ const root = document.createElement('div')
 document.title = "Strapp.io Client"
 body.appendChild(root)
 document.body = body
-
-/* Poll the server. Send get request, wait for timeout, send another request.
-   Do this until...? Can be used for either reconnecting or waiting for answer*/
-function pollServerTimeout(url, data, resolve, reject) {
-  console.log(`Polling server ${url} with`)
-  console.log(data)
-  const request = new XMLHttpRequest()
-  request.open('GET', url, true)
-  request.setRequestHeader('Content-Type', 'application/json' )
-  request.setRequestHeader('X-Strapp-Type', JSON.stringify(data))
-  request.onreadystatechange = () => {
-    if (request.status === 200) {
-      console.log(request.response)
-      resolve(request.response)
-    }
-    else if (request.status === 504) {
-      console.log('timed out, resending')
-      pollServerTimeout(url, data, resolve, reject)
-    }
-    else {
-      reject('server unhandled response of status ' + request.status)
-    }
-  }
-  console.log(data)
-  request.send()
-}
-
-/* TODO: All this does is wrap a function in a promise */
-function pollServer(url, clientPubKey, func) {
-  return new Promise((resolve, reject) => {
-    func(url, clientPubKey, resolve, reject )
-  })
-}
+const conf = {"iceServers": [{ "urls": "stun:stun.1.google.com:19302" }] }
 
 /* TODO: duplicate in both client.js and host.js */
 function getPublicKey() {
@@ -71,32 +39,144 @@ function getPublicKey() {
 
 }
 
+function postServer(url, data) {
+  const request = new XMLHttpRequest()
+  request.open('POST', url, true)
+  request.setRequestHeader('Content-Type', 'application/json' )
+  request.setRequestHeader('X-Strapp-Type', 'ice-candidate-submission')
+  request.send(data)
+}
+
+/* TODO: All this does is wrap a function in a promise */
+function pollServer(url, clientPubKey, func) {
+  return new Promise((resolve, reject) => {
+    func(url, clientPubKey, resolve, reject )
+  })
+}
+
+/* Poll the server. Send get request, wait for timeout, send another request.
+   Do this until...? Can be used for either reconnecting or waiting for answer*/
+function pollServerForAnswer(url, data, resolve, reject) {
+  const request = new XMLHttpRequest()
+  request.open('GET', url, true)
+  /* But there is no JSON? */
+  request.setRequestHeader('Content-Type', 'application/json' )
+  request.setRequestHeader('X-Strapp-Type', 'client-sdp-offer')
+  request.setRequestHeader('X-Client-Offer', JSON.stringify(data))
+  request.onreadystatechange = () => {
+    if (request.status === 200) {
+      if(request.readyState === 4) {
+        console.log('Client: Recieved response from Host')
+        console.log(request)
+        resolve(request.response)
+      }
+    }
+    else if (request.status === 504) {
+      console.log('timed out, resending')
+      pollServerTimeout(url, data, resolve, reject)
+    }
+    else {
+      reject('server unhandled response of status ' + request.status)
+    }
+  }
+  request.send()
+}
+
+/* Poll server for ice candidates until ice is complete */
+function pollServerForICECandidate(cpc) {
+  window.setInterval(() => {
+    if (cpc.iceGatheringState.localeCompare('complete') === 0) {
+      return new Promise((resolve, reject) => {
+         console.log('Client: Requesting ICE Candidates from server')
+         const request = new XMLHttpRequest()
+         request.open('GET', window.location, true)
+         request.setRequestHeader('Content-Type', 'application/json' )
+         request.setRequestHeader('X-Strapp-Type', 'ice-candidate-request')
+         request.onreadystatechange = () => {
+           if (request.status === 200) {
+             if(request.readyState === 4) {
+               console.log('Client: Recieved ICE Candidate from Host')
+               resolve(request.response)
+             }
+           }
+           else if (request.status === 204) {
+             console.log('Ice Candidate unavailable, trying again in one second')
+           }
+           else {
+             reject('server unhandled response of status ' + request.status)
+           }
+         }
+         request.send(cpc.pubKey)
+      }).then((response) => {
+        console.log('Client: Adding Ice Candidate ')
+        cpc.addIceCandidate(response.candidate)
+      }).catch((err) => {
+        console.log('pollServerForICECandidate: ' + err)
+      })
+    }
+    else {
+      clearTimeout()
+    }
+  }, 2000)
+}
+
 /* Create, set, and get client Offer. Poll server for host answer.
    Set host answer as client remoteDescription */
-const cpc = new RTCPeerConnection()
-console.log('creating offer')
-cpc.createOffer().then((offer) => {
-  return cpc.setLocalDescription(offer)
-})
-  .then(() => {
-  console.log('sessionDescriptionInit = ' + cpc.localDescription)
-  getPublicKey().then((cpk) => {
-    console.log('cpk is' + cpk)
-    let offer = {
-      cmd: '> sdp pubKey',
-      sdp: cpc.localDescription,
-      pubKey: cpk
+getPublicKey().then((cpk) => {
+  const cpc = new RTCPeerConnection(conf)
+  /* Start data channel */
+  sendChannel = cpc.createDataChannel("sendChannel");
+  sendChannel.onopen = () => {
+    console.log('client data channel on line')
+    sendChannel.onmessage = (message) => {
+      console.log(message.data)
     }
-    /* Poll for answer */
-    return pollServer(window.location, offer, pollServerTimeout)
-  }).then((answer) => {
-    //console.log(answer)
-    /* TODO: State machine to parse answer */
-    cpc.setRemoteDescription(answer.sdp)
-  }).catch( (err) => {
-    console.log('error in sdp handshake: ' + err)
-  })
+    sendChannel.send('Hi from the Client')
+  };
+  /* Start polling for ice candidate */
+
+
+  console.log(cpc.iceConnectionState)
+  cpc.oniceconnectionstatechange = () => {
+    console.log('iceConnectionState = ' + cpc.iceConnectionState)
+  }
+
+
+
+  cpc.onnegotiationneeded = () => {
+    cpc.createOffer().then((offer) => {
+      return cpc.setLocalDescription(offer)
+    })
+    .then(() => {
+      console.log('Client: Sending offer to host')
+      let offer = {
+        cmd: '> sdp pubKey',
+        sdp: cpc.localDescription,
+        pubKey: cpk.n
+      }
+      return pollServer(window.location, offer, pollServerForAnswer)
+    }).then((serverResponse) => {
+      const answer = JSON.parse(serverResponse)
+      console.log('Client: received host answer')
+      cpc.setRemoteDescription(answer.sdp).then(() => {
+        console.log('Client: Polling for ICE candidates')
+        pollServerForICECandidate(cpc)
+      })
+      cpc.onicecandidate = (event) => {
+        if (event.candidate) {
+          console.log('Client: Sending ice candidate to host')
+          postServer(window.location, JSON.stringify({
+            cmd: '> ice pubkey',
+            ice: event.candidate,
+            pubKey: cpk.n
+          }))
+        }
+        else {
+          console.log('Client: No more Ice Candidates to send')
+        }
+      }
+    }).catch( (err) => {
+      console.log('error in sdp handshake: ' + err)
+    })
+  }
 })
-  .catch((err) => {
-    console.log(err)
-  })