X-Git-Url: https://git.kengrimes.com/?p=henge%2Fkiak.git;a=blobdiff_plain;f=client.js;h=cb3872fed4563fa532d7b6209d059e6a8c1a35af;hp=3f0aeec956e76f04201d65717744f4d645ffde92;hb=db732e6001859d6f3900ecf1d921513bc24a5c23;hpb=69adc9a3512752d627e126dde85c859fcba9fb63 diff --git a/client.js b/client.js index 3f0aeec..cb3872f 100644 --- a/client.js +++ b/client.js @@ -3,3 +3,180 @@ const root = document.createElement('div') document.title = "Strapp.io Client" body.appendChild(root) document.body = body +const conf = {"iceServers": [{ "urls": "stun:stun.1.google.com:19302" }] } + +/* TODO: duplicate in both client.js and host.js */ +function getPublicKey() { + return new Promise( (resolve, reject) => { + /* Check local storage for public key */ + if (!window.localStorage.getItem('public-key')) { + console.log('public key is undefined') + /* If doesn't exist, generate public and private key pair, store in + local storage */ + crypto.subtle.generateKey( + { name:'RSA-OAEP', + modulusLength: 2048, + publicExponent: new Uint8Array([0x01, 0x00, 0x01]), + hash: {name: "SHA-256"} + }, + true, + ['encrypt', 'decrypt'] + ).then((keyPair) => { + /* TODO: Do we need to store the private key as well? */ + crypto.subtle.exportKey('jwk', keyPair.publicKey) + .then((exportedKey) => { + window.localStorage.setItem('publicKey', exportedKey) + console.log('public key is' + window.localStorage.getItem('publicKey')) + resolve(exportedKey) + }) + + }) + } + else { + resolve(window.localStorage.getItem('publicKey')) + } + }) + +} + +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 */ +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) + }) + } +})