login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[Ajax] Chat

Offline Raze - 14/04/2009 22:00 (laatste wijziging 14/04/2009 22:01)
Avatar van RazePHP beginner Hallo,

ik heb met ajax en php een chatbox gemaakt. Het werkt allemaal, op één ding na: om te zien wat de andere heeft gezegd, moet je eerst zelf iets zeggen voordat de functie opnieuw wordt uitgevoerd. Ik zou nu graag willen dat de functie handleChat de hele tijd wordt uitgevoerd (elke seconde ofzo). Ik heb al geprobeerd met setTimeout en setInterval maar het lukt me niet. Hoe moet ik dat doen?

Hier mijn code (op basis van het live search script hier op SiMa):

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function createRequestObject() 
  2. {
  3.    var req;
  4.  
  5.    if(window.XMLHttpRequest)
  6.    {
  7.       req = new XMLHttpRequest();
  8.    } 
  9.    else if(window.ActiveXObject) 
  10.    {
  11.       req = new ActiveXObject("Microsoft.XMLHTTP");
  12.    }
  13.    else 
  14.    {
  15.       alert('Your browser doens\' accept Javascript');
  16.    }
  17.  
  18.    return req;
  19.  
  20. }
  21.  
  22. var http = createRequestObject(); 
  23.  
  24. function sendChat(chatid,userid,destination_id) 
  25. {
  26. 	var text = document.getElementById('text').value;
  27.    http.open('get', 'chat.php?chatid='+chatid+'&userid='+userid+'&destination_id='+destination_id+'&text='+text+'&sendid='+Math.random(),true);
  28.    http.onreadystatechange = handleChat;
  29.    http.send(null);
  30. } 
  31.  
  32. function handleChat()
  33. {
  34. if (http.readyState != 4) { 
  35. 	document.getElementById("chatdialog").innerHTML = "<div align=\"center\" style=\"position: absolute; top: 50%; left: 50%;\"><img src=\"../images/AJAX/loading_arrows.gif\" /></div>";
  36. }
  37.    else if(http.readyState == 4 && http.status == 200)
  38.    {
  39.       if(http.responseText)
  40.       {
  41.          document.getElementById("chatdialog").innerHTML = http.responseText; 
  42.       }
  43.    } 
  44. }

12 antwoorden

Gesponsorde links
Offline henver - 14/04/2009 22:03
Avatar van henver HTML gevorderde http://webdesig.../index.php

Hier kan je wel iets uithalen denk ik 
Offline Raze - 14/04/2009 22:15
Avatar van Raze PHP beginner en is het niet mogelijk op een andere manier? ik heb dit gevolgd maar het probleem is nu dat mijn tekst gewoon verdwijnt na het door mij gekozen interval  
Offline Joost - 14/04/2009 22:15
Avatar van Joost PHP expert http://ajaxphp.packtpub.com/chapter5.htm

Dat is een hoofdstuk uit een boek dat ik heb over AJAX & PHP.
Daar wordt ok setInterval gebruikt, die moet je dus wel hebben 
Offline vinTage - 14/04/2009 22:17
Avatar van vinTage Nieuw lid imo is het probleem is dat je je innerhtml overschrijft ipv nieuw content toevoegd.
Offline Sander1993 - 14/04/2009 22:20
Avatar van Sander1993 PHP interesse werkt dit dan niet:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.setInterval("handleChat();", 1000);
Offline PRO - 14/04/2009 22:22 (laatste wijziging 14/04/2009 22:24)
Avatar van PRO JS interesse mee eens met Vintage, je moet dus eerst de oude content uitlezen, en dan de nieuwe content er achter plakken en dan opnieuw gaan schrijven.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function $id(id){
  2.   return document.getElementById(id);
  3. }
  4. var oud = $id("jeElement").innerHTML;
  5. $id("jeElement").innerHTML = oud + nieuweContent;
Offline Raze - 14/04/2009 22:41 (laatste wijziging 14/04/2009 22:45)
Avatar van Raze PHP beginner ik heb dus het volgende geprobeerd:

-bovenaan de code ->
setTimeout("handleChat()",1000);
var timeset = setTimeout("handleChat()",1000);
setTimeout("sendChat()",1000);
var timeset = setTimeout("sendChat()",1000);
idem met setInterval

Blijkbaar niets werkt, terwijl setInterval toch eig bruikbaar zou moeten zijn, niet?

EDIT: het overschrijven ipv bijschrijven heb ik op deze manier opgelost, mr weet niet of het juist is (het werkt wel)

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function handleChat()
  2. {
  3. if (http.readyState != 4) { 
  4. 	document.getElementById("chatdialog").innerHTML = "<div align=\"center\" style=\"position: absolute; top: 50%; left: 50%;\"><img src=\"../images/AJAX/loading_arrows.gif\" /></div>";
  5. }
  6.    else if(http.readyState == 4 && http.status == 200)
  7.    {
  8.       if(http.responseText)
  9.       {
  10.       	 var huidig = document.getElementByID('chatdialog').innerHTML;
  11.          document.getElementById("chatdialog").innerHTML = huidig + http.responseText;
  12.  
  13.       }
  14.    } 
  15. }


EDIT2: tis hetzelfde  
Offline vinTage - 14/04/2009 22:43
Avatar van vinTage Nieuw lid Zie de post van PRO 
Offline Raze - 14/04/2009 23:02 (laatste wijziging 14/04/2009 23:04)
Avatar van Raze PHP beginner met setInterval(handleChat,1000); gebeurt er iets: hij zet om de seconde de volledige conversatie weer erbij, ik bedoel, elke seconde verdubbelt de conversatie. dus dat is wat ik niet wil, gewoon elke seconde kijken of er niets nieuws is.

EDIT: die post van Pro, ik heb dat toegevoegd aan mijn script omdat ik dacht dat het mijn hetzelfde was (zie 2 posts eerder), maar omdat ik geen verschil zag heb ik ook het scriptje dat pro poste eens geprobeerd, maar ook daar geen verschil.

wat ik me nu afvraag: in mijn php-code, moet ik dan telkens de hele conversatie ophalen, of gewoon telkens alleen het laatst toegevoegde, want ik heb dat geprobeerd en dan toont die ook telkens alleen maar de laatst toegevoegde.
Offline Joost - 14/04/2009 23:06
Avatar van Joost PHP expert Wanneer je telkens het hele gesprek mee wilt sturen kost dat veel resources. Sla ergens in een hidden span het laatste bericht ID op wat je hebt gezien, en dan ga je alle berichten requesten die een hoger ID hebben en dus later zijn gepost. Die voeg je dan gewoon toe met ".innerHTML += ajax.responseText;", en je update dan ook direct het laatste ID wat je nu hebt ontvangen in die hidden span.
Offline vinTage - 14/04/2009 23:06
Avatar van vinTage Nieuw lid ah ja idd, niet aan gedacht 

hmm, sla de oude strlen van de innerhtml op in een variable, bij de volgende interval check je of die lengte overeenkomt, zoniet overschrijf je de zaak.
Offline Raze - 15/04/2009 20:14
Avatar van Raze PHP beginner het script werkt nu (deels) hoe ik het wil: het update nu automatisch, dus men hoeft de pagina of de functie niet meer zelf te verversen.

In IE werkt dit heel mooi, maar in FF "flikkert" de div waarin de responsetext geplaatst wordt om de 500 milliseconden (de settimeout tijd).

Ook nog iets over het enkel toevoegen van nieuwe content: ik heb geprobeerd om de huidige content op te slaan in een variabele, en dan enkel de nieuwe content toe te voegen, maar dat is me niet gelukt. Maar met het script dat ik nu heb (in IE toch), lijkt het zo dat enkel nieuwe content toegevoegd wordt, aangezien de huide tekst niet even flikkert (en dus opnieuw geladen wordt).

Hier de code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. setInterval(getData,500);
  2. function createRequestObject() 
  3. {
  4.    var req;
  5.  
  6.    if(window.XMLHttpRequest)
  7.    {
  8.       req = new XMLHttpRequest();
  9.    } 
  10.    else if(window.ActiveXObject) 
  11.    {
  12.       req = new ActiveXObject("Microsoft.XMLHTTP");
  13.    }
  14.    else 
  15.    {
  16.       alert('Your browser doens\' accept Javascript');
  17.    }
  18.  
  19.    return req;
  20.  
  21. }
  22.  
  23. var http = createRequestObject(); 
  24.  
  25. function sendChat() 
  26. {
  27. 	var text = document.getElementById('text').value;
  28.     var chatid = document.getElementById('chatid').value;
  29.     var userid = document.getElementById('userid').value;
  30.     var destination_id = document.getElementById('destination_id').value;
  31.    http.open('get', 'chat.php?chatid='+chatid+'&userid='+userid+'&destination_id='+destination_id+'&text='+text+'&sendid='+Math.random(),true);
  32.    http.send(null);
  33.  
  34. } 
  35.  
  36. function getData()
  37. {
  38.     var chatid = document.getElementById('chatid').value;
  39.     var userid = document.getElementById('userid').value;
  40.     var destination_id = document.getElementById('destination_id').value;
  41.    http.open('get', 'chat.php?chatid='+chatid+'&sendid='+Math.random(),true);
  42.    http.onreadystatechange = handleData;
  43.    http.send(null);
  44.  }
  45.  function handleData()
  46.  {
  47.  document.getElementById('chatdialog').innerHTML = http.responseText;
  48.  }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s