카테고리 없음
HTML5 웹 워커(동기 비동기 구분법)
Canyi
2022. 11. 1. 11:56
웹워커 미적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>워커미적용</title>
</head>
<body>
<button onclick="stopOperation()">워커 미적용선택</button>
<button onclick="awake()">깨어날 시간</button>
<div id="result"></div>
<script>
function stopOperation() {
var endTime = new Date().getTime() + 5000;
while(new Date().getTime() < endTime);
document.getElementById("result").innerHTML = "일어날 시간입니다";
}
function awake() {
alert("일어나자");
}
</script>
</body>
</html>
워커 미적용선택을 클릭 .. 다만 바로 일어날 시간입니다라는 string값이 나오는것이 아니라 5초 뒤에 나옴
while(new Date().getTime() < endTime); 가 시간을 잡아먹고 있기 때문이다.
동기 비동기 구분법
동기 : 반드시 return값이 있고 그 값을 return해야 한다?
비동기: return값이 있더라도 return값에 영향이 가지 않는다?
웹워커 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>워커적용</title>
</head>
<body>
<button onclick="applyWorker()">워커 적용선택</button>
<button onclick="awake()">깨어날 시간</button>
<div id="result"></div>
<script>
function applyWorker() {
if (window.Worker) {
worker = new Worker("worker.js"); //worker.js : 쓰레드
worker
.postMessage("워커가 동작합니다.");
worker.onmessage = function (event) {
document
.getElementById("result").innerHTML
= event.data;
}
}
else {
document
.getElementById("result")
.innerHTML = "현재 브라우저는 웹 워커를 지원하지 않습니다.";
}
}
function awake() {
alert("일어나자");
}
</script>
</body>
</html>worker.js
onmessage = function(event) {
var rcvData = event.data ; //워커가 동작합니다.라는 값이 event에 담겨있다.
stopOperation(); //먹통
var sendData = rcvData + "백그라운드에서 동작합니다.";
this.postMessage(sendData);
}
function stopOperation() {
//test();
var endTime = new Date().getTime() + 5000;
while(new Date().getTime() < endTime){};
}
다만 local에서 실행할 경우 에러남.. 서버를 가동하고 실핼을 해야됨
https://piaocanyi.tistory.com/222
BitNami html ip 배포 경로
ex) localhost/broswer.html http://127.0.0.1/broswer.html http://192.168.203.1/broswer.html
piaocanyi.tistory.com
bitnami를 설치한 다음 테스트방법은 위 링크 참고
bitnami > apache2 > htdocs > test.html & worker.js 를 넣기
start All를 클릭해서 활성화
error 이벤트 예시, 이부분도 반드시 서버 구동하에 사용을 해야됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>워커미적용</title>
</head>
<body>
<button onclick="applyWorker()">워커 미적용선택</button>
<button onclick="awake()">깨어날 시간</button>
<div id="result"></div>
<script>
function applyWorker() {
if (window.Worker) {
worker = new Worker("worker.js"); //worker.js : 쓰레드
worker
.postMessage("워커가 동작합니다.");
worker.onmessage = function (event) {
document
.getElementById("result").innerHTML
= event.data;
}
worker.onerror =function(error){
document
.getElementById("result")
.innerHTML
= error.message + "<br>";
document
.getElementById("result")
.innerHTML
+= error.filename+ "<br>";
document
.getElementById("result")
.innerHTML
+= error.lineno+ "<br>";
}
}
else {
document
.getElementById("result")
.innerHTML = "현재 브라우저는 웹 워커를 지원하지 않습니다.";
}
}
function awake() {
alert("일어나자");
}
</script>
</body>
</html>
worker.onerror =function(error){
document
.getElementById("result")
.innerHTML
= error.message + "<br>";
document
.getElementById("result")
.innerHTML
+= error.filename+ "<br>";
document
.getElementById("result")
.innerHTML
+= error.lineno+ "<br>";
}error.message
error.filename
error.lineno
의 의한 에러가 test()라는 없는 함수를 호출하므로 해당 함수의 정보를 출력함
