티스토리 뷰

공부합시다/Javascript

[Javascript] wasm - c 함수 호출

신규_유저 2022. 6. 20. 16:17

사실 이걸 어느 카테고리에 써야 할지 굉장히 고민했다.

 

순서는 아주아주 간단함.

우분투에서 c 파일 만들기 → emscripten 툴을 이용하여 WebAssembly로 컴파일 → 만들어진 js, wasm 파일을 가져와 적용하기

 

1. 사칙연산 코드 작성

더보기 
vim FourRules.c
#define _CRT_SECURE_NO_WARNINGS
#include <stdio.h>
#include <emscripten/emscripten.h>

EMSCRIPTEN_KEEPALIVE
int addition(int n1, int n2) {
  return n1+n2;
}

EMSCRIPTEN_KEEPALIVE
int subtraction(int n1, int n2) {
  return n1-n2;
}

EMSCRIPTEN_KEEPALIVE
int multiplication(int n1, int n2) {
  return n1*n2;
}

EMSCRIPTEN_KEEPALIVE
int division(int n1, int n2) {
  return n1/n2;
}

 

2. 컴파일

emcc FourRules.c -o FourRules.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']

컴파일 완료 시 생성된 파일 화면

 

3. 사용할 파일 가져와서 적용하기

1) 생성된 js, wasm 파일을 사용해야할 폴더로 넣어주기

나는 MobaXterm을 사용하여 쉽게 파일을 옮길 수 있었다.

 

2) 버튼을 클릭하면 Add함수가 실행되도록 main.html 내 script 작성함.

더보기 
<!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>Document</title>
    <input type="button" id="calculator" value="Strart" onclick="Add()">
</head>

<body>
    <script src="./wasm/FourRules.js"></script>
    <script>
        function Add() {
            var result = Module.ccall(
                'addition',	// name of C function
                'number',	// return type
                ['number', 'number'],	// argument types
                [1, 2]	// arguments
            );
            console.log(result);
        }
    </script>
</body>

</html>

Module.ccall() : Javascript에서 컴파일 된 C 함수를 호출하고 해당 함수의 결과를 반환함.

작성 방법 :

Module.ccall(

                'C 함수명',

                'retrurn type',

                '매개변수에 들어갈 값의 type',

                매개변수에 들어갈 값

);

매개변수가 2개 이상일 경우 위 스크립트처럼 배열형태로 작성해야 함.

 

 

 

1, 2를 더한값이 콘솔에 출력된 것을 확인할 수 있음.

 

끝!

 

더보기

사칙연산인데 덧셈만 하기엔 아쉬워서 추가 수정해보았음.

<!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>Document</title>
    <input type="number" id="n1">
    <input type="number" id="n2">
    <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')">
    <div id="result"></div>
</head>

<body>
    <script src="./wasm/FourRules.js"></script>
    <script>
        function cal(calStr) {
            let num1 = document.getElementById('n1').value;
            let num2 = document.getElementById('n2').value;
            let result = Module.ccall(
                calStr,
                'number',
                ['number', 'number'],
                [num1, num2]
            );
            console.log("Function Name : " + calStr);
            document.getElementById('result').innerText = result
        }
    </script>
</body>

</html>
입력된 두 숫자의 사칙연산 결과 출력 및 해당 함수명 콘솔에 출력

 

찐끝!

반응형
LIST
저작자표시 비영리 변경금지

'공부합시다 > Javascript' 카테고리의 다른 글

[Javascript] stream 활용하기  (0) 2022.07.05
[Javascript] Web Worker 사용하기  (0) 2022.06.21
[Javascript] esbuild + browserify 사용하기  (0) 2022.05.13
[Node.js] 서버 만들기  (0) 2022.04.16
타입 검사  (0) 2022.03.16
댓글
링크
공지사항
최근에 올라온 글