Emscripten & WebAssembly night !! #7での発表資料です

1. C/C++ WebAssembly
/ @llamerada_jp
2019/04/19 Emscripten & WebAssembly night !! #7

2. •
• ; SE
• , Java, Cloud, VMWare
• ;
• C/C++, go, WebAssembly, WebRTC, WebSocket
• PROCESS WARP
• twitter ; @llamerada_jp
• facebook ; https://www.facebook.com/ito.yuuji
• github ; https://github.com/llamerada-jp

3. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

4. @SlideShare
https://www.slideshare.net/llamerada-jp/webassembly-75175349
https://www.slideshare.net/llamerada-jp/cmu29

5. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

6. C/C++( )
WebAssembly(emscripten) web export
•
•

7. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

8. C/C++
• C++ name mangling extern "C" export
• EMSCRIPTEN_KEEPALIVE
-s 'EXPORTED_FUNCTIONS=["_<C >", …]'
( )
extern "C" {
EMSCRIPTEN_KEEPALIVE int c_func(int p_int, void* p_ptr);
}

9. Build
•
$ emcc …
-s 'EXTRA_EXPORTED_RUNTIME_METHODS=["ccall", “cwrap"]'

10. JavaScript
• ccall, cwrap ; emscripten
(.wasm WebAssembly.Instance.exports)
let r = ccall(
'c_func', // C
'number', // number(pointer ), array, string, boolean
['number', 'number'], //
[< >, < >] //
);
let f = cwrap('c_func', 'number', ['number', 'number']);
f(< >, < >);

11. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

12. JavaScript
• C/C++ export JavaScript API
<api >
mergeInto(LibraryManager.library, {
js_func: function(p1, p2) {
//
…
},
…
});

13. Build
•
$ emcc … --js-library <api >

14. C/C++
• C/C++
extern "C" {
extern void js_func(int p1, void* p2);
}
•
js_func(100, &val);

15. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

16. JavaScript
• JavaScript C
• addFunction ; JavaScript emscripten
• ccall C/C++
• C/C++
let f_ptr = addFunction(
js_func.bind(this), // bind
'vi'
// (1 ), (2 )
// v:void, i:int32, j:int64, f:float, d:double
);

17. Build
•
$ emcc … -s 'RESERVED_FUNCTION_POINTERS=< >'
•
• JavaScript on Callback

18. • Promise (※ )
connect(url, token) {
const promise = new Promise((resolve, reject) => {
// resolve/reject
let onSuccess = addFunction((veinPtr) => { resolve(); }, 'vi');
let onFailure = addFunction((veinPtr) => { reject(); }, 'vi');
let [urlPtr] = allocPtrString(url);
let [tokenPtr] = allocPtrString(token);
// C/C++ Callback
ccall('js_connect', 'null',
['number', 'number', 'number', 'number'],
[this._veinPtr, urlPtr, tokenPtr, onSuccess, onFailure]);
freePtr(url);
freePtr(token);
});
return promise;
}

19. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

20. C++ class
• ID JavaScript
• JavaScript C++
ID
• C ID C++
('A`)

21. get/set
<C/C++>
extern "C" {
EMSCRIPTEN_KEEPALIVE int64_t get_int(PTR_T value_ptr);
EMSCRIPTEN_KEEPALIVE void set_int(PTR_T value_ptr, int64_t v);
}
<JavaScript>
get() {
return ccall('get_int', 'number', ['number'], [this._valuePtr]);
}
set(v) {
ccall('set_int', 'void', ['number', 'number'], [this._valuePtr, v]);
}

22. • get/set
•
•
•
• ( )
• Module.HEAPU8
•
• JavaScript get/set

23. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

24. • ,
• new, delete
• alloc, free
• ,
• open, close

25. • JavaScript
• WebAssembly JavaScript GC
(2019/04 )
•
•
JavaScript API

26. connect(url, token) {
const promise = new Promise((resolve, reject) => {
let onSuccess = addFunction((veinPtr) => { resolve(); }, 'vi');
let onFailure = addFunction((veinPtr) => { reject(); }, 'vi');
// JavaScript C/C++
let [urlPtr] = allocPtrString(url);
let [tokenPtr] = allocPtrString(token);
//
ccall('js_connect', 'null',
['number', 'number', 'number', 'number'],
// !C/C++
[this._veinPtr, urlPtr, tokenPtr, onSuccess, onFailure]);
//
freePtr(url);
freePtr(token);
});
return promise;
}

27. disconnect() {
//
if (this._timerInvoke) {
clearTimeout(this._timerInvoke);
this._timerInvoke = false;
}
// C++
ccall('js_disconnect', 'null', ['number'], [this._veinPtr]);
// JS
delete this._instanceCache;
}

28. • WebAssembly
•
• JavaScript C/C++ API
• C/C++ JavaScript API
• CallBack
•
•
•
•

29. libvein
•
• KVS, 2 PubSub
• C/C++, Python, web
(
)

30. oinari
• https://www.oinari.app
• https://github.com/llamerada-jp/
oinari
•
• libvein

31. Seed/Server
(WebRTC )
Application
API
Application
API
Application
API
Node
( )
Application
API
Node Node Node
Routing
KVS, 2 PubSub
WebSocket
WebRTC

32. Core(C++)
Application(JavaScript)
API(JavaScript)
I/F(C/C++)
I/F(C/C++, JavaScript)
WebSocket
WebRTC
Core(C++)
Application(Native)
API(C++)
I/F(C++)
WebRTC
WebSocket
API(C)
Seed/Server(golang)
WebAssembly
(emscripten)
=