add to WebSocket.onmessage() like how jQuery adds to events?

Question

I'm writing a single page ws++ site, and I'd like to keep my code grouped first by "page" (I think I need a new word since it never posts back) then by section then by concept etc.

I'd like to split up WebSocket.onmessage across my code much in the same way that $('#someElement') can constantly have an event like click(function(){}) added to it.

Can this be done with WebSocket.onmessage(function(){})? If so, how?

---

As some jQuery programmers happily know, an event can be initially set then added to in multiple places across the js. That's my favorite thing about js, the "put it anywhere as long as it's in order" ability. This makes code organization so much easier for me at least.

With WebSockets, really, the action client side for me so far is with the WebSocket.onmessage() handler since WebSocket.send() can be used anywhere and really just ports js data to the server.

onmessage() now owns my page, as whatever's in it initiates most major actions such as fading out the login screen to the first content screen upon a "login successful" type message.

According to my limited understanding of js, the onmessage() handler must be set all in one place. It's a pain to keep scrolling back/tabbing to another file to make a change to it after I've changed the js around it, far, far, away.

How can I add to the WebSocket.onmessage() handler in multiple places across the js?

Answer 1

To answer your last question;

how can I add to onmessage handler in multiple places across the js?

You can define your own personal (global) event handler in which you accept arbitrary number of handler functions. Here's an example:

window.bind: function(name, func, context) {
    if (typeof this.eventHandlers[name] == "undefined") {
        this.eventHandlers[name] = [func];
        this.eventContexts[name] = [context];
    }
    else {
        var found = false;
        for (var index in this.eventHandlers[name]) {
            if (this.eventHandlers[name][index] == func && this.eventContexts[name][index] == context) {
                found = true;
                break;
            }
        }
        if (!found) {
            this.eventHandlers[name].push(func);
            this.eventContexts[name].push(context);
        }
    }
}

window.trigger: function(name, args) {
    if (typeof this.eventHandlers[name] != "undefined") {
        for (var index in this.eventHandlers[name]) {
            var obj = this.eventContexts[name][index];
            this.eventHandlers[name][index].apply(obj, [args]);
        }
    }
}

// === Usage ===

//First you will bind an event handler some where in your code (it could be anywhere since `.bind` method is global).
window.bind("on new email", function(params) { ... });

//Then you need to trigger "on new email" in `onmessage` once appropriate events happen.
WebSocket.onmessage(function(data) {
    //Work on data and trigger based on that
    window.trigger("on new email", { subject: data.subject, email: data.email });
})

This code is a part of an open source project I worked on before. It gives events names and let you set context for your handler (for methods instead of functions). Then you can call trigger in your onmessage handler of your socket. I hope this is what you are looking for.