Remote Procedure Calls (RPC)

March 17, 2010 by: admin

As fun as transferring simple strings from one domain to another might sound; is this really what you need? While some applications (like the resize iframe example) might need nothing more, most often what you want is to be able to call methods, with arguments (strings, numbers, JSON objects etc) across the domain boundary like if no boundary existed at all, and guess what, easyXDM offers just that!


The easyXDM.Rpc class is an easy-to-use class that lets you define an interface to expose, and that lets you call methods exposed by the remote end as easy as doing

rpc.someMethod(arg1, arg2, function(result) {
    alert(result);
});

This actually means that the complexity of using cross domain RPC has been reduced to the same level as calling regular methods!
The concrete implementations can be both synchronous or asynchronous (for instance using AJAX to retrieve data), an example of this is from the xhr sample.

new easyXDM.Rpc({}, {
    local: {
        post: {
            method: function(url, data, fn, fnError){
                // do something... 
                // if it is synchronous use 'return foo;'
                // if is it asynchronous use 'fn(foo);'
            }
        }
    }
});

This Rpc object exposes a method ‘post’, that accepts two arguments, a url and a data object.
To make use of this exposed method on the consumer all you need to do is to set up the Rpc object

xhr = new easyXDM.Rpc({
    remote: remoteUrl + "/../xhr.html"
}, {
    remote: {
        post: {}
    }
});

and when ready do

xhr.post("example/glossary.php", {
    param1: "foo",
    param2: "bar"
}, function(data){
    alert(data.glossary.title);
});

Note that if there is a return value then the result is returned using the callback function.
Check out the example here.

  • Michiel

    xhr.post(“example/glossary.php”, {
    param1: “foo”,
    param2: bar”";
    }, function(json){
    alert(json.glossary.title);
    });

    Please fix the error in the example. I got it quite quickly but people new to JSON might not see the problem so quickly ;-)

    • http://kinsey.no/ Øyvind Sean Kinsey

      Will do – I saw it immediately too!

  • BPM

    “Check out the example here.”

    The examples don’t really show consuming an API like glossary.php at all.

    On top of that the choices of variable names is a bit confusing. Why would you use the name ‘remote’ for the RPC object, when that is also a property of that object? Then you use REMOTE for something else yet again! Not helpful.

    • http://kinsey.no/ Øyvind Sean Kinsey

      This post was about RPC and the example shows the RPC feature.

      I know the naming can be a bit confusing as the different scopes aren’t always too clear.
      At some point I’ll do a refactoring and make the names more in line with what they represent.

      • http://twitter.com/lvh lvh

        I’m exposing a JSON-RPC API. I’d like to consume it cross-domainly in browsers, even crappy ones.

        Is there an example or documentation I need to read to understand how I can convince easyXDM to do this JSON-RPC? IIUC I basically just need to write a lot of AJAX calls in the producer side, but it seems like a lot of boilerplate, and IIUC easyXDM already uses JSONRPC anyway.

        • http://kinsey.no/ Øyvind Sean Kinsey

          easyXDM’s RpcBehavior will happily offload incoming JSON-RPC messages to a handler, https://github.com/oyvindkinsey/easyXDM/blob/master/src/stack/RpcBehavior.js#L187.

          This handler will be passed the incoming message as well as a function to send back the response.

          You can probably write a glue component to hook this into an ajax enabled backend in not to many lines of code..

    • Pabletec

      Hey this is a free great tool, if you don’t like it just don’t use it and don’t disturb

      • http://www.facebook.com/KenDeeds Ken Deeds

        “Hey this is a free great tool, if you don’t like it just don’t use it and don’t disturb” – really, if someone points out the examples are fairly weak and short they get told don’t disturb. Really would it be that hard to set up an example where a parent page changes the background color of a child page in an iframe or something like that? How about an example with a link where I can actually see it work.

  • Anonymous

    I am encountering some problem in using easyXDM RPC.
    My requirement is like this:

        The consumer passes the content as parameter and calls the function through RPC. 
        The provider receives the request and use the content to modify its page.

    Here, *modifying its page* means trying to modify the DOM structure or the content in the DOM node.

    The code for the **provider** side, which will modify its page content once requested by the consumer.

        var provider = new easyXDM.Rpc({}, {
            local: {
                modifyContent: {
                    method: function(content){
                        // modify the content on my page
                    }
                }
            }
        });

    The **consumer** side, which will perform RPC to ask the provider to change its page.

            var consumer = new easyXDM.Rpc({
                remote: “remoteUrl”
            }, {
                remote: {
                    modifyContent: {}
                }
            });
            //perform RPC and ask the provider to the modify its content
            consumer.modifyContent(“This is some content that should be used to modify your content”);

    All things go on well excepts when the provider tries to use the content to modify its page.

    No errors nor warnings are raised. But the page just won’t change as expected.

    Besides, I run the “change content” code alone(like copy&paste&run in Firebug console or Chrome console), it will work.

  • Anonymous

    I am encountering problem using easyXDM RPC.

    My requirement is like this:

        The consumer passes the content as parameter and calls the function through RPC. 
        The provider receives the request and use the content to modify its page.

    Here, *modifying its page* means trying to modify the DOM structure or the content in the DOM node.

    The code for the **provider** side, which will modify its page content once requested by the consumer.

        var provider = new easyXDM.Rpc({}, {
            local: {
                modifyContent: {
                    method: function(content){
                        // modify the content on my page
                    }
                }
            }
        });

    The **consumer** side, which will perform RPC to ask the provider to change its page.

            var consumer = new easyXDM.Rpc({
                remote: “remoteUrl”
            }, {
                remote: {
                    modifyContent: {}
                }
            });
            //perform RPC and ask the provider to the modify its content
            consumer.modifyContent(“This is some content that should be used to modify your content”);

    All things go on well excepts when the provider tries to use the content to modify its page.

    No errors nor warnings are raised. But the page just won’t change as expected.

    Besides, I run the “change content” code alone(like copy&paste&run in Firebug console or Chrome console), it will work.

  • Bahri Alireza

    Great tool. 

    But I have run into the same issue xiaohan2012 has mentioned. My function on the provider gets called correctly. But then if I want to change the DOM on the provider side (like simply change the innerHTML of a div tag, it won’t work with no errors I can see. But the same function does alerts correctly.

    Here is the provider code:

    var provider = new easyXDM.Rpc({}, {
    local: {
    updateCart: {
    method: function(url, message, fn, fnError) {
    var message = “This message is coming from ” + url;
    testFunctionA(message);
    //return message;
    throw new Error(“something happened!”);
    }
    }
    }
    });

    function testFunctionA(message) {
    try {
    document.getElementById(‘messageDiv’).innerHTML = message;
    alert(message);
    } catch(e) {
    alert(e.message);
    }
    }

    and the consumer code:

    var consumer = new easyXDM.Rpc({
    remote: “domainA_rpc.html”
    }, {
    remote: {
    updateCart: {}
    }
    });

    function updateCartOnRemote(message) {
    consumer.updateCart(“domainB_rpc.html”, message, function() {
    alert(‘Update was successful’);
    }, function() {
    alert(‘Update was not successful’);
    }
    );
    }

  • cTux

    xhr.post(url, {}, function(data){
    alert(1);
    });

    Why i haven’t alert(1)?:(

  • wxttt

    how to post an array?

  • Asd

    adsf asdfasdf