Question

During development, it helps me greatly to be able to see what packets arrive and gets sent. This is possible on the server side with logger. On the client end, however, there is no logger. I find myself to be littering console.log all over the place.

Is it possible to override socket.emit and socket.on with console.log(arguments)? If I can override this at the before my socket, it would be really elegant.

Somebody advised me to override the Parser instead.

What’s your 2cents on this?

EDIT

I tried Kato’s suggestion and wrote the following:

var _origEmit = socket.emit;
socket.emit = function() { 
  console.log("SENT", Array.prototype.slice.call(arguments));
  _origEmit.call(socket, arguments);
};

This works. However, Not so much with socket.on. My strategy is to wrap each callback with a console.log. If you know python, it’s kind of like putting function decorators on the callbacks that console.log the arguments.

(function(socket) { 
var _origOn = socket.on;
socket.on = function() { 
  var args = Array.prototype.slice.call(arguments)
    , handlerType = args[0]
    , originalCallback = args[1];

  var wrappedCallback = function() { 
    // replace original callback with a function 
    // wrapped around by console.log
    console.log("RECEIVED", Array.prototype.slice.call(arguments));
    originalCallback.call(socket, arguments);
  }

  _origOn.call(socket, [handlerType, wrappedCallback]);
}

Any one can point to why monkey patching socket.on is not working?

Answer 1

To override socket.on you actually need to override socket.$emit.

Following example works both client and server-side (tested on socket.io 0.9.0):

(function() {
  var emit = socket.emit;
  socket.emit = function() {
    console.log('***','emit', Array.prototype.slice.call(arguments));
    emit.apply(socket, arguments);
  };
  var $emit = socket.$emit;
  socket.$emit = function() {
    console.log('***','on',Array.prototype.slice.call(arguments));
    $emit.apply(socket, arguments);
  };
})();