Передача функции С++ функции javascript в emscripten

Я изучаю emscripten и пытаюсь понять его лучше. Насколько я понимаю, прецедент, в основном предназначенный для этого, - это перенос существующего кода C/С++ на веб-клиент (браузер) и вызов кода C/С++ из JavaScript.

Но мне интересно, можно ли использовать С++ и Emscripten на веб-странице (обратите внимание: это больше из любопытства - я знаю, что на данный момент не так много веских причин). Мне удается вызывать функции Javascript из С++ и передавать им аргументы типов string, int, double и т.д. Но мне не хватает: вызов функции Javascript из С++ и передача функции C или С++ в качестве дескриптора. Итак, как простой пример: как написать следующий код Javascript ind pure С++?

var myfun = function() { /* do something meaningful here */ }
document.onload(myfun);

ОТВЕТЫ

Ответ 1

TL; DR;

Я написал библиотеку: js-bind, которая принимает любое количество аргументов, чтобы сделать это легко:

using namespace std::placeholders;
using emscripten::val;

// First find the HTML object to attach the event to
auto clickme_btn = val::global("document").call<val>("getElementById", string("clickme_btn"));

// Bind the event handler for click
auto onclick = [](val event){ cout << "hello world ! " << endl; };
clickme_btn.set("onclick", js::bind(onclick, _1));

Эта библиотека представляет собой метапрограммирование макросов на основе приведенного ниже объяснения.

ПОДРОБНЫЙ ОТВЕТ:

У вас разные возможности, такие как emscripten ccall, но то, что проще в использовании, по-моему, это Embind.

Например, возьмите обязательные обработчики событий XMLHttpRequest из С++.

Чтобы включить его, вы должны скомпилировать с помощью: --bind -s NO_EXIT_RUNTIME=1

Emscripten: связывать автономные функции

Можно легко добиться этого с помощью автономных функций и синглтона, как показано здесь:

#include <iostream>

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


namespace xhr {

  inline emscripten::val& singleton() {
    using emscripten::val;
    static val instance = val::global("XMLHttpRequest").new_();
    return instance;
  }

  void on_load(emscripten::val event) { 
    std::cout << "Successful Query " << std::endl;
    std::cout << "response is : " << singleton()["responseText"].as<std::string>() << std::endl;
  }

  void on_error(emscripten::val event) {
    std::cout << "Error on query " << std::endl;
  }

  void on_progress(emscripten::val event) {
    std::cout << "Progress on query " << std::endl;

    std::cout << event["lengthComputable"].as<bool>() << ": " << event["loaded"].as<unsigned int>() / event["total"].as<unsigned int>() << std::endl;
  }


  using namespace emscripten;

  EMSCRIPTEN_BINDINGS(xhr) {
    function("on_load", &on_load);
    function("on_error", &on_error);
    function("on_progress", &on_progress);
  }

}


int main(int argc, char** argv) {

  using emscripten::val;

  xhr::singleton().call<val>("open", std::string("GET"), std::string("http://127.0.0.1:8080/CMakeCache.txt"), true);

  // Here I set the callback to &on_load function registered via the EMSCRIPTEN_BINDINGS macro.
  xhr::singleton().set("onload",val::module_property("on_load"));
  xhr::singleton().set("onprogress",val::module_property("on_progress"));  
  xhr::singleton().set("onerror",val::module_property("on_error"));  

  xhr::singleton().call<val>("send");


  return 0;
}

Emscripten: связывать функции-члены

Обычно в С++ мы используем std:: bind обратные вызовы. Это также может быть достигнуто, взяв пример xhr более чистым способом:

#include <iostream>
#include <functional>
#include <memory>

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

class MiniXhr : public std::enable_shared_from_this<MiniXhr> {
  using val = emscripten::val;
  using url_t = std::string;

  public:

    void set_url(const url_t& url) { url_ = url; }

    void GET();

    /**
     *
     * The member function to be called from javascript.
     */
    void on_readystate(val event) {
      std::cout << "ready " << std::endl;
      std::cout << "xxhr::on_readystate: " 
          << xhr["readyState"].as<size_t>() << " - " << url_ << " :: "
          << xhr["status"].as<size_t>() << ": " 
          << xhr["statusText"].as<std::string>() << std::endl;
    }

  private:
    url_t url_;
    val xhr = val::global("XMLHttpRequest").new_();
};


