JSON-RPC

If your HTML5 application requires RPC (remote procedure call) semantics, JSON-RPC is an easy specification to implement. The code below allows sending requests and receiving responses, and leverages JQuery’s custom events to raise notifications (requests sent by server without an id).

        var nextId = 1;
        var messages = new Array();

        function Request(method, data) {
            this.method = method;
            // params is a C# keyword hence it is called data
            if (data)
                this.data = data;
        }

        Request.prototype.execute = function (callback) {
            if (callback) {
                this.id = nextId++;
                messages[this.id] = callback;
            }
            // Implement send so that the request gets sent to a server
            send(JSON.stringify(this));
        }

        // Whoever receives a stringified message from server must call dispatchMessage
        function dispatchMessage(message) {
            var o = JSON.parse(message);

            if (Array.isArray(o)) {
                dispatchBatch(o);
            } else {
                dispatch(o);
            }
        }

        function dispatchBatch(array) {
            array.forEach(function (message) {
                dispatch(message);
            })
        }

        function dispatch(message) {
            if (message.method) {
                // request
                $(document).trigger(message.method, message);
            } else {
                // response
                var callback = messages[message.id];
                if (callback) {
                    messages = messages.filter(function (elem) {
                        return elem.id == message.id; // remove
                    });
                    callback(message);
                } else {
                    console.log("Unknown response " + JSON.stringify(message));
                }
            }
        }

The following snippet shows how to handle a notification called foo, sent by the server

        $(document).on("foo", function (e, request) {
            // do something with request.data
        });

The following code demonstrates how to send a new request for a method called bar, and handle the corresponding response

            // data is some object that will be stringified
            var request = new Request("bar", data);
            request.execute(function (response) {
                // do something with response.error or response.result
            })

I’ll leave the server-side code to handle JSON-RPC as an exercise to the reader, or for a post in the future.