読者です 読者をやめる 読者になる 読者になる

Socket.IOとAngular.jsを使ったアプリケーションを作るときにやっておくこと

どうにもsocket.ioのEvent Emitterのなかで$scopeにアクセスできないなと思ったら、どうもAngular.js の DI に突っ込んでおく必要があるようです。ということがHTML5 Rocksに書いてあったのでメモ。

具体的にはこんな感じ。

app.factory('socket', function ($rootScope) {
  var socket = io.connect();
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },
    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
});

コントローラーでは socket という名前でsocket.ioのリスナーを受け取ることができます。

function SampleCtrl = function ($scope, socket) {
  // scoket listenters
  socket.on('init', function (data) {
    // application logic ....
  });
}