WEB Worker DEMO
Updated
•1 min readRequirement: a web server, here we use python to run a simple web server
python.exe -m SimpleHTTPServer 8080 #For python3, use this command: python3 -m http.server 8080The HTML, master code
<!DOCTYPE HTML> <html> <head> <title>WEB Workder DEMO</title> <script> //Add version number to avoid cache; let workerJsFile = "worker.js?version=" + Date.now(); var worker = new Worker(workerJsFile); worker.onmessage = function (event) { document.getElementById("content").innerHTML = event.data; }; function startTimer() { worker.postMessage("START"); } function stopTimer() { worker.postMessage("STOP"); } </script> <style type="text/css"> table { border-collapse:true; border-spacing:0; } thead { background: lightgray; } </style> </head> <body> <table border="1px"> <thead> <tr> <th>Current Time</th> </tr </thead> <tbody> <tr> <td id="content"> </td> </tr> </tbody> <tfoot> <tr> <td> <button id="start" onclick="startTimer()">Start</button> <button id="stop" onclick="stopTimer()">Stop</button> </td> </tr> </tfoot> </table> </body> </html>The JS, worker code
var runningTimer; //await must in async function; async function report() { //const d = new Date(); var strPost = "Fail to get time from server"; const timeServer = "http://worldtimeapi.org/api/timezone/Asia/Shanghai"; let response = await fetch(timeServer); if (response.ok) { let json = await response.json(); strPost=json.datetime; } this.postMessage(strPost); } this.addEventListener("message", function (event) { let cmd = event.data; switch (cmd) { case "START": this.postMessage("Started"); clearInterval(runningTimer); runningTimer = setInterval(report, 1000); break; case "STOP": this.postMessage("Stopped"); clearInterval(runningTimer); break; } }, false);