Как подружить Socket.IO и backbone.js

Как мы все знаем, евенты backbone.js делятся на две категории:

• Изменение информации в моделях/коллекциях
• Евенты DOM — дерева

Недавно, мне необходимо было решить задачу подключения евентов socket.io к backbone, да так, что бы все было внутри приложения backbone, что бы евенты сокетов можно было объявить прямо во вьюхах и там же описать все действия, которые будут происходить по евенту.

Дабы не отступать от стиля backbone, хотелось реализовать возможность добавить событие socket.io так же, как событие DOM — дерева, а именно вот так:

var im = Backbone.View.extend({
  io_events: {
    'new_message': 'newMessage'
  },
  newMessage: function(message_data){
    //do something
  }
});

Долгие поиски по просторам интернета меня привели к подборке менее элегантных методов связки backbon'а и сокетов, которые, вроде, и решали задачу, но не так, как хотелось бы. Пришлось думать самому.

Суть.

В конечном итоге родился код, которым я хочу поделится с Вами. Ниже, собственно он и пояснение того что там происходит:

var socket = io.connect('127.0.0.1:9999'); 
var SocketDelegationSkeleton = Backbone.View.extend({
  _initSocketio: function(){
    if(this.io_events && _.size(this.io_events) > 0)
      for(var io_event in this.io_events){
        var method = this.io_events[io_event]; // узнаем название метода в нашем объекте
        if (!_.isFunction(method)) { 
          method = this[method]; // Забираем метод
          _.bind(method, this); // решаем проблему с указателем this
          socket.on(io_event, method); // передаем в socket.io
        }else{
          throw new Error('Метод ' + '"' + method + '"' + ' не существует');
        }
      }
  }
});

Теперь каждое Ваше View, которое будет использовать socket.io необходимо расширить от SocketDelegationSkeleton, объявить евенты и в initialize вызвать _initSocketio();

var im = SocketDelegationSkeleton.extend({
  io_events: {
    'new_message': 'newMessage'
  },
  initialize: function(){
    this._initSocketio();
  }
  newMessage: function(message_data){
    //do something
  }
});

PROFIT!

Автор: toxa_1

Источник