// DOM STUFF /////////////////////////////////////////////////////////////////// let divs = {}, spec_names = [ 'worker_id', 'ip', 'location', 'browser', 'os', 'state', 'fee', 'hit_created', 'hit_opened', 'hit_submitted', 'elapsed_time' ] divs.linkDOM = function(name){ divs[name] = document.getElementById(`${name}`) } spec_names.forEach(function(name){ divs.linkDOM(name) }) let request_time = timeStamp(), elapsed_time, hit_finished = false // SOCKET STUFF //////////////////////////////////////////////////////////////// let ws = new ReconnectingWebSocket('ws://localhost:8888/status/ws') let test = `{"property": "os", "value": "213.127.20.197"}` // fakeWs(test) // // function fakeWs(json){ // // // } ws.addEventListener('open', () => { // ws.send('hi server') }) ws.addEventListener('message', (event) => { console.log('message: ' + event.data) let data = JSON.parse(event.data) if(data.property === 'hit_opened') { hit_finished = false request_time = timeStamp() divs[data.property].innerHTML = `${request_time.format('dd mmm HH:MM:ss')}` } else if(data.property === 'hit_submitted'){ hit_finished = true; } else if(divs[data.property]) divs[data.property].innerHTML = `${data.value}` }) // ANIMATION STUFF ///////////////////////////////////////////////////////////// let frames, frames_per_sec = 10, current_frame = 0 function makeAnimation(){ let now, delta = 0, last = timeStamp(), step = 1/frames_per_sec function frame() { now = timeStamp() delta += Math.min(1, (now - last) / 1000) while(delta > step){ delta -= step update(step) } last = now requestAnimationFrame(frame) } requestAnimationFrame(frame) } function update(step){ if(!hit_finished) elapsed_time = `${new Date((Date.now() - request_time)).format('MM"m "ss"s"')}` divs['elapsed_time'].innerHTML = elapsed_time } makeAnimation() function timeStamp(){return window.performance && window.performance.now ? window.performance.now() : new Date().getTime()}