Question

I’m trying to create a modular application in javascript using pusher. Different modules need to bind to the same pusher event and sometimes that event is nested in another event. Furthermore, these modules get loaded at different times depending on DOM events triggered by the user.

So, if one module has some code like

env.pusher.connection.bind('connected', function() { 
    env.my_channel.bind('private_message',function(data){ ... }
}

And another module comes along and wants to listen to the same private_message event. What happens if I write the same code is that the first bind gets overwritten.

What I’m looking for is a way to implement some kind of listeners, possibly with the option of removing a listener from a channel event.

Answer 1

I’ve thought of a solution myself. It comprises of the following steps:

• keep a dictionary of pusher events

• every module that wants to make use of a pusher event should search the dictionary first to see if that event exists and if not, write the code that creates the bind for the first time and add it to the dictionary

• when a module creates the bind for the first time, it should also trigger a custom event and pass to it the data that pusher sends at the completion of the pusher event

• every module that wants to make use of a pusher event should add a handler to the custom event that is triggered when the pusher event is triggered

If that looks hard to follow, here’s some code inside a module that is a rewrite of the code in my question(I’ve used jQuery because jQuery is succint and has custom events already implemented):

if (typeof(env.pusher_events['my_channel']['private_message']) == 'undefined'){
    env.pusher_events['my_channel']['private_message'] = true;

    // 'pusher-connected' is defined in another module
    // this module depends on that event but for brevity
    // I'm not defining the 'connected' event here

    $(document).on('pusher-connected', 'body', function(){
        env.my_channel.bind('private_message', function(data){
            $('body').trigger('pusher-my_channel-private_message', data);
        })
    })
}

$(document).on('pusher-my_channel-private_message', 'body', function(data){
    // do something useful with the data
}

Would love to get some feedback on this (drawbacks etc.)