我正在使用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服务,它可以处理来自后端的所有实时更新,并为控制器提供最新版本。