Messaging class and global state

Question

This is a front end project that is using socket.io for all communication with the server. This allows for push, but we have been asked to provide a pause button. The pause button is intended to stop data from changing out on the UI if the user does not wish it to do so automatically.

We have a class that wraps the web-socket and provides very minimal wrapping of socket.io.

The problem is, we can't just turn off the socket. User interactions need to continue to work, and different views have different specs as to what messages need to be ignored.

Ultimately its a big global Boolean. I would rather not have it truly be a global variable, so here are the ideas I've had so far:

---

Global

  // A non pausable listener
  socket.on('myEvent', function(data){
      // do thing
  });

  // A pausable listener
  socket.on('myPausable', function(data){
      if(window.isPaused){ return false; }
      // do thing
  });

---

Passed Value

  // A non pausable listener
  socket.on('myEvent', function(data){
      // do thing
  });

  // A pausable listener
  socket.on('myPausable', function(data, isPaused){
      if(isPaused){ return false; }
      // do thing
  });

---

Wrapped Method

  // A non pausable listener
  socket.on('myEvent', function(data){
      // do thing
  });

  // A pausable listener
  socket.onLive('myPausable', function(data){
      // do thing
  });

---

Separate Class

  // A non pausable listener
  socket.on('myEvent', function(data){
      // do thing
  });

  // A pausable listener
  liveData.on('myPausable', function(data){
      // do thing
  });

Currently there is ALOT of messaging taking place over the socket, and there is only going to be one 'PAUSE' toggle on the UI, so this needs to be done carefully. Advice and best practices are appreciated.

---

I originally posted this on 'programmers' https://softwareengineering.stackexchange.com/questions/231524/messaging-class-and-global-state

Answer 1

How about creating a separate UI module, which is solely responsible for all updates on the UI. Something like this:

var UI = {
    paused: false,
    exec: function(func){
        if(!this.paused){
            func();
        }
    }
}

liveData.on('myPausable', function(data){
    UI.exec(function(){
        // do stuff
    });
});

pauseButton.click(function(){
    UI.paused = true;
});