JavaScript Web Workers #2

ผมเขียนเรื่อง Web Workers ตอนแรกไปแล้ว วันนี้จะมีเขียนต่อในกรณีที่เราอยากจะ include JavaScript Library อื่นๆ เราจะทำยังไง

ก่อนอื่นต้องย้ำว่าตัว Worker นั้นไม่สามารถจะเข้าถึงพวก DOM Element ใดๆ ได้เลย Library ตัวไหนมีเรียกพวก DOM พวกนี้ include เข้ามาจะเจ๊งเลย ดังนั้น Lib อย่าง jQuery ก็เรียกไม่ได้แน่นอน

คำสั่งที่เราใช้ include JavaScript คือ importScripts() ที่เราจะ include ครับ เช่น

importScripts('underscore-min.js');

ที่นี้มาดูตัวอย่าง JavaScript Worker ที่เรียกใช้ underscore.js เพื่อใช้ยัด JSON จาก Worker ต่อท้าย JSON ที่ master ส่งให้ worker

//master_worker.html
<script language="javascript">
	window.onload=function(){
		var wk=new Worker("./slave_worker.js");
		wk.addEventListener("message",function(oEvent){
			document.getElementById('display').textContent = JSON.stringify(oEvent.data);
		},false);

		wk.postMessage({
			master:'This is master Say Hello'
		});
	};
</script>
</head>
<body>
	<div id="display"></div>
</body>

Code master_worker.html ข้างบนเรียก Worker จาก file slave_worker.js แล้วเราก็ส่ง JSON {master:’This is master Say Hello’} ไปให้ทาง function postMessage

//slave_worker.js
importScripts('underscore-min.js');

self.addEventListener('message',function(e){
	var data=e.data;
	self.postMessage(_.extend(data,{worker:'This is worker Say Hello'}));
},false);

Code slave_worker.js ก็รับ JSON {master:’This is master Say Hello’} มาทาง addEventListener ‘message’ แล้วก็ยัด JSON {worker:’This is worker Say Hello’} เข้าไปด้วย function extend ของ underscore.js ก่อนที่จะส่ง JSON ที่เพิ่ม key:value ไปแล้วให้ master_worker.html ทาง postMessage

แล้ว {master:’This is master Say Hello’,worker:’This is worker Say Hello’} จะถูกส่งมาถึง addEventListener ‘message’ ของ master_worker.html แล้วแสดงค่าใน div

ถ้าลองเปลียนเป็น include jQuery ใน slave_worker.js ดูจะเจ๊งทันที

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);

Continue reading “JavaScript Web Workers” →

JavaScript check null

อาทิตย์ที่ผ่านมาเพื่อนผมในทีมได้รับ support case ว่า JavaScript API ที่ support อยู่ไม่รองรับค่า null ที่ server โผล่มา คือพอ server ส่ง null ลงมาเป็นค่าใน json แบบนี้

{"data":null}

แล้วที่ browser จะเจ๊งเลย แล้วโยน error TypeError: is null ทำนองนี้ขึ้นมา

พอลองตรวจสอบดูพบว่าปกติ server ถ้าข้อมูลมีค่ามันจะส่งลงมาเป็น object ซ้อนอีกทีแบบนี้

{"data":{"a":1,"h":"FFFFF"}}

พอลองดู code JavaScript ที่ใช้ดึงค่า จะ check ว่าเป็น object หรือไม่ ถ้าใช่ก็ดึงค่า propery a หรือ h ออกมาใช้งาน ทำนองนี้

function process_data(data){
	if(typeof data ==="object"){
		console.log('a='+a.a+',h='+a.h);
	}
}

code มันก็ดูเหมือนจะได้อ่ะนะ แต่พอ check typeof refference ดูก็พบว่า typeof จะ return ผลการตรวจค่า null ออกมาเป็น “object” เสมอ พอ server ส่ง null มาเลยไม่รอด ไป access key ที่ไม่มีจริงก็เลยเจ๊งกันไป ซึ่งผมเองก็เพิ่งรู้เหมือนกันว่า typeof มันใช้ตรวจค่า null ไม่ได้ เพราะปกติใช้แต่ if check เอา – -”

เลยลองดูง่ายๆ บน JavaScript Console (เซ็งตรงมันต้องเขียน line เดียวนี่แหละ)

var nn=null;
if(typeof nn==='object'){
	console.log('object');
}else{
	console.log('else');
} 
//print 'object'
if(nn){
	console.log('value');
}else{
	console.log('else');
} 
//print 'else'

ก็เลยได้รู้ว่า typeof มันใช้ check null ไม่ได้ (แต่ check undefined ได้นะ)