C++ 에서 Javascript 함수를 호출하고, 반대로 Javascript에서 C++ 함수를 호출하는 예제를 포스팅 해보겠습니다. Webassembly로 컴파일 하기위해서는 C++작성된 디렉토리로 이동 후에 아래와 같이 명령어를 실행 하면 아래와 같이 wasm 파일을 생성 할 수 있습니다, (※ Webassembly 환경 세팅 및 자세한 컴파일 방법은 이전 포스팅 참고)
## WebAssembly 컴파일
emcc -lembind -o [생성 할 파일명] [변환할 파일명]
## WebAssembly 컴파일 예시
emcc -lembind -o call_analysis.js call_analysis.cpp
Javascript to C++ 함수 호출하기
C++에서 선언된 my_analysis 함수를 Javascript에서 사용 하기 위해서
"EMSCRIPTEN_BINDINGS안에 emscripten::function("javascript에서 호출 할 함수명", C++에서 선언된 함수 반환값)"
와 같이 함수 인자를 입력하여 매핑 작업 한 후 호출하여 사용합니다.
아래 예제 소스를 기준으로 설명하면, 소스에서 emscripten::function("analysis", &my_analysis)와 같이 매핑 후에
javascript에서 analysis함수 호출시 C++의 my_analysis 함수로 반환 시켜 C++에서 선언된 함수를 호출 할 수 있습니다.
C++ 소스
#include <emscripten/bind.h>
using namespace emscripten;
float my_analysis(float a, float b, float c)
{
return a + b * c;
}
EMSCRIPTEN_BINDINGS(my_module)
{
emscripten::function("analysis", &my_analysis);
}Javascript 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var Module = {
onRuntimeInitialized: function() {
reqForm.arg1.value = 1.5;
reqForm.arg2.value = 3.5;
reqForm.arg3.value = 0.5;
}
};
function getResult() {
let arg1 = parseFloat(reqForm.arg1.value);
let arg2 = parseFloat(reqForm.arg2.value);
let arg3 = parseFloat(reqForm.arg3.value);
let myRet = Module.analysis(arg1, arg2, arg3);
reqForm.result.value = myRet;
}
</script>
<script src="call_analysis.js"></script>
</head>
<body>
<form method="get" id="reqForm" onsubmit="return false;">
<input type="text" name="arg1" value="" size="3"> +
<input type="text" name="arg2" value="" size="3"> X
<input type="text" name="arg3" value="" size="3"> =
<input type="text" name="result" value="" size="3">
<input type="button" onClick="getResult()" value="결과 얻어오기">
</form>
</body>
</html>C++ to Javascript 함수 호출하기
C++에서 Javascript 함수를 호출 하기 위해서는 EM_JS를 통하여 호출 가능합니다. 아래 예제와 같이 javascript에서 선언된 함수 jsFunction와 같이 EM_JS에서도 인자값과 인코딩 타입을 맞춰준 후에 호출하여 사용하면 됩니다.
C++ 소스
#include <iostream>
#include <string>
#include <emscripten.h>
#include <emscripten/bind.h>
EM_JS(void, call_js,(const char *subject, int len_subject, const char *msg, int len_msg), {
jsFunction(UTF8ToString(subject, len_subject),UTF8ToString(msg, len_msg));
});
bool my_callJs()
{
const std::string subject= "하이하이";
const std::string msg = "나를 호출해줘~";
call_js(subject.c_str(), subject.length(), msg.c_str(), msg.length());
return true;
}
EMSCRIPTEN_BINDINGS(module)
{
emscripten::function("callJs", &my_callJs);
}
Javascript 소스
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CALL_JSFUNC</title>
<script>
var Module = {
onRuntimeInitialized: () => {
Module.callJs();
}
}
const jsFunction = (subject, msg) => {
document.querySelector('#my_div').innerText = subject;
document.querySelector('#my_title').innerText = msg;
}
</script>
<script src="call_jsfunc.js"></script>
</head>
<body>
[ 제 목 ]
<div id="my_div"></div>
[ 내 용 ]
<div id="my_title"></div>
</body>
</html>
이번 포스팅은 WebAssembly에서 C++ to Javascript(Javascript to C) 함수 호출하는 방법을 정리 해봤습니다. 여기까지 지루한 글 읽어주셔서 감사합니다.
'기타 > WebAssembly' 카테고리의 다른 글
| [Webassembly] Emscripten 사용하여 Webassembly 컴파일 (0) | 2024.08.06 |
|---|---|
| [Webassembly] Windows환경에서 Emscripten 설치 (0) | 2024.07.30 |
| [WebAssembly] WebAssembly 시작하기 (0) | 2024.07.27 |