12. Check Web Worker Support
// In UI Thread
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code…
} else {
// Sorry! No Web Worker support…
}
14. Worker 만들기
// In UI Thread
var workerGary = new Worker("gary-in-IHU.js");
15. Worker를 일하게 하기
// In UI Thread
workerGary.postMessage("Ride a skateboard");
참고 : postMessage의 인자는 어떤 type이든 JSON Object로 처리된다.
16. Worker 코드
// In Worker Thread - gary-in-IHU.js
onmessage = function(e) {
if(e.data === "Ride a skateboard") {
rideSkateBoard();
};
};
17. Worker 코드
// In Worker Thread - gary-in-IHU.js
function rideSkateBoard () {
doAli();
doHeadSpin();
doSometingDifficult();
doSometingDangerous();
postMessage("Let’s eat ramen");
};
18. 결과를 가져오기
// In UI Thread
workerGary.onmessage = function(e) {
// The message from the worker :
if(e.data === "Let’s eat ramen") {
// Go to IHU and eat ramen…
};
};
20. Helpful Tips
// In Worker Thread
function callUi () {
postMessage({'cmd': methodName, 'args': args});
};
// In UI Thread
worker.onmessage = function(e) {
var fn = window[e.data.cmd];
fn(e.data.args);
};
UI Thread의 함수 호출하기.
21. Helpful Tips
// In Worker Thread
// logging from within the worker
function log (obj) {
callUi({'cmd': 'console.log', 'args': obj});
};
Worker Thread에서 로그 찍기.
22. Helpful Tips
<script id="worker1" type="javascript/worker">
// Worker Thread
</script>
<script>
// UI Thread
var blob = new Blob([
document.querySelector('#worker1').textContent
], { type: "text/javascript" });
var worker = new Worker(window.URL.createObjectURL(blob));
// Working Hard
</script>
한 파일 안에서 워커 만들기.(Blob Object 이용)
for Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+
23. Import Scripts
// In Worker Thread
importScript('workerUtil.js', 'jquery.hive.pollen.js');
24. Finishing Work
// In Worker Thread
self.close();
or
// In UI Thread
worker.terminate();
27. 할 수 있는 것
Javascript 객체 사용,
Navigator Object 사용,
Location Object 사용(Read Only),
Ajax,
setTimeout, setInterval,
underscore.js 사용,
jquery.hive.pollen.js 사용
28. Shared Worker
Web Worker
1 : 1
UI Thread : Worker Thread
Shared Worker
Many : Many
Link : http://coolaj86.github.io/html5-shared-web-worker-examples/
29. Shared Worker
UI Thread port
Shared Worker
Many : Many
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
참고 : Shared Worker끼린 전역공간을 공유한다.
30. Shared Worker 만들기
// In UI Thread
// SharedWorker(file, name)
var sWorker = new SharedWorker("sWorker.js", "a");
31. Shared Worker 또 만들기
// In UI Thread
// SharedWorker(file, name)
var sWorker = new SharedWorker("sWorker.js", "a");
var sWorker2 = new SharedWorker("sWorker.js", "a");
// 같은 Javascript파일을 같은 name에 여러개 연결 할 수 있다.
// 하나의 포트에 전역공간을 공유하는 worker 2개가 연결되었다.
32. 주의사항
// 가능
var sWorker = new SharedWorker("sWorker.js", "a");
var sWorker2 = new SharedWorker("sWorker.js", "b");
// 불가능 : 같은 파일만 같은 name에 연결 할 수 있다.
var sWorker = new SharedWorker("sWorker.js", "a");
var sWorker2 = new SharedWorker("sWorker2.js", "a");
33. 일하게 하기
// In UI Thread
sWorker.port.postMessage("Worker 1");
sWorker2.port.postMessage("Worker 2");
34. Shared Worker 코드
// sWorker.js
var global = 0;
self.onconnect = function(e) {
global++;
var port = e.ports[0];
port.onmessage = function(e) {
port.postMessage(e.data + " " + global);
};
};
35. 결과를 가져오기
// In UI Thread
var messageHandler = function(e) {
console.log(e.data);
};
sWorker.port.onMessage = messageHandler;
sWorker2.port.onMessage = messageHandler;
결과는?