Multiple easyXDM in one page

Question

I am trying to use two easyXDM sockets on a single parent page without success. Both the sockets connect to the same remote domain but different endpoints. The parent page has two divs false_app_div and dummy_app_div.The following shows the code snippets -

On the parent page I have two JS functions activate_false_app() and activate_dummy_app().

window.loadScript = function(src, onload, onerror) {
   var head = document.getElementByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = src;
   if (script.readyState) {
      script.onreadystate = function() {
         var state = this.state;
         if (state === 'loaded' || state === 'complete') {
             script.onreadystate = null;
             onload();
         }
      };
   }
};
window.activate_false_app = function() {
   var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js';
   on_load_fn = function() {
      window.init_false_app_communication();
   };
   on_error_fn = function() {
      return false;
   };
   window.loadScript(exdm_url, on_load_fn, on_error_fn);
};
window.init_false_app_communication = function() {
   var false_app_socket = new easyXDM.Socket({
      remote : 'http://localhost:8000/false_app',
      swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf',
      container : 'false_ap_div',
      onMessage : function(message, origin) {
         alert('false_app onMessage');
         alert(message);
      }
   });
};
window.activate_dummy_app = function() {
  var exdm_url = 'http://localhost:8000/js/easyXDM/easyXDM.min.js';
  on_load_fn = function() {
     window.init_dummy_app_communication();
  };
  on_error_fn = function() {
     return false;
  };
  window.loadScript(exdm_url, on_load_fn, on_error_fn);
};
window.init_dummy_app_communication = function() {
   var dummy_app_socket = new easyXDM.Socket({
       remote : 'http://localhost:8000/dummy_app',
       swf : 'http://localhost:8000/js/easyXDM/easyXDM.swf',
       container : 'dummy_app_div',
       onMessage : function(message, origin) {
           alert('dummy_app onMessage');
           alert(message);
       };
   });
};

If in the parent page, I call either activate_dummy_app() or activate_false_app(), it works - that is both work completely fine in isolation. But if I call both, then only one of them works and I get an error on the JS console, that something is undefined (which I could not find).

Also, I know that the problem has something to do with loading two easyXDMs because if I put init_dummy_app_communication in the on_load_fn of activate_false_app() (in addition to init_false_app_communication already present), then both works.

However, I cannot be sure that easyXDM is already loaded, so both activate_false_app and activate_dummy_app has to load easyXDM, so that they work in isolation as well as together. I tried working with noConflict function, but the documentation there is poor and ended up with nothing concrete there.

Has someone faced a similar problem or knows what I am missing here?

Answer 1

EasyXDM allows you to have multiple instances of it per site. You can do this using noConflict.

For example, if you're building JavaScript that will go on a site you do not control, you can always create an instance of EasyXDM and set it to whatever you want.

I do this for our JavaScript widgets (the usage can be viewed here). Each script can then call ns.NSEasyXDM and have a reference to it without pummeling the easyXDM in the global namespace (since it likes to put itself on the window).

If you need to talk to multiple endpoints, you can send in a different consumerRpcConfig and consumerJsonRpcConfig as needed.

this.ns = this.ns || {};
(function(ns, window, document) {
    var base = this,
        consumerRpcConfig = {
            remote: document.location.protocol+ "//my.path.org/Scripts/easyXDM/cors/"
        },
        consumerJsonRpcConfig = {
            remote: {
                request: {}
            }
        },
        init = function(el, callback) {
            var easyXDMElement,
                scripts = document.getElementsByTagName('script'),
                scriptIdx;
            for (scriptIdx = 0; scriptIdx < scripts.length; scriptIdx = scriptIdx + 1) {
                if (scripts[scriptIdx].src === document.location.protocol + '//my.path.org/Scripts/EasyXDM/easyXDM.js') {
                    base.isEasyXDMPresent = true;
                }
            }
            if (!base.isEasyXDMPresent || ns.NSEasyXDM === undefined) { 
                easyXDMElement = document.createElement('script');
                easyXDMElement.type = 'text/javascript';
                easyXDMElement.src = document.location.protocol + '//my.path.org/Scripts/EasyXDM/easyXDM.js';
                el.parentNode.insertBefore(easyXDMElement, el);
            }
             easyXDMElement.onload = function () {
                 ns.NSEasyXDM = { easyXDM: window.easyXDM.noConflict("NSEasyXDM") };
                 callback();
             };

        }
    return ns;
}(this.ns, window, document));

To define multiple copies of EasyXDM as shown above, use the "noConflict", assign each instance to a variable; and then you can pass that around.

Answer 2

in this page; https://groups.google.com/forum/#!topic/easyxdm/bOoznzUrkjE

it is mentioned as;

(function(){
    var easyXDM;
    // paste easyXDM's minified code here

    var rpc = easyXDM.Rpc(.....
    ...
})();