دمج Emscripten

يربط JavaScript ببرنامج Wasm الخاص بك.

Surma

في مقالتي الأخيرة عن لغة wasm، تحدثت عن كيفية تجميع مكتبة C إلى لغة wasm حتى تتمكّن من استخدامها على الويب. أحد الأمور التي لفتت انتباهي (والعديد من القرّاء) هي الطريقة البدائية وغير المألوفة نوعًا ما التي يجب من خلالها تحديد الدوال التي تستخدمها من وحدة wasm يدويًا. للتذكير، إليك مقتطف الرمز البرمجي المعنيّ:

const api = {
    version: Module.cwrap('version', 'number', []),
    create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
    destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
};

في ما يلي نعرِض أسماء الدوال التي وضعنا عليها علامة EMSCRIPTEN_KEEPALIVE، وأنواع القيم التي تُعرِضها، وأنواع ملفوظات الدوال. بعد ذلك، يمكننا استخدام الطرق في عنصر api لاستدعاء هذه الدوال. ومع ذلك، فإن استخدام Wasm لا يتيح استخدام السلاسل ويتطلب منك نقل أجزاء من الذاكرة يدويًا حولها، ما يجعل استخدام العديد من واجهات برمجة تطبيقات المكتبات مملاً. أليس هناك طريقة أفضل؟ بالتأكيد، وإلا، ما هي هذه المقالة؟

تشويش الأسماء في C++

قد تكون تجربة المطوّرين سببًا كافيًا لإنشاء أداة تساعد في عمليات الربط هذه، ولكن هناك في الواقع سبب أكثر إلحاحًا: عند تجميع رمز C أو C++ ، يتم تجميع كل ملف على حدة. بعد ذلك، يعتني الرابط بدمج كل ملفات الكائنات المسماة معًا وتحويلها إلى ملف Wasm. في لغة C، تظلّ أسماء الدوالّ متاحة في ملف الرمز المضمّن ليتمكّن المُجمِّع من استخدامها. كل ما تحتاجه لتتمكن من استدعاء دالة C هو الاسم، الذي نقدمه كسلسلة إلى cwrap().

من ناحية أخرى، يدعم C++ التحميل الزائد للدوال، مما يعني أنه يمكنك تنفيذ نفس الوظيفة عدة مرات طالما أن التوقيع مختلف (على سبيل المثال، المعلمات المكتوبة بشكل مختلف). على مستوى المُجمِّع، سيتم تشويه اسم لطيف مثل add إلى اسم يُشفِّر التوقيع في اسم الدوال للمجمِّع. نتيجةً لذلك، لن نتمكّن من البحث عن دالتنا باستخدام اسمها بعد الآن.

إدخال embind

embind هي جزء من سلسلة أدوات Emscripten وتوفر لك مجموعة من وحدات ماكرو C++ التي تتيح لك إضافة تعليقات توضيحية إلى رموز C++. يمكنك الإفصاح عن الدوال أو التعدادات أو الفئات أو أنواع القيم التي تخطّط لاستخدامها من JavaScript. لنبدأ ببعض الدوالّ البسيطة:

#include <emscripten/bind.h>

using namespace emscripten;

double add(double a, double b) {
    return a + b;
}

std::string exclaim(std::string message) {
    return message + "!";
}

EMSCRIPTEN_BINDINGS(my_module) {
    function("add", &add);
    function("exclaim", &exclaim);
}

مقارنةً بمقالتي السابقة، لم نعُد نضمِّن emscripten.h بعد الآن، إذ لم نعد مضطرًا إلى إضافة تعليقات توضيحية إلى الدوال باستخدام EMSCRIPTEN_KEEPALIVE. بدلاً من ذلك، لدينا قسم EMSCRIPTEN_BINDINGS الذي ندرج فيه الأسماء التي نريد أن نعرض الدوال عليها بلغة JavaScript.

لتجميع هذا الملف، يمكننا استخدام الإعداد نفسه (أو ملف ‎Docker image نفسه إذا أردت) كما هو موضّح في المقالة السابقة. لاستخدام embind، نضيف العلامة --bind:

$ emcc --bind -O3 add.cpp

كل ما تبقى الآن هو تحضير ملف HTML الذي يحمّل وحدة Wasm التي تم إنشاؤها حديثًا:

<script src="/a.out.js"></script>
<script>
Module.onRuntimeInitialized = _ => {
    console.log(Module.add(1, 2.3));
    console.log(Module.exclaim("hello world"));
};
</script>

كما ترى، لم نعد نستخدم cwrap(). ويعمل هذا الإجراء تلقائيًا بدون الحاجة إلى أي إعدادات. والأهم من ذلك، أنّه ليس علينا القلق بشأن نسخ عناقيد ذاكرة يدويًا لتشغيل السلاسل. يوفّر لك embind ذلك مجانًا، بالإضافة إلى عمليات التحقّق من النوع:

وهذا أمر رائع لأنّه يمكننا رصد بعض الأخطاء مبكرًا بدلاً من التعامل مع أخطاء wasm التي يصعب التعامل معها أحيانًا.

العناصر

تستخدم العديد من الدوال المنشئة والدوال في JavaScript كائنات الخيارات. إنه نمط رائع في JavaScript، ولكنه عمل شاق للغاية لإدراكه في Wasm يدويًا. يمكن أن يساعد embind في هذه الحالة أيضًا.

على سبيل المثال، لقد ابتكرت دالة C++ المفيدة بشكل كبير والتي تعالج سلاسلي، وأريد استخدامها بشكل عاجل على الويب. إليك كيفية إجراء ذلك:

#include <emscripten/bind.h>
#include <algorithm>

using namespace emscripten;

struct ProcessMessageOpts {
    bool reverse;
    bool exclaim;
    int repeat;
};

std::string processMessage(std::string message, ProcessMessageOpts opts) {
    std::string copy = std::string(message);
    if(opts.reverse) {
    std::reverse(copy.begin(), copy.end());
    }
    if(opts.exclaim) {
    copy += "!";
    }
    std::string acc = std::string("");
    for(int i = 0; i < opts.repeat; i++) {
    acc += copy;
    }
    return acc;
}

EMSCRIPTEN_BINDINGS(my_module) {
    value_object<ProcessMessageOpts>("ProcessMessageOpts")
    .field("reverse", &ProcessMessageOpts::reverse)
    .field("exclaim", &ProcessMessageOpts::exclaim)
    .field("repeat", &ProcessMessageOpts::repeat);

    function("processMessage", &processMessage);
}

نحن بصدد تعريف بنية لخيارات الدالة processMessage(). في العنصر EMSCRIPTEN_BINDINGS، يمكنني استخدام value_object لجعل JavaScript يرى قيمة C++ هذه كعنصر. يمكنني أيضًا استخدام value_array إذا كنت أفضّل استخدام قيمة C++ هذه كمصفوفة. أقوم أيضًا بربط الدالة processMessage()، والباقي عبارة عن magic. يمكنني الآن استدعاء الدالة processMessage() من JavaScript بدون أي رمز نموذجي:

console.log(Module.processMessage(
    "hello world",
    {
    reverse: false,
    exclaim: true,
    repeat: 3
    }
)); // Prints "hello world!hello world!hello world!"

صفوف

من أجل الكمال، يجب أن أعرض لك أيضًا كيفية السماح لك باستخدام embind لعرض صفوف كاملة، ما يؤدي إلى تحقيق الكثير من التكامل مع فئات ES6. ربما يمكنك البدء في رؤية نمط الآن:

#include <emscripten/bind.h>
#include <algorithm>

using namespace emscripten;

class Counter {
public:
    int counter;

    Counter(int init) :
    counter(init) {
    }

    void increase() {
    counter++;
    }

    int squareCounter() {
    return counter * counter;
    }
};

EMSCRIPTEN_BINDINGS(my_module) {
    class_<Counter>("Counter")
    .constructor<int>()
    .function("increase", &Counter::increase)
    .function("squareCounter", &Counter::squareCounter)
    .property("counter", &Counter::counter);
}

من جانب JavaScript، تبدو هذه الميزة وكأنها فئة أصلية:

<script src="/a.out.js"></script>
<script>
Module.onRuntimeInitialized = _ => {
    const c = new Module.Counter(22);
    console.log(c.counter); // prints 22
    c.increase();
    console.log(c.counter); // prints 23
    console.log(c.squareCounter()); // prints 529
};
</script>

ماذا عن "ج"؟

تم كتابة embind لبرنامج C++ ولا يمكن استخدامه إلا في ملفات C++، ولكن لا يعني ذلك أنّه لا يمكنك الربط بملفات C. لمزج C وC++ ، ما عليك سوى تقسيم ملفات الإدخال إلى مجموعتين، واحدة لـ C والأخرى لملفات C++ وزيادة علامات CLI لـ emcc على النحو التالي:

$ emcc --bind -O3 --std=c++11 a_c_file.c another_c_file.c -x c++ your_cpp_file.cpp

الخاتمة

يوفّر لك embind تحسينات كبيرة في تجربة المطوّر عند العمل باستخدام wasm وC/C++. لا تتناول هذه المقالة جميع الخيارات التي يوفّرها embind. إذا كنت مهتمًا، أنصحك بمواصلة الاطّلاع على مستندات embind. يُرجى العِلم أنّ استخدام embind يمكن أن يجعل كلّ من وحدة wasm ورمز التجميع JavaScript أكبر بما يصل إلى 11 ألفًا عند استخدام ضغط gzip، ويُرجى العِلم أنّ ذلك ينطبق بشكلٍ ملحوظ على الوحدات الصغيرة. إذا كان لديك سطح صغير جدًا، فقد تكلف عملية الدمج أكثر من قيمتها في بيئة الإنتاج! ومع ذلك، يجب عليك بالتأكيد تجربتها.