using emscripten::class_;
EMSCRIPTEN_BINDINGS(MiniXhr) {

  /**
   * Binding for the class.
   */
  class_<MiniXhr>("MiniXhr")
    .smart_ptr<std::shared_ptr<MiniXhr>>("shared_ptr<MiniXhr>")
    .function("on_readystate", &MiniXhr::on_readystate)
    ;

  /**
   * More generic binding to bind a functor with one argument (event handler get the event)
   * Here std::function call operator from C++ is bound to function opcall() in JS.
   */
  class_<std::function<void(emscripten::val)>>("VoidValFunctor")
    .constructor<>()
    .function("opcall", &std::function<void(emscripten::val)>::operator());


}

/**
 *
 * Finally the interesting part : binding the member function on_readystate to the readystatechange event of XMLHttpRequest.
 *
 */

 void MiniXhr::GET() { 

  /**
   * Here this lambda could be put as function in a library, to do an JS(std::bind), 
   * it should just be overloaded for different argument count. (Im on it).
   */
  auto jsbind = [](val& target, const char* property, auto bind_expression ) {

    // Create an std::function from the bind expression
    std::function<void(emscripten::val)> functor = bind_expression;

    // We ensure the correct object will always be bound to the this of the function
    auto functor_adapter = val(functor)["opcall"].call<val>("bind", val(functor)); 

    // Finally we simply set the eventhandler
    target.set(property, functor_adapter);
  };

  // Here we could bind as many member function as we want.

//    jsbind(xhr, "onload", std::bind(&MiniXhr::on_load, shared_from_this(), std::placeholders::_1));
//    jsbind(xhr, "onerror", std::bind(&MiniXhr::on_error, shared_from_this(), std::placeholders::_1));
//    jsbind(xhr, "onprogress", std::bind(&MiniXhr::on_progress, shared_from_this(), std::placeholders::_1));
  jsbind(xhr, "onreadystatechange", std::bind(&MiniXhr::on_readystate, shared_from_this(), std::placeholders::_1));

  // Note that we bind with shared_from_this(), as the scope where the class was instantiated may be dead
  // and only later our callback will come back.

 xhr.call<val>("open", std::string("GET"), url_, true);
 xhr.call<val>("send");
}


int main(int argc, char** argv) {


  auto x = std::make_shared<MiniXhr>();
  x->set_url("notfound.json");
  x->GET();

  return 0;
}

Ответ 2

Я не уверен в emscripten, но, чтобы подвести итог, я понимаю, что вам нужно знать, как передать функцию С++ в качестве дескриптора другой функции С++. Надеюсь, я смогу помочь в этом.

JavaScript, PHP и другие более гибкие языки позволяют пропускать объект функции. В C и С++ это немного отличается, вам нужно передать указатели на функции в качестве аргументов другим функциям. В C имя для этого - обратный вызов, а не дескриптор.

Например:

/* This function takes a single callback as a parameter. */
//here we say that the parameter, that we name numberSource, is a function that receives no parameters itself (void), and return an int
void printNumber(int (*numberSource)(void)) {
    printf("%d", numberSource());
}

/* A possible callback */
int oneExampleFunction(void) {
    return 100;
}

/* Another possible callback. */
int otherExampleFunction(void) {
    return 200;
}

/* This is how we would call printNumber with three different callbacks. */

//with "&" we are referencing the memory address of the function, 
//since thats what printNumber is expecting
printNumber(&oneExampleFunction);
printNumber(&otherExampleFunction);
printNumber(&rand); //where are using rand(), a system function, that works as well.

Это обычная практика создания настраиваемого типа для аргумента, поэтому вам не нужно использовать что-то столь же уродливое, как int (*numberSource)(void). Это будет что-то вроде:

//Function pointer called CallbackType that takes a float
//and returns an int
typedef int (*NameYouWantForTheType)(void);

Таким образом, функция printNumber будет выглядеть так:

void printNumber(NameYouWantForTheType numberSource ) {
    printf("%d", numberSource());
}

Итак, в вашем случае если вы хотите перевести этот код JS

var myfun = function() { /* do something meaningful here */ }
document.onload(myfun);

до C, и у вас есть объект C, называемый "документ", который получает функцию, которая выполняет некоторые другие действия, ваш код C будет:

void myfun (void) {
  /* do something meaningful here */
}

document.onload(&myfun);

Ответ 3

Здесь кое-что, что я использовал долгое время назад, когда возился с Emscripten в коде C:

void myfun(void(*f)(void)) { (*f)() }

а затем здесь будет JavaScript:

var theparty = Runtime.addFunction(function() { print("Will there be confetti?") });
Module.ccall("myfun", "number", ["number"], [theparty]);
Runtime.removeFunction(theparty); // output => Will there be confetti?

Я всегда удаляю функцию, которая больше не нужна после ее выполнения для сохранения памяти. Это простой и простой способ сделать кодовые биты совместной работы. Вы можете, очевидно, изменить это, чтобы делать все, что хотите, кроме распечатки информации.: P