Emscriptenで、C++からJavaScriptの関数を呼び出す

emscripten_call_javascript_from_cpp.md

Emscriptenで、C++からJavaScriptの関数を呼び出す

構成

+ecmake_dir
main.cpp
CMakeLists.txt
api.h
api.js

JavaScriptの関数を、C++に公開する

EmscriptenのLibraryManager.library変数に、C++側に公開する関数のリストが入っている。 新たに公開する関数を追加するために、そのLibraryManager.library変数に対して、mergeInto()関数を使用する。

api.js

mergeInto(LibraryManager.library, {
    consoleWrite: function(value) {
        console.log(value);
    },
});

これで、C++側から数値を渡して、JavaScriptのコンソールにその数値を出力する関数を公開できた。 公開する関数は、連想配列の形式で定義する。ここではconsoleWrite()関数のみを定義しているが、カンマ区切りで複数の関数を公開できる。

JavaScript側から公開された関数を呼び出す

C++側からJavaScriptのconsoleWrite()関数を呼び出すために、C++でのconsoleWrite()関数の宣言を行う。

api.h

extern "C" {
    extern void consoleWrite(int value);
}

あとは、これをC++から呼び出すだけだ。

main.cpp

#include <iostream>
#include "api.h"

int main()
{
    std::cout << 1 << std::endl;
    consoleWrite(2);
    std::cout << 3 << std::endl;
}

これをビルドして実行すると、JavaScriptのコンソールに、以下のように出力される：

1
2
3

JavaScriptを含めてビルドする方法

JavaScriptをEmscriptenでのビルドでリンクするためには、emccのコマンドラインオプションとして、--js-libraryを使用する。

このオプションで、--js-library api.jsのように指定すれば、api.jsがリンクに含められ、コンパイルされたJavaScriptファイルに同梱される。

C++からJavaScriptに、文字列を渡す

JavaScriptの関数をC++から呼び出す際、文字列を渡すには、以下のようにする：

• C++側での文字列の型はconst char*
• JavaScript側からは、受け取った文字列を、Pointer_stringify()関数でJavaScriptの文字列に変換する。

const char*の文字列は、JavaScript側では整数値として見なされる(ポインタの値)。そのため、JavaScriptの文字列に変換してあげる必要がある。

api.js

mergeInto(LibraryManager.library, {
    consoleWrite: function(str) {
        console.log(str);                    // ポインタの値(整数値)
        console.log(Pointer_stringify(str)); // 文字列
    },
});

api.h

extern "C" {
    extern void consoleWrite(const char* str);
}

main.cpp

#include "api.h"

int main()
{
    consoleWrite("hello");
}

これを実行すると、JavaScriptのコンソールに、以下のように出力される：

8
hello

出力の1行目は、Pointer_stringify()関数を通さずに、C++の文字列をJavaScriptで扱った場合。文字列ではなく、整数値8が出力されてしまっている。

2行目は、Pointer_stringify()関数を使って、C++の文字列をJavaScriptの文字列に変換して扱った場合。C++から渡した"hello"という文字列が、正しく出力されている。

JavaScriptから、C++のコールバック関数を呼び出す

JavaScript側で、関数の引数として受け取ったC++のコールバック関数を呼び出すには、以下のようにする：

• C++側では、関数ポインタをコールバック関数の値として渡す。
• JavaScript側では、Runtime.dynCall()関数を使用して、C++の関数ポインタを呼び出す。

ここでは、文字列を引数にとるC++のコールバック関数を、JavaScriptから呼び出してみる。

api.js

mergeInto(LibraryManager.library, {
    callCppFunction: function(f) {
        Runtime.dynCall('vi', f, [allocate(intArrayFromString("world"), 'i8', ALLOC_STACK)]);
    },
});

api.h

extern "C" {
    extern void callCppFunction(void(*f)(const char*));
}

main.cpp

#include <iostream>
#include "api.h"

int main()
{
    callCppFunction([](const char* str) {
        std::cout << str << std::endl;
    });
}

これを実行すると、worldが出力される。

ここでは、パラメータとしてconst char*型の文字列を受け取り、voidを返す関数を、JavaScript側から呼び出している。それを行うのは、JavaScript側の以下の行だ。

Runtime.dynCall('vi', f, [allocate(intArrayFromString("world"), 'i8', ALLOC_STACK)]);

第1引数として指定している'vi'は、関数のシグニチャを表している。vはvoid、iは整数型を表している。文字列はconst char*のポインタ型で渡すため、JavaScriptでは整数値として指定する。 viiのようにすれば、第2引数として整数値を追加で受け取る関数になる。

第2引数は、C++のコールバック関数。

第3引数以降が、コールバック関数の引数となる。 その際、JavaScriptの文字列をC++の文字列に変換しなければならない。それを行っているのが、以下の命令である：

[allocate(intArrayFromString("world"), 'i8', ALLOC_STACK)]

ここでは、"world"というJavaScriptの文字列を、スタック領域にアロケートしたポインタを、引数として渡している。