JavaScript Web Workers

วันนี้ได้ 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); 


จะเห็นได้ว่า Worker และ Main คุยกันด้วย addEventListener และ postMessage ครับ โดย addEventListener ใช้รับ data (event.data) จาก postMessage อย่างเดียว ส่วน postMessage ก็จะใช้ส่ง data ให้ addEventListener อย่างเดียวเช่นกัน (งงม่ะ)

เรามาดูตัวอย่างการใช้งานที่ผมเขียนขึ้นมาเป็น example ตอนเอาไปคุยกับ Dev ละกันครับ เป็น code ง่ายๆ ที่ยิง XMLHttpRequest ไปขอ data แบบ JSON

snapshot_worker.html

var quote_url="http://localhost:8080/quote.aspx";
var quote_data={
	'item':['GOOG'],
	'filter':['BID','ASK'],
};

window.onload=function(){
	//new Worker obj
	var snapshot=new Worker("./snapshot_worker.js");
	//addEventListner อันนี้ใช้รับ JSON ที่ Worker.postMessage ส่งมา
	snapshot.addEventListener("message",function(oEvent){
		document.getElementById('display').textContent = JSON.stringify(oEvent.data);
	},false);

	//ส่ง url กับ payload ให้ Worker
	snapshot.postMessage({
		url:chart_url,
		request_data:quote_data
	}); 
};
<body>
	<div id="display"></div>
</body>

snapshot_worker.js

//ยิง Ajax ไปหา server เพื่อขอข้อมูลครับ
var request=function(url,request_data){
	var req=new XMLHttpRequest();
	
	req.open("POST",url,true);
	req.setRequestHeader("Content-type","application/json");
	req.onreadystatechange=function(){
		if(req.readyState===4){
			if(req.status===200){
				//ส่ง JSON response จาก server ให้ addEventListner ของ snapshot_worker.html
				self.postMessage(req.responseText);
			}else{
				self.postMessage('Error');
			}
		}
	};
	req.send(JSON.stringify(request_data));
};
//addEventListner อันนี้ใช้รับ url กับ payload ที่ snapshot_worker.html postMessage ส่งมา
self.addEventListener('message',function(e){
	var data=e.data;
	request(data.url,data.request_data);
	self.postMessage('sending request url');

},false);

Feature นี้ตอนนี้มี IE 10, Chrome และ Firefox ที่ Support ครับ ซึ่งเท่าที่รู้ลูกค้าเจ้าที่ขอนี่จะเน้น IE 7, IE 8 และ IE 9 เป็นหลัก ก็ไม่รู้ว่าแม่มจะขอมาทำเห้อะไรเหมือนกัน -*-

ข้อเสียของ Web Workers เท่าที่อ่านและเจอมาคือตัว Workers จะ access DOM อะไรไม่ได้เลย, console.log ไม่ได้, alert ไม่ได้ และพวก Dev Tool ทั้งหลาย debug ไม่ได้ครับ (แม้จะเห็น code และใส่ break point ไปก็ตาม) เรียกได้ว่าถ้าพังทีนี่งงกันฉิบหายเลยครับ

อ้อ เวบที่ผมคิดว่าเจ๋งมากๆ อธิบาย Web Worker ได้ดี อ่านง่ายคือ Introducing HTML 5 Web Workers: Bringing Multi-threading to JavaScript @http://www.htmlgoodies.com โดยคุณ Robert Gravelle ครับ

Categories: Code, Diary, Tech | Tags: , , , | Leave a comment

Post navigation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Bomreview

โบ้มรีวิว โตแล้วจะรีวิวอะไรก็ได้

rerng.rak

Just another WordPress.com weblog

neizod

Smile! You’re at the best WordPress.com site ever

Admod's blog

just logs

freeclub

พยายามเขียนให้ยาวกว่าเฮดเดอร์ข้างบนจะได้ดูสวยๆ

Anontawong's Musings

a daily dose of a new perspective

TravelKanuman

Travel around the world

kemisara

Belle Kemisara Paladesh's Fan Site - เว็บไซต์แฟนคลับเบลล์ เขมิศรา พลเดช

eatandysummers

eat. travel. live.

Jonathan Fleming's Blog

A Photography Blog

Viewfinder - Street Photography Blog

Jimmy Yang Street Photography Blog

PinkiiGirl

Be one of those who change things and push the human race forward

บล็อกอะไรไม่รู้ของแบม

Ordinary guy blogging about comic books, video games, movies and stuffs.

Pawoot Personal Blog & Think Tank

E-Business Man Daily Life and What I'm Thinking

Mahalarp

journeys & musics never ended ...

Tyson Robichaud Photo-blography

Tips, tricks, reviews and general rambling.

%d bloggers like this: