问题
I am trying to make an automated refresh calendar. I am using Calendar UI and i am getting data from my backend in this way
/**Calendar Config***/
//config object
$scope.uiConfig = {
calendar:{
height: 500,
width: 800,
editable: false,
//First Hour
firstHour: 8,
//Devide by half hour
slotMinutes: 30,
//default duration 01:30
defaultEventMinutes: 90,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - H:mm}'
},
header:{
//Buttons
center: 'month agendaWeek agendaDay',
left: 'title',
right: 'today prev,next'
},
defaultView: 'agendaWeek'
}
};
//Get planings By Group
$scope.getPlaningsByGroup = function(groupId){
planing.getPlaningsByGroup(groupId)
.success(function(data){
//Populate the event object
$scope.populatePlan(data);
});
}
//Populating the plan
$scope.events = [];
$scope.populatePlan = function(plans){
plans.forEach(function(plan){
start_time = moment.duration(plan.start_time);;
duration = moment.duration(plan.course.duration);
start_course = moment()
.day(plan.day)
.hour(start_time.hours())
.minutes(start_time.minutes())
.seconds(start_time.seconds())
.format("YYYY-MM-DDTHH:mm:ss");
end_time = start_time.add(duration);
end_course = moment()
.day(plan.day)
.hour(end_time.hours())
.minutes(end_time.minutes())
.seconds(end_time.seconds())
.format("YYYY-MM-DDTHH:mm:ss");
console.log(end_course);
$scope.events.push(
{
id:plan.id,
title:plan.course.title,
start:start_course,
end :end_course,
allDay:false,
}
);
});
}
//Event Source object
$scope.eventSources = [$scope.events];
I don't know if it is the wierdest way to do it but i am still a babe at angular js so please excuse this crime scene ^^ . i did a little reasearch and i decided to go with $interval provider to refresh the events. and here is the problems that i faced after trying:
Try 1 :
//Refresh events
var refresh = function(){
$('#calendar').fullCalendar('rerenderEvents');
console.log("refreshed");
}
$interval(refresh, 3000);
refresh();
Basically this did nothing
Try 2 :
//Refresh events
var refresh = function(){
$scope.events.length = 0;
$scope.getPlaningsByGroup($scope.student.group_id);
console.log("refreshed");
}
$interval(refresh, 3000);
refresh();
And this worked but i know that this is a suicide attempt to the backend. My Question is how to solve this madness. Thanks
回答1:
You can use two strategies to keep your calendar in sync with server without make lots of requests.
The first one, is called long polling. Put it simply, client makes a request, your server will keep it alive until new events are available.
The second one, is called WebSocket. It's a full-duplex communication channel where you can send data in both directions.
I don't work with PHP, so I don't know if laravel has support for long polling or websocket, but I think that would not be difficult to create.
来源：https://stackoverflow.com/questions/29868003/refresh-events-in-angular-calendar-ui-fullcalendar-with-laravel-as-a-backend