Eclipse Web Project + WebAssembly Sample

개발 이야기/WEB 2020. 5. 12. 15:05

웹 서버에 WebAssembly로 작성한 함수 불러오는 간단한 예제.

용어 설명은 생략.

 

1. 간단한 샘플 코드 작성

 

sample.c 라고 가정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <stdio.h>
#include <emscripten/emscripten.h>
 
EMSCRIPTEN_KEEPALIVE
int square(int n)
{
    return n * n;
}
 
EMSCRIPTEN_KEEPALIVE
int add(int a, int b)
{
    return a + b;
}
 
 cs

 

2. emscripten 설치(우분투 18.04.4 LTS 환경에서 진행)

 

1
2
3
4
5
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
 cs

 

3. 컴파일

 

emsdk 경로에 [1번 과정]에서 작성한 sample.c 복사하고 진행함.

 

1
emcc sample.c -o sample.js -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']
 cs

 

4. Eclipse 에서 Dynamic Web Project 생성

 

5. [3번 과정]에서 생성된 sample.js / sample.wasm 파일을 js 라는 디렉토리에 복사

6. index.html 작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Wasm Test Page</title>
</head>
<body>
<button id="btn" onclick="OnClickBtn();">click here!</button>
<script>
function OnClickBtn()
{
    //////////
    var square_ccal_result = Module.ccall('square',
            'number',
            ['number'],
            [4]);
    
    console.log('[square] ccall result = ' + square_ccal_result);
    //////////
    
    //////////
    var suqare = Module.cwrap('square',
            'number',
            ['number']);
    
    var suqare_cwrap_result = suqare(5);
    
    console.log('[square] cwrap result = ' + suqare_cwrap_result);
    //////////
    
    //////////
    var add_ccal_result = Module.ccall('add',
            'number',
            ['number', 'number'],
            [2, 3]);
    console.log('[add] ccall result = ' + add_ccal_result);
    //////////
    
    //////////
    var add = Module.cwrap('add',
            'number',
            ['number', 'number']);
    
    var add_cwrap_result = add(7, 9);
    console.log('[add] cwrap result = ' + add_cwrap_result);
    //////////
}
 
</script>
<script type='text/javascript' src='./js/sample.js'></script>
</body>
</html>
 
cs

 

7. 결과

 

'개발 이야기 > WEB' 카테고리의 다른 글

WebAssembly C++ Class Binding  (0) 2020.05.18
WebAssembly + C struct(구조체)  (0) 2020.05.15
,

티스토리툴바