X-Git-Url: https://git.kengrimes.com/?p=henge%2Fkiak.git;a=blobdiff_plain;f=client.js;h=cb3872fed4563fa532d7b6209d059e6a8c1a35af;hp=1c03da47abf91f6c3946d15596beb529b04b838c;hb=db732e6001859d6f3900ecf1d921513bc24a5c23;hpb=fee7676065c0016e999b2069b6a2b1a28d2b48d4 diff --git a/client.js b/client.js index 1c03da4..cb3872f 100644 --- a/client.js +++ b/client.js @@ -3,70 +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 pollServerTimeout(url, data, resolve, reject) { - console.log('Polling server with offer ' + data) - const request = XMLHttpRequest() - request.open('GET', url) +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) { - console.log('recieved answer from host ' + request.response) - resolve(request.response) + 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 errored out with ' + request.status) + reject('server unhandled response of status ' + request.status) } } - request.send(data) + request.send() } -/* TODO: Possible to pass resolve/reject to functions? */ -function pollServer(url, clientPubKey, func) { - return new Promise((resolve, reject) => { - func(url, clientPubKey, resolve, reject ) - }) -} -/* If https connection, should be already defined. If not https,*/ -function getPublicKey() { - /* Check local storage for public key */ - if (window.localStorage.getItem('public-key') === undefined) { - /* If doesn't exist, generate public and private key pair, store in - local storage */ - crypto.subtle.generateKey({name:'RSA-OAEP', length: 192}, true, ['encrypt', 'decrypt']) - .then((keyPair) => { - /* TODO: Do we need to store the private key as well? */ - window.localStorage.setItem('public-key', keyPair.type.public.toString()) +/* 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) }) - } - console.log(window.localStorage.getItem('public-key')) - return window.localStorage.getItem('public-key') + } + else { + clearTimeout() + } + }, 2000) } /* Create, set, and get client Offer. Poll server for host answer. Set host answer as client remoteDescription */ -const cpc = new RTCPeerConnection() -cpc.createOffer().then((offer) => { - console.log('creating offer which is ' + offer) - return cpc.setLocalDescription(offer) -}).then(() => { - console.log('sessionDescriptionInit = ' + cpc.localDescription) - const cpk = getPublicKey() - 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) + } + 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) + }) } - /* Poll for answer */ - return pollServer(window.location, offer, pollServerTimeout) -}).then((answer) => { - /* TODO: Extract sdp from answer ?*/ - console.log(answer) - /* State machine to parse answer */ - cpc.setRemoteDescription(answer.sdp) })