diff --git a/public/workers/message_packet_worker.js b/public/workers/message_packet_worker.js new file mode 100644 index 0000000..df900fd --- /dev/null +++ b/public/workers/message_packet_worker.js @@ -0,0 +1,69 @@ +/** + * Web worker handling message API. + * When sending quickly multiple request, + * a single packet of message merging all request' responses is returned + */ + +const DELAY_BEFORE_SEND = 200; +const queue = []; +let messagePacket = []; +onmessage = async(e) => { + let packetLength + + const url = e.data.url; + const state = e.data.state; + const request = { + ApplicationState: state + }; + const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure()); + queue.push(request); + fetch(url, { + method: 'POST', + headers: new Headers({ + // eslint-disable-next-line @typescript-eslint/naming-convention + 'Content-Type': 'application/json' + }), + body: dataParsed + }) + .then((response) => + response.json() + ) + .then(async(json) => { + messagePacket.push.apply(messagePacket, json.messages); + queue.pop(); + + // The sleep allow the message packet to be filled by + // others requests before being sent as a single batch + // Reducing the wait time will reduce latency but increase error rate + let doLoop = true; + do { + packetLength = messagePacket.length; + await sleep(DELAY_BEFORE_SEND); + const newPacketLength = messagePacket.length; + doLoop = newPacketLength !== packetLength; + packetLength = newPacketLength; + } while (doLoop); + + if (queue.length <= 0 && messagePacket.length > 0) { + console.debug(`[GetFeedback] Packet size before sent: ${messagePacket.length}`) + postMessage(messagePacket) + messagePacket.splice(0); + } + }); +}; + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +function GetCircularReplacerKeepDataStructure() +{ + return (key, value) => { + if (key === 'parent') { + return; + } + + return value; + }; +} + diff --git a/public/workers/message_worker.js b/public/workers/message_worker.js index 1996d83..f8fef7a 100644 --- a/public/workers/message_worker.js +++ b/public/workers/message_worker.js @@ -1,16 +1,15 @@ -const DELAY_BEFORE_SEND = 200; -const queue = []; -let messagePacket = []; -onmessage = async(e) => { - let packetLength +/** + * Web worker handling message API. + * Return a message of the request. + */ +onmessage = async(e) => { const url = e.data.url; const state = e.data.state; const request = { ApplicationState: state }; const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure()); - queue.push(request); fetch(url, { method: 'POST', headers: new Headers({ @@ -23,33 +22,10 @@ onmessage = async(e) => { response.json() ) .then(async(json) => { - messagePacket.push.apply(messagePacket, json.messages); - queue.pop(); - - // The sleep allow the message packet to be filled by - // others requests before being sent as a single batch - // Reducing the wait time will reduce latency but increase error rate - let doLoop = true; - do { - packetLength = messagePacket.length; - await sleep(DELAY_BEFORE_SEND); - const newPacketLength = messagePacket.length; - doLoop = newPacketLength !== packetLength; - packetLength = newPacketLength; - } while (doLoop); - - if (queue.length <= 0 && messagePacket.length > 0) { - console.debug(`[GetFeedback] Packet size before sent: ${messagePacket.length}`) - postMessage(messagePacket) - messagePacket.splice(0); - } + postMessage(json.messages) }); }; -function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); -} - function GetCircularReplacerKeepDataStructure() { return (key, value) => { diff --git a/src/Components/MessagesSidebar/MessagesSidebar.tsx b/src/Components/MessagesSidebar/MessagesSidebar.tsx index c166e18..c3fc8bf 100644 --- a/src/Components/MessagesSidebar/MessagesSidebar.tsx +++ b/src/Components/MessagesSidebar/MessagesSidebar.tsx @@ -30,7 +30,7 @@ function UseWorker( React.useEffect(() => { myWorker.onmessage = (event) => { - setMessages(messages.concat(event.data as IMessage[])); + setMessages(event.data as IMessage[]); }; }, [messages, setMessages]); }