Once the iframe is created and after the design mode is activated I call the activateHearBeat() function. This function does the refresh loop of the document calling itself with the setTimeOut() js function and calling the updateDocument() on each iteration.
<?php
function activateHeartBeat()
{
updateDocument();
setTimeout(function () { activateHeartBeat(); }, 3000);
}
?>The updateDocument() is now very simple but it will have to set all post vars to send them to the server in each async call.
<?php
function updateDocument()
{
// set post vars
// (...)
.
// do async call
var returnstring = '';
var cback = function (r,s,t){handleResponse(r);}; // drupal.js: callbackFunction(xmlHttp.responseText, xmlHttp, callbackParameter);
HTTPPost("collaborative_editor/getAsyncContent", cback, cparamenter, "");
}
?>Now the async call uses a callback function to handle the response and inserts it in the iframe using innerHTML (we'll discuss innerHTML another day)
So far the heartbeat loop calls(refreshes) itself every 3 seconds. But we'll need to set up different times depending on different flags which indicate the status of users edition. When a user is editing alone, when there are few users editing at the same time, when there has been a collision between the content edited by different users, etc. Each one of these situations should make the application refresh more or less often. Comment any other situation that crosses your mind so that I add it to this list.
Now, as I improve the previous work done, I have different paths as next step: set the cursor position, get the response loading data from database or handle the session of different users who are editing. Following the advices of my mentor I'm sure he would prefer to do the last one first. So let's go, shall we?
More about heartbeat pattern on ajaxpatterns.org: Heartbeat pattern