1. 워커란?
-
자바스크립 컴파일러 = node.js
-
웹워커(web worker) : 자바스크립는 원래 싱글스레드 이지만 비동기처리가 가능하도록 한 것
-
웹워커
클라이언트 환경에선 실행 안됨 웹호스팅을 해야 동작됨 -
PWA 작업 할 땐 워커가 필수!!!!!
💡 새 스레드 여는 키워드
new Warker(warker.js);
2. 사용방법
Warker 주고 받을 땐 postMessage로 보내고 onmessage로 받는다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 04_worker </title>
<script>
function aaa() {
var n = 0;
while(true){
n++;
document.getElementById("hh").innerHTML = n;
}
}
var w;
function bbb(){
//웹 워커는 웹서버 한경에서만 동작됨
if(w == undefined) { //만든 적 없었을 때
w =new Worker("worker.js"); //워커 객체를 만들면 자동 스타트 까지 함!
//워커가 post로 보낸 메세지 받기
w.onmessage = function(){
document.getElementById("hh").innerHTML = event.data;
}
} else {
alert('이미 워커가 실행중 입니다');
}
}
function ccc(){
if(w != undefined) {
w.terminate();
w = undefined;
}
}
//메인 스레드도 워커에게 메세지 전달 가능
// w.postMessage("Sam");
</script>
</head>
<body>
<!-- 워커(스레드) 사용하지 않았을 때 문제점 확인 해 보기 -->
<button onclick="aaa()">무한반복문!</button>
<h2 id="hh"></h2>
<hr>
<button onclick="alert(' 클릭 ')">버튼</button>
<hr>
<button onclick="bbb()">start Worker(스레드)</button>
<button onclick="ccc()">stop Worker(스레드)</button>
</body>
</html>var n=0;
while(true) {
n++;
// document.getElementById('hh').innerHTML = n;
// worker 에서는 UI작업이 불가능하다
// 메인 스레드에게 요청
postMessage(n);
}
// onmessage = function(evrnt){
// this.alert(event.data)
// }
보조기억장치