X-Git-Url: https://www.kengrimes.com/gitweb/?p=henge%2Fkiak.git;a=blobdiff_plain;f=client.js;h=eab31877a4d57e701d2e962a75fc8cc67282c87b;hp=d389945e264e79bd95cbbb7b8a82cc4134ce0c3d;hb=0ff5eabbfe914a66b7f6b2a7f22f6469895ab826;hpb=b5c8f98ab42b8e7128441e4a456dfd4fc02f0e86 diff --git a/client.js b/client.js index d389945..eab3187 100644 --- a/client.js +++ b/client.js @@ -3,40 +3,7 @@ const root = document.createElement('div') document.title = "Strapp.io Client" body.appendChild(root) document.body = body -const conf = {"iceServers": [{ "url": "stun:stun.1.google.com:19302" }] } -/* 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 ${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) { - if(request.readyState === 4) { - console.log('Client: Recieved answer 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() -} - -/* 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() { @@ -72,53 +39,143 @@ function getPublicKey() { } -/* Create, set, and get client Offer. Poll server for host answer. - Set host answer as client remoteDescription */ -const cpc = new RTCPeerConnection(conf) -cpc.oniceconnectionstatechange = () => { - console.log('iceConnectionState = ' + cpc.iceConnectionState) +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) } -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 - } - cpc.onicecandidate = (event) => { - if (event.candidate) { - console.log('Client: Sending ice candidate to host') - pollServer(window.location, wsock.send(JSON.stringify({ - cmd: '> ice pubkey', - ice: event.candidate, - pubKey: cpk /* TODO: do we need to send this? */ - })), pollServerTimeout) - } - else { - /* Set up data channel here */ - console.log('Client: Finished setting up ICE candidates') + +/* 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) } } - /* TODO: start polling for ice candidates, and then addIceCandidate() to cpc */ - //pollServer(window.location, {ice}, pollServerTimeout) + 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 !== 'complete') { + 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) => { + cpc.addIceCandidate(response.candidate) + }).catch((err) => { + console.log('pollServerForICECandidate: ' + err) + }) + } + else { + clearTimeout() + } + }, 2000) +} - /* Poll for answer */ - return pollServer(window.location, offer, pollServerTimeout) - }).then((serverResponse) => { - const answer = JSON.parse(serverResponse) - console.log(answer) - /* TODO: State machine to parse answer */ - console.log('Setting Remote Description') - cpc.setRemoteDescription(answer.sdp) - }).catch( (err) => { - console.log('error in sdp handshake: ' + err) - }) -}).catch((err) => { - console.log(err) +/* Create, set, and get client Offer. Poll server for host answer. + Set host answer as client remoteDescription */ +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) + } + 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) + }) + } })