HTML Web Workers API


Web Worker คืออะไร?

Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ และไม่ส่งผลกระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไป อาทิเช่น การคลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ Web Worker จะทำงานอยู่เบื้องหลัง


การสนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ Web Workers อย่างเต็มรูปแบบ

APIChromeEdgeFirefoxSafariOpera
Web Workers4.010.03.54.011.5

ตัวอย่าง HTML Web Worker

ตัวอย่างด้านล่างสร้าง Web Worker อย่างง่ายที่นับตัวเลขในพื้นหลัง:

ตัวอย่าง

<p>นับเลข: <output id="result"></output></p><br>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<p><strong>หมายเหตุ:</strong> Internet Explorer 9 และเวอร์ชันก่อนหน้าไม่รองรับ Web Workers</p>

<script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("html/demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

นับเลข:




หมายเหตุ: Internet Explorer 9 และเวอร์ชันก่อนหน้าไม่รองรับ Web Workers

ในกรณีที่คุณลองใส่ code ตามนี้แล้วยังไม่แสดงผลการนับเลข นั่นเป็นเพราะคุณยังไม่มีไฟล์ demo_workers.js .ให้ทำการสร้างไฟล์ในโฟลเดอร์ที่มีข้อมูลแสดงผลของเว็บไซต์ เช่น httpdocs / public_html เป็นต้น โดยสามารถนำ code ด้านล่างไปใส่ในไฟล์ที่สร้างได้เลย

var i=0;
function timedCount()
{i=i+1;
postMessage(i);
setTimeout("timedCount()",500);}
timedCount();

ส่วนสำคัญของ code ด้านบนคือ postMessage() method ซึ่งใช้ในการโพสต์ข้อความกลับไปที่หน้า HTML

หมายเหตุ:โดยปกติแล้ว Web Worker จะไม่ใช้สำหรับสคริปต์ง่ายๆ ดังกล่าว แต่ใช้กับงานที่ใช้ CPU มาก


การสร้าง Web Worker Object

หลังจากเรามีไฟล์ web worker แล้ว เราต้องเรียกไฟล์จากหน้า HTML

บรรทัดต่อไปนี้จะตรวจสอบว่ามีผู้ปฏิบัติงานอยู่แล้วหรือไม่ หากไม่ใช่ จะสร้างวัตถุผู้ปฏิบัติงานเว็บใหม่และรัน code ใน “demo_workers.js”:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

จากนั้นเราสามารถส่งและรับข้อความจาก web worker ได้

เพิ่ม event listener “onmessage” ให้กับ web worker

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

เมื่อ web worker โพสต์ข้อความ code ภายใน event listener จะถูกดำเนินการ ข้อมูลจาก Web Worker ถูกเก็บไว้ใน event.data


การหยุด Web Worker

เมื่อ web worker object ถูกสร้างขึ้น, มันจะยังคงฟังข้อความต่อไป (แม้ว่าสคริปต์ภายนอกจะเสร็จสิ้นแล้วก็ตาม) จนกว่าจะสิ้นสุด

หากต้องการหยุดและทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ฟรี ให้ใช้ terminate()method:

w.terminate();


ใช้ Web Worker ซ้ำ

หากคุณตั้งค่าตัวแปร worker เป็น undefined หลังจากสิ้นสุดแล้ว คุณสามารถใช้ code ซ้ำได้:

w = undefined;

ตัวอย่าง Code Web Worker แบบเต็ม

เราได้เห็น  Worker code ใน .js ไฟล์แล้ว ด้านล่างนี้เป็น code สำหรับหน้า HTML:

ตัวอย่าง





<p>นับเลข: <output id="result2"></output></p><br>
<button onclick="startWorker2()">Start Worker</button> 
<button onclick="stopWorker2()">Stop Worker</button><br>
<br>
<p><strong>Note:</strong> Internet Explorer 9 และเวอร์ชันก่อนหน้านี้ไม่รองรับ Web Workers</p>

<script>
var w2;

function startWorker2() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w2) == "undefined") {
      w2 = new Worker("html/demo_workers.js");
    }
    w2.onmessage = function(event) {
      document.getElementById("result2").innerHTML = event.data;
    };
  } else {
    document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker2() { 
  w2.terminate();
  w2 = undefined;
}
</script>


นับเลข:




Note: Internet Explorer 9 และเวอร์ชันก่อนหน้านี้ไม่รองรับ Web Workers