티스토리 뷰
싱글을 멀티처럼!
지난번에 만든 거에서 Web Worker(mdn - Web Workers API 설명)를 통해서 함수가 실행되도록 만듦.
main.js : 지난번에 만들었던 main.html 내 스크립트 코드 일부 & worker 실행하는 코드.
worker.js : main.js에서 실행하면 백그라운드에서 실행될 코드.
1. main.html 일부 수정
더보기
<!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>calculator</title>
</head>
<body>
<input type="number" id="n1" value="0">
<input type="number" id="n2" value="0">
<input type="button" id="calculator" value="+" onclick="cal('addition')">
<input type="button" id="calculator" value="-" onclick="cal('subtraction')">
<input type="button" id="calculator" value="×" onclick="cal('multiplication')">
<input type="button" id="calculator" value="÷" onclick="cal('division')">
<script src="src/main.js"></script>
</body>
</html>
2. src폴더 내 main.js 생성
더보기
const num1 = document.getElementById('n1');
const num2 = document.getElementById('n2');
const res = document.getElementById('result');
let workerResult;
if (!!window.Worker) { // worker 지원 여부 확인
var worker = new Worker("../worker.js"); // worker 생성
function cal(calVal) { // click 시 실행되는 함수
worker.postMessage({cal:calVal, num1:num1.value, num2:num2.value}); // worker에 데이터 보냄
console.log('Message posted to worker : %s, %d, %d',calVal, num1.value, num2.value);
}
worker.onmessage = function(e) { // worker에서 데이터 받음
console.log('Message received from worker : %d', e.data);
}
worker.onerror = function(e) { // worker에서 에러 메세지 받음
throw new Error(e.message + "("+e.filename + ":" + e.lineno + ")");
}
};
3. worker.js 생성
더보기
importScripts('./FourRules.js'); //c로 만든 함수파일 사용가능 하도록 해줌.
function calculator (data) { // wasm 연산 함수 실행
var result = Module.ccall(
data.cal, // name of C function
'number', // return type
['number', 'number'], // argument types
[data.num1, data.num2] // arguments
);
return result;
};
onmessage = function(e) { // main.js에서 데이터 받음
console.log(e.data);
setTimeout(() => { // 이걸 안 하면 runtime 오류 발생
const result = calculator(e.data);
// const result = e.data;
console.log(result);
postMessage(result); // main.js에 결과값 보내기
}, 200);
}주의사항 : worker.js는 main.html과 같은 폴더 내에 위치해야 인식되는 것 같다. 이것땜에 한참 고민했다.
끝!
반응형
LIST
'공부합시다 > Javascript' 카테고리의 다른 글
| [Javascript] WebAssenbly Error - Uncaught (in promise) LinkError (0) | 2022.07.05 |
|---|---|
| [Javascript] stream 활용하기 (0) | 2022.07.05 |
| [Javascript] wasm - c 함수 호출 (0) | 2022.06.20 |
| [Javascript] esbuild + browserify 사용하기 (0) | 2022.05.13 |
| [Node.js] 서버 만들기 (0) | 2022.04.16 |
댓글