WebAssembly C++에 해당되는 글 1건

WebAssembly C++ Class Binding

개발 이야기/WEB 2020. 5. 18. 15:06

C++ 작성한 클래스를 사용해보자~!

 

1. 코드작성

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//bind_test.h
 
#ifndef __BIND_TEST_H__
#define __BIND_TEST_H__
class BindTest
{
public:
    BindTest();
    BindTest(int number);
    virtual ~BindTest();
 
private:
    int mNumber;
    int mPropertyNumber;
 
public:
    void Increase();
    int GetNumber();
    void SetPropertyNumber(int pNumber){ mPropertyNumber = pNumber; }
    int GetPropertyNumber() const { return mPropertyNumber; }
};
#endif
 
 cs

 

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
//bind_test.cpp
 
#include <iostream>
#include <emscripten/bind.h>
#include "bind_test.h"
 
using namespace emscripten;
 
BindTest::BindTest()
{
    mNumber = 0;
    mPropertyNumber = 0;
}
 
BindTest::BindTest(int number)
    : mNumber(number)
{
}
 
BindTest::~BindTest()
{
}
 
void BindTest::Increase()
{
    mNumber++;
}
 
int BindTest::GetNumber()
{
    return mNumber;
}
 
EMSCRIPTEN_BINDINGS(b_bind_test)
{
    class_<BindTest>("BindTest")
    .constructor<>()
    .constructor<int>()
    .function("Increase", &BindTest::Increase)
    .function("GetNumber", &BindTest::GetNumber)
    .property("mProperyNumber", &BindTest::GetPropertyNumber, &BindTest::SetPropertyNumber)
    ;
}
 
 cs

 

getter 상용할 때, const 명시할 것.

int GetPropertyNumber() const { return mPropertyNumber; }

 

2. 컴파일

 

1
2
emcc bind_test.cpp -o bind_test.js -s WASM=1 --bind
 
 cs

 

기존 예제와는 다르게 뒤에 --bind 추가

 

3. 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
<!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 bind = new Module.BindTest();
    
    console.log('[bind_test] get number = ' + bind.GetNumber());
    bind.Increase();
    console.log('[bind_test] get number = ' + bind.GetNumber());
    bind.Increase();
    bind.Increase();
    console.log('[bind_test] get number = ' + bind.GetNumber());
    console.log('[bind_test] direct value of mNumber = ' + bind.mNumber);
    
    bind.mPropertyNumber = 0;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    bind.mPropertyNumber = 5;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    bind.mPropertyNumber = 7;
    console.log('[bind_test] mPropertyNumber = ' + bind.mPropertyNumber);
    
    var bind2 = new Module.BindTest(99);
    console.log('[bind_test] get number = ' + bind2.GetNumber());
}
</script>
<script type='text/javascript' src='./js/bind_test.js'></script>
</body>
</html>
 cs

 

4. 결과확인

 

 

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

WebAssembly + C struct(구조체)  (0) 2020.05.15
Eclipse Web Project + WebAssembly Sample  (0) 2020.05.12
,
1

티스토리툴바