Angular.JS中的Resource + Socket.io工厂

时间:2015-04-20 13:54:25

标签: javascript angularjs node.js sockets angular-resource

我正在使用Angular.JS编写Web应用程序,该应用程序使用Express和Socket.IO(Node模块)编写的后端系统。我在Angular.JS写了一个工厂,列出了元素:

angular.module('myApp.api', ['ngResource'])
    .factory('Element', function($resource, Socket) {
        return $resource(
            'http://localhost:4000/elements/:id',
            { id : '@id' },
            { 
                update: { method: 'PATCH' }
            }
        );
    });

此工厂在ElementCtrl中使用并相应地显示元素,这完美地起作用:

angular.module('myApp.element', [])
    .controller('ElementCtrl', ['$scope', 'Element', function($scope, Element) {
    var elements = Element.query();
}]);

但是,我还在后端实现了Socket.io,如果元素添加到元素列表中,它会发送一条消息。我想改变Element工厂或者找一些其他方法来为控制器透明地处理它。我的客户端Socket.io代码如下:

angular.module('myApp.socket', [])
    .factory('ElementRealtime', function($resource, Socket) {
        var socket = io.connect('http://localhost:4000');
        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);
                  }
                });
              })
            },
            send: function(eventName, data, callback) {
             socket.send(eventName, data, function() {
               var args = arguments;
               $rootScope.$apply(function() {
                 if (callback) {
                   callback.apply(socket, args);
                 }
               });
             });
           }
        };
    });

在控制器中,我可以像这样更新代码:

Socket.on('connect', function (data) {
    Socket.emit('subscribe', {
        channel: 'element'
    });
});

Socket.on('message', function (data) {
    elements = Element.query();
});

无论如何只构建一个处理$ resource和socket部分的工厂/服务,所以我只能写:

var elements = Element.someFunction();

在控制器中,当在套接字端收到更新时调用Element.query()?这样,我就可以编写一个API服务,它可以处理来自后端的所有实时更新,并为控制器提供最新版本。

0 个答案:

没有答案