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 ดูจะเจ๊งทันที

Categories: Code, 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

Create a free website or 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: