방금 AngularJS에 익숙해지기 시작했지만 서버 측 데이터베이스에서 무언가 변경 될 때 사용자를 위해 실시간 (새로 고침 없음)으로 자동 업데이트되는보기가있는 웹 앱을 빌드하고 싶습니다.
AngularJS가 이것을 (대부분) 자동으로 처리 할 수 있습니까? 그렇다면 기본 메커니즘은 무엇입니까?
예를 들어, "모델"변경에 대해 정기적으로 DB를 폴링하도록 AngularJS를 어떻게 설정합니까? 아니면 일종의 Comet 같은 메커니즘을 사용하여 모델이 변경되었음을 AngularJS 클라이언트 측 코드에 알릴 수 있습니까?
내 응용 프로그램에서 문제는 다른 (웹이 아닌) 서버 측 소프트웨어가 때때로 데이터베이스를 업데이트한다는 것입니다. 그러나이 질문은 AngularJS 웹 클라이언트를 통해 데이터베이스를 변경하는 여러 클라이언트가있을 수있는 순수 웹 앱에 동일하게 적용되며, 이들 중 하나가 DB (모델)를 변경할 때 각각 업데이트해야합니다.
답변:
몇 가지 선택이 있습니다 ...
다음을 사용하여 모든 X 밀리 초 폴링을 할 수있는 $timeout및 $http, 또는 당신이 사용하고있는 데이터가 REST 서비스에 후크 최대 인 경우, 당신은 사용할 수 있습니다 $resource대신 $http.
일부 Websocket 구현을 사용 scope.$apply하고 소켓에 의해 푸시되는 변경 사항을 처리 하는 데 사용하는 서비스를 만들 수 있습니다 . 다음은 node.js 웹 소켓 라이브러리 인 socket.io를 사용하는 예입니다.
myApp.factory('Socket', function($rootScope) {
var socket = io.connect('http://localhost:3000');
//Override socket.on to $apply the changes to angular
return {
on: function(eventName, fn) {
socket.on(eventName, function(data) {
$rootScope.$apply(function() {
fn(data);
});
});
},
emit: socket.emit
};
})
function MyCtrl($scope, Socket) {
Socket.on('content:changed', function(data) {
$scope.data = data;
});
$scope.submitContent = function() {
socket.emit('content:changed', $scope.data);
};
}
정말 첨단 기술을 얻고 Angular 모델을 서버와 동기화하는 웹 소켓 구현을 만들 수 있습니다. 클라이언트가 무언가를 변경하면 해당 변경 사항이 자동으로 서버로 전송됩니다. 또는 서버가 변경되면 클라이언트로 전송됩니다.
다음은 이전 버전의 Angular에서 다시 socket.io를 사용하는 예입니다. https://github.com/mhevery/angular-node-socketio
편집 : # 3의 경우 Firebase 를 사용 하여이 작업을 수행했습니다.
다음은 node 대신 jetty를 사용하는 구현입니다. angularjs 부분은 angular-seed 앱을 기반으로합니다. 각도 코드가 관용적인지 확실하지 않지만 작동하는지 테스트했습니다. HTH-토드.
https://gist.github.com/3047812
// -------------------------------------------------------------
// TimerCtrl
// -------------------------------------------------------------
function TimerCtrl($scope, CurrentTime) {
$scope.CurrentTime = CurrentTime;
$scope.CurrentTime.setOnMessageCB(
function (m) {
console.log("message invoked in CurrentTimeCB: " + m);
console.log(m);
$scope.$apply(function(){
$scope.currentTime = m.data;
})
});
}
TimerCtrl.$inject = ['$scope', 'CurrentTime'];
angular.module('TimerService', [], function ($provide) {
$provide.factory('CurrentTime', function () {
var onOpenCB, onCloseCB, onMessageCB;
var location = "ws://localhost:8888/api/timer"
var ws = new WebSocket(location);
ws.onopen = function () {
if(onOpenCB !== undefined)
{
onOpenCB();
}
};
ws.onclose = function () {
if(onCloseCB !== undefined)
{
onCloseCB();
}
};
ws.onmessage = function (m) {
console.log(m);
onMessageCB(m);
};
return{
setOnOpenCB: function(cb){
onOpenCB = cb;
},
setOnCloseCB: function(cb){
onCloseCB = cb;
},
setOnMessageCB: function(cb){
onMessageCB = cb;
}
};
})});
<servlet>
<servlet-name>TimerServlet</servlet-name>
<servlet-class>TimerWebSocketServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>TimerServlet</servlet-name>
<url-pattern>/api/timer/*</url-pattern>
</servlet-mapping>
당신이 찾고있는 것은 Firebase 및 Deployd 입니다. Firebase에는 쉽게 사용할 수있는 어댑터가 함께 제공됩니다. http://angularfire.com/
그래서 Andy Joslin은 내 의견에서 최고의 솔루션을 언급했습니다. 세 번째 옵션은 웹 소켓 또는 처리중인 다른 비동기 라이브러리를 통해 양방향으로 상태를 유지하는 것입니다 (이는 Chrome 확장 프로그램 용 Chrome 메시지 API 및 예를 들어 앱), 그리고 toddg는 그것이 어떻게 달성 될 것인지에 대한 예를 제공했습니다. 그러나 그의 예에서 그는 AngularJS에서 안티 패턴을 구현하고 있습니다. 서비스는 컨트롤러를 호출하고 있습니다. 대신 모델을 서비스 내부에 배치 한 다음 컨트롤러에서 참조해야합니다.
서비스 소켓 콜백은 서비스 모델을 수정하고 컨트롤러에서 참조되기 때문에 뷰를 업데이트합니다. 재 할당 할 수있는 원시 데이터 유형이나 변수를 처리하는 경우주의해야합니다. 컨트롤러에 대한 감시가 필요합니다.