AJAX chatbox
15 mei 2008 - 18:45   
geplaatst door: DennisvdH
Hallo allemaal,

Ik ben bezig met een chatbox gescript in AJAX en PHP, maar ik kom er niet helemaal aan uit. Het is afkomstig uit een open source, met hier en daar mijn eigen aanpassingen.

Kan iemand mij vertellen hoe je de chatters kunt weergeven? Ik heb al een tabel aangemaakt in de database, die de naam + id + status + tijd van login opslaat.

De code is alsvolgt:


var GetChaturl = "getChatData.php";
var SendChaturl = "sendChatData.php";
var GetUsers = "getUsers.php";
var lastID = -1; // wordt vervangen door laatste ID bij nieuwe chattexten
window.onload = initJavaScript;

function initJavaScript() {
document.forms['chatForm'].elements['chatbarText'].setAttribute('autocomplete','off'); // hack firefox
checkStatus(''); // controleert status
checkName(); // controleert naam
receiveChatText(); // chatdataoverdracht
receiveUsers(); // online leden
}

// haalt eerste chatberichten op
function receiveChatText() {
if (httpReceiveChat.readyState == 4 || httpReceiveChat.readyState == 0) {
  httpReceiveChat.open("GET",GetChaturl + '?lastID=' + lastID + '&rand='+Math.floor(Math.random() * 1000000), true);
   httpReceiveChat.onreadystatechange = handlehHttpReceiveChat;
  httpReceiveChat.send(null);
}
}

// verbinding met database voor nieuwe data
function handlehHttpReceiveChat() {
 if (httpReceiveChat.readyState == 4) {
   results = httpReceiveChat.responseText.split('---'); // velden worden gedeeld met ---
   if (results.length > 2) {
   for(i=0;i < (results.length-1);i=i+3) { //
    insertNewContent(results[i+1],results[i+2]); // nieuwe chatberichten plaatsen
   }
   lastID = results[results.length-4];
   }
   setTimeout('receiveChatText();',1000); // nieuwe data ophalen (1 seconde = 1000)
 }
}

// plaatst nieuwe data op pagina
function insertNewContent(liName,liText) {
insertO = document.getElementById("outputList");
oLi = document.createElement('li');
oSpan = document.createElement('span');
oSpan.setAttribute('className','name'); // IE hack
oSpan.setAttribute('class','name');
oName = document.createTextNode(liName+': ');
oText = document.createTextNode(liText);
oSpan.appendChild(oName);
oLi.appendChild(oSpan);
oLi.appendChild(oText);
insertO.insertBefore(oLi, insertO.firstChild);
}

// slaat nieuwe chatberichten op op server
function sendComment() {
currentChatText = document.forms['chatForm'].elements['chatbarText'].value;
if (currentChatText != '' & (httpSendChat.readyState == 4 || httpSendChat.readyState == 0)) {
currentName = document.forms['chatForm'].elements['name'].value;
param = 'n='+ currentName+'&c='+ currentChatText;
httpSendChat.open("POST", SendChaturl, true);
httpSendChat.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  httpSendChat.onreadystatechange = handlehHttpSendChat;
  httpSendChat.send(param);
  document.forms['chatForm'].elements['chatbarText'].value = '';
} else {
setTimeout('sendComment();',1000);
}
}

// afhandeling chatberichtzending
function handlehHttpSendChat() {
 if (httpSendChat.readyState == 4) {
  receiveChatText(); // chat refreshen na plaatsen chatbericht
 }
}


// afhandeling input en submit
function checkStatus(focusState) {
currentChatText = document.forms['chatForm'].elements['chatbarText'];
oSubmit = document.forms['chatForm'].elements['submit'];
if (currentChatText.value != '' || focusState == 'active') {
oSubmit.disabled = false;
} else {
oSubmit.disabled = true;
}
}

// XMLHttpRequest object
function getHTTPObject() {
 var xmlhttp;
 /*@cc_on
 @if (@_jscript_version >= 5)
   try {
     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
     try {
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (E) {
       xmlhttp = false;
     }
   }
 @else
 xmlhttp = false;
 @end @*/
 if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
   try {
     xmlhttp = new XMLHttpRequest();
   } catch (e) {
     xmlhttp = false;
   }
 }
 return xmlhttp;
}

// zenden en ontvangen van data
var httpReceiveChat = getHTTPObject();
var httpSendChat = getHTTPObject();

Ervanuitgaand dat de leden al in de db staan, en alleen weergeven moeten worden. Dus als er een verdwijnt/bijkomt uit de db dan moet het ook automatisch te worden bijgewerkt zonder refresh, dus met AJAX.