AngularJS - 利用服务/控制器模型为所有客户端创建全局计时器



我对AngularJS相当陌生,虽然我通常更喜欢解决我的问题,但我觉得我错过了使用AngularJS进行客户端/服务器编程的基本概念。

目前,我正在尝试让一个非常基本的应用程序作为我自己的概念证明。在这个应用程序中,我想要一个计时器,它只是从设定的时间倒计时(比如在这个例子中是 2 分钟(,然后重新启动。虽然我有计时器逻辑工作,但在尝试让计时器是全局的时遇到了麻烦,以便任何连接的客户端都会看到与启动它的用户相同的倒计时。

从最初的研究来看,我认为最好的方法是通过如下所示的服务:

var myApp = angular.module('countdownTimer', []);
myApp.service('timerService',['$http', function($http){
	var time = 180;
	
	return {
		getTime: getTime,
		setTime: setTime
	};
	
	function getTime(){
		return  time;
	}
	function setTime(value){
		time = value;
	}
}]);
myApp.controller('CounterController', ['$timeout','$scope', 'timerService', function($timeout, $scope, timerService){
	/**$scope.counter = 180;
	**/
	var date = new Date(null);
	date.setSeconds(timerService.getTime());
	$scope.time_format = date.toISOString().substr(14,5);
	
	
	$scope.onTimeout = function() {
		timerService.setTime(timerService.getTime()-1);
		var date = new Date(null);
		date.setSeconds(timerService.getTime());
		$scope.time_format = date.toISOString().substr(14,5);
		if (timerService.getTime() > 0){
			mytimeout = $timeout($scope.onTimeout, 1000);
			
		}
		else{
			
			//$scope.counter = 180;
			timerService.setTime(180);
			date.setSeconds(timerService.getTime());
			mytimeout = $timeout($scope.onTimeout, 1000);
		}
	}
	$scope.start = function(){
		var mytimeout = $timeout($scope.onTimeout,1000);	
	}
	
	$scope.stop = function(){
		$timeout.cancel(mytimeout);
	}
	
	
}]);
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Example </title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="app.js"></script>
	
</head>
	
<body data-ng-app="countdownTimer">
	<div data-ng-controller="CounterController">
		{{time_format}}
		<button data-ng-click="stop()">Pause</button>
		<button data-ng-click="start()">Start</button>
	</div>
	</body>
</html>

但是,当我在浏览器上打开多个选项卡并连接到此选项卡时,它们都从不同的位置开始,而不是一个全局控制的计时器。我相信这是非常明显的,但作为一个刚接触角度/网络开发的人,我不知所措。

这应该在你的服务中控制

var date = new Date(null);

将服务更新为

myApp.service('timerService',['$http', function($http){
var time = 180;

this.getTime = function(){
return  time;
}
this.setTime = function(value){
time = value;
}
}]);

使用会话、cookie 或 localStorage 有三种可能性(请注意不良做法(。 如果您有某种类型的用户,我会将计时器映射到会话,而不是让服务器处理客户端计时器的映射和获取。然后,您可以确保它的安全,并且无论用户使用什么浏览器或计算机,他都将拥有相同的计时器。

相关内容

  • 没有找到相关文章