วันนี้ได้ mail จากลูกค้าเจ้านึง เขียนประมาณว่า “กูอยากใช้ Shared Web Workers (SWW) มึงช่วยทำไงก็ได้ให้ JavaScript API มึง support SWW ที หรือไม่งั้นมึงบอก design, protocol มา เดี๋ยวกูเขียน API ใหม่เอง (แต่มึงต้อง test, fix bug แล้ว support code ที่กูเขียนนะ – สัด)” ผมก็เลยต้องมานั่งหาว่าไอ้ Web Workers หรือ Shared Web Worker มันคือะไร เพราะไม่เคยได้ยินมาก่อน entry นี้จะเขียนถึง Web Workers ก่อนละกัน

Web Workers (Web Workers @Wikipedia) เป็น feature ของ HTML 5 ที่ทำให้สามารถรัน JavaScript แบบ multithread ได้ครับ

คือปกติ JavaScript มันเป็น single thread มันจะรันคำสั่งตาม queue ของมันเสมอ ไม่ว่าจะเป็นการ display, validate, ต่อ ajax, websocket หรือทำ function ต่างๆ ที่เราเขียน ทุกอย่างอยู่บน thread เดียวกันหมด ดังนั้นเวลามี function อะไรใน queue รันหนักๆ มันจะกระทบให้ทั้ง page ช้าไปหมดจนบางที browser จะขึ้น pop up มาถามว่า page กำลัง script อะไรบางอย่างทำให้มันช้าจน freeze นะ จะ kill page นี้ทิ้งไหม

เขาก็เลยคิด Web Workers ขึ้นมาเพื่อแตกงานอะไรที่หนักๆ ไปอีก thread นึงเลย จากที่ค้นๆ มาเขาจะยกตัวอย่างเป็นคำนวนค่า Pi ที่ต้องวน loop หนักๆ หรืออะไรที่ต้องคุยกับ server เยอะๆ แยกเป็น thread worker ไปแล้วให้ thread หลักรับผลการทำงานจาก thread ลูก (Worker) แบบ asynchronous ไปซะ

Concept หลักๆ ของการเขียน Web Workers คือ

ตัวแม่ (ชื่อ main.html ละกัน)

//new Worker object
var wk=new Worker("worker.js");
//ใช้ addEventListener เพื่อรับ message จาก Woker --> self.postMessage('worker got : '+data);
wk.addEventListener("message",function(oEvent){
	document.getElementById('display').textContent = oEvent.data;
	//จะ print 'worker got : Hello'
},false);

//start Worker และส่ง message ให้ Worker ด้วย postMessage
wk.postMessage('Hello'); 

worker.js

//ใช้ addEventListener เพื่อรับ message จาก Main --> wk.postMessage('Hello'); 
self.addEventListener('message',function(e){
	var data=e.data;
	//ใช้ postMessage เพื่อส่งกลับให้ Main
	self.postMessage('worker got : '+data);
},false); 

Continue reading “JavaScript Web Workers” →