php - Event Reload - Udvikleren.dk - Programmering, webdesign og grafik

Tags: ajax php mysql

Bruger #16025 @ 25.01.12 21:13

Kære udviklere,

Jeg har i mange forsøg prøvet at opbygge en chat, hvor det kun er indholdet som bliver reloadet efter svar fra databasen. Det har fungeret fint med jQuery, i at loade efter x antal sekunder.

Men dette er problematisk da det vil overbelaste siden, og vil aldrig kunne blive funktionel. Så derfor læste jeg mig frem til at man kan gøre dette vha. Ajax.

Det har jeg også fået til at virke. Den viser alle chat-beskeder som er blevet postet til databasen, samt den tilføjer en besked såfremt man sender den - uden at den reloader siden, den reloader kun div'en. Det fungerer fint.

Men mit spørgsmål lyder på at jeg gerne vil have den til at reloade selvom at der er en person som skriver i chatten fra en anden computer - hvor den så på alles computer reloader chattens indhold / tilføjer den nyeste besked.

Min Ajax kode ser således ud:

JScript kode

 function sendMsg()
 {
     var str = document.getElementById('msg').value;
     
     if (str=="")
     {
         document.getElementById("txtHint").innerHTML="";
         return;
     } 
     
     if (window.XMLHttpRequest)
     {
         xmlhttp=new XMLHttpRequest();
     }
     else
     {
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     
     xmlhttp.onreadystatechange = function()
     {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
             document.getElementById("chat").innerHTML=xmlhttp.responseText;
         }
     }
     xmlhttp.open("GET","send.php?msg="+str,true);
     xmlhttp.send();
     
     document.getElementById('msg').value = "";
 }

PHP koden ser således ud:

PHP kode

 if(isset($_GET["msg"]))
 {
     $q = $_GET["msg"];
 }
 
 $con = mysql_connect('localhost', 'root', '');
 if (!$con)
 {
     die('Could not connect: ' . mysql_error());
 }
 
 mysql_select_db("chat", $con);
 
 
 if(isset($q))
 {
     $start = mysql_query("INSERT INTO messages VALUES ('', '".$q."')");
     if(empty($q) ? false : $start);
 }
 
 $sqlGET = "SELECT * FROM messages ORDER BY id";
 
 $resultGET = mysql_query($sqlGET);
 
 echo "<table style=\"width: 400px;\" id=\"table\" cellspacing=\"0\">";
 
 while($rowGET = mysql_fetch_array($resultGET))
 {
     echo "<tr>";
     echo "<td>Admin:</td>";
     echo "<td>" . $rowGET['besked'] . "</td>";
     echo "</tr>";
 }
  
 echo "</table>";
 
 mysql_close($con);

HTML koden ser således ud:

HTML kode

 <div id="chat"><?php require_once("send.php"); ?></div>
 <form onsubmit="return false;">
     <input type="text" id="msg" name="msg" /><br />
     <input type="button" id="send" onClick="sendMsg()" value="send" />
 </form>

Jeg håber at i forstår mit spørgsmål - ellers, så spørg endelig

Indlæg senest redigeret d. 25.01.2012 21:17 af Bruger #16025

7 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #5789 @ 26.01.12 09:41

640

Du bliver nok nød til at operere med et eller andet flag i databasen, om den er ny eller ej, evt et timestamp.

Ved første load sætter du et timestamp i javascript om hvornår brugeren er "logget ind" i chatten, dette timestamp skal være serverens tid og IKKE client dato (så kan du rende ind i problemer med at brugernes pc klokke er sat forkert)

Herefter spørger du løbende efter nye poster, igen med et tidsinterval, men du spørger KUN efter poster der har et timestamp der er ældre end det der er gemt i javascript.

Er der ingen poster, foretager du dig intet

Er der nye poster, vises disse, og det ældste timestamp gemmes igen i javascriptet, så du igen kun henter beskeder der er nyere end det timestamp du har hos klienten.

Giver det mening ?

EDIT:
Du beholder altså din sendMsg() men undlader i send.php at vise nye poster.

Opret så en ny funktion til at hente data, og smid den nederst i sendMsg

Den kunne se sådan her ud, i psuedo:

JScript kode

 var dato = new Date([PHP DATE]);
 
 function getMessages()
 {
   $.ajax({
     url: "getmessages.php?time="+dato,
     dataType: "html",
     success: function(data){
        $("#chat").append(data);
     })
   });
 }
 <table id="chat">
 </table>

getmessages.php skal så se nogenlunde sådan her ud: (kun returnere tabel rækker i html format)

PHP kode

 if(isset($_GET["time"]))
  {
      $time = $_GET["time"];
  }
  $sqlGET = "SELECT * FROM messages ORDER BY id where timestamp >" .$time;
  
  $resultGET = mysql_query($sqlGET);
  
  
  while($rowGET = mysql_fetch_array($resultGET))
  {
      echo "<tr>";
      echo "<td>Admin:</td>";
      echo "<td>" . $rowGET['besked'] . "</td>";
      echo "</tr>";
  }

Indlæg senest redigeret d. 26.01.2012 10:10 af Bruger #5789

Bruger #16025 @ 27.01.12 10:56

442

Jeg kan ikke få JavaScript koden med var dato = new Date([PHP DATE]); til at virke

Jeg har prøvet kun med new Date(), men så udskriver den hele datoen mm. Jeg skal vel have fat i et timestamp? Jeg har søgt lidt efter det, og prøvet at få det alarmeret ud - uden resultat.

Bruger #5789 @ 27.01.12 10:59

640

mht til [php date] er det fordi jeg ikke kender til php

men på din side evt i <head>, laver du bare lige en scriptblok:

<script type="text/javascript>
var dato = new Date(<? $dato > );
</script>

hvor <? $dato > er en variabel med serverens tid og dato.

/J

Bruger #2730 @ 27.01.12 11:00

1.626

Du kan ikke skubbe fra serveren til din browser (eller det kan du godt, prøv at google COMET).

Jeg tror dit problem til dels skyldes caching, webserveren kan se du kalder den samme igen og da den ikke kan se nyt indhold får du det gamle indhold. Det er helt normalt. Du kan sætte cache til false, eller du kan påføre dit kald med et unikt id du skifter for hver forespørgsel, fx. millisekunder eller lignende. Jeg har haft samme problem se evt. her: http://stackoverflow.com/questions/8639861/asp-net-mvc-and-jquery-my-controller-is-only-called-once

Bruger #16025 @ 27.01.12 12:01

442

Hvad vil i foreslå er den nemmeste måde at få udført mit spørgsmål? For jeg bliver lidt forvirret lige nu - sorry :s

Bruger #5789 @ 27.01.12 12:16

640

@Brian > jeg blev også lidt lost der ?

Bruger #11328 @ 27.01.12 14:25

1.323

Daniele, du kunne også kigge på WebSockets, de er vist ideele at bruge for at implementere en chat

Event Reload

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler