CODEWITHSUNDEEP
javascriptc++emscripten
Jan de Jager
Jan de Jager

Reputation: 870

Emscripten Javascript interface implementation

I need a bit more information on how to implement emscripten generated classes in javascript. I have the following interface in c++ but need to implement it on the javascript side.

class OsHttp {
public:
    virtual ~OsHttp() {}

    virtual void request(const std::string & verb, const std::string & url, const std::string & body, const std::unordered_map<std::string, std::string> & headers, const std::shared_ptr<HttpCallback> & callback) = 0;
};

I know that the following will get me started, but how do i implement the constructor etc.

var osHttp = {
    constructor: function(){}
    request: function(verb, url, body, headers, callback) {
        console.log('OsHttp with: ' + verb);
    }
};

var OsHttpObject = Module.OsHttp.implement(osHttp);

Upvotes: 1

Views: 960

Answers (1)

Michal Charemza
Michal Charemza

Reputation: 27012

If I'm understanding what you're after, then you need to have some way of communicating between the Javascript and C++ worlds. Also, I think that if you want to use an object that implements this interface in C++, then to get it to compile and run, there must be a concrete implementation of the interface in C++. This implementation of the interface would then call out to Javascript.

To do this, you could use the EM_ASM_* macros in a class that implements the interface:

class OsHttpImplementation : public OsHttp {
public:
    ~OsHttp()
    {
       EM_ASM({
         // Cleanup anything in Javascript context
       });
    }

    void request(const std::string & verb, const std::string & url, const std::string & body, const std::unordered_map<std::string, std::string> & headers, const std::shared_ptr<HttpCallback> & callback)
    {
        // Probably a good idea to save any shared pointers as members in C++
        // so the objects they point to survive as long as you need them

        int returnValue = EM_ASM_INT_V({
            // Example ways of accessing data from C++
            var verb = Pointer_stringify($0);
            var url = Pointer_stringify($1);
            var body = Pointer_stringify($2);
            var callbackFunctionPointer = $3;

            // Something here that makes an HTTP request, creates any objects, etc.

           return 0;

        }, verb.c_str(), url.c_str(), body.c_str(), callback.get());
    }
};

If you want there to actually be an object in Javascript that corresponds to the C++ object, you might have to do a bit of manual management in Javascript to create/store/delete objects in some sort of factory. Specifically, it would need to store them somewhere so the C++ can access the right one via some sort of key. The pointer to "this" could be handy for that:

class OsHttpImplementation : public OsHttp {
public:
    OsHttp()
    {
       EM_ASM_V({
         var thisPointer = $0;
         OsHttpFactory.construct(thisPointer);
       }, this);
    }

    ~OsHttp()
    {
       EM_ASM({
         var thisPointer = $0;
         OsHttpFactory.destruct(thisPointer);
       }, this);
    }

    void request(const std::string & verb, const std::string & url, const std::string & body, const std::unordered_map<std::string, std::string> & headers, const std::shared_ptr<HttpCallback> & callback)
    {
        int returnValue = EM_ASM_INT_V({
           var thisPointer = $0;
           OsHttpFactory.get(thisPointer).request($1, $2, $3, $4);
        }, this, verb.c_str(), url.c_str(), body.c_str(), callback.get());
    }
};

You have a lot of freedom on the implementation of OsHttpFactory in Javascript. You haven't mentioned if you want this in a browser, but if you do, and are using XMLHttpRequests, you could have something like

(function(context) {

  var store = {}

  function OsHttp() {
    this.request = null;
  }

  OsHttp.prototype.request = function(verb, url, body, callbackPointer) {
    var request = this.request = new XMLHttpRequest();
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        // Might need other arguments if you want to pass something back to C++
        Module.Runtime.dynCall('v', callbackPointer, []);
      }
    });
    this.request.open(verb, url, true);
    this.request.send();
  };

  OsHttp.prototype.cleanup = function() {
    // Do something to cleanup in-progress requests etc.
  }

  context.OsHttpFactory = {
    construct: function(thisPointer) {
      store[thisPointer] = new OsHttp();
    },
    destruct: function(thisPointer) {
      store[thisPointer].cleanup();
      delete store[thisPointer];
    },
    get: function(thisPointer) {
      return store[thisPointer];
    }
  };

})(window);

Then in C++ you could use it as a standard class:

// Run constructors
auto osHttp = new OsHttpImplementation();

// Make request
osHttp->request(....);

// Run destructors, and remove object from the Javascript store
delete osHttp;

I have to say, it's all a bit of a faff!

Upvotes: 3

Related Questions