Einen Chat mit AJAX entwickeln - In 15 Minuten (easy)

Kompletter Quelltext

Der HTML Teil:

<!DOCTYPE html>
<html>
    <head>
         <script src="chat.js"></script>
    </head>

    <body>
         <div id="content"></div>
         <input type="text" id="text" placeholder="Deine coole Nachricht..." />
         <input type="button" value="Senden" onclick="send()" />
    </body>
</html>

Der Javascript Teil:

function send()
{
// AJAX request Objekt
var req = new XMLHttpRequest();

req.open("POST", "chat.php?send=1", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("text="+document.getElementById("text").value); 
}

var lastCheck = 0;

function receive()
{
var req = new XMLHttpRequest();

// Hat sich was an dem Request Status getan?
req.onreadystatechange = function()
{
// Wurde das Dokument erfolgreich geladen und ist bereit?
if(this.readyState == 4 && this.status == 200)
{
var json = JSON.parse(this.responseText);

for(var i = 0; i < json.length; ++i)
{
var data = json[i];
document.getElementById("content").innerHTML += data.text+'<br/>';
}

if(json.length > 0)
lastCheck = Date.now();
}
};

// Den Request mit zwei Parametern versenden
req.open("GET", "chat.php?receive=1&lastCheck=" + lastCheck, true);
req.send(); 
}

setInterval(receive, 1000);

Der PHP Teil:

<?php
function save()
{
$data  = array("text" => $_POST['text'], "date" => time());
$file = fopen("chat.json", "a");
fwrite($file, json_encode($data).",");
fclose($file);
}

function load()
{
$string = file_get_contents("chat.json");
$json = json_decode("[".substr($string, 0, -1)."]");

$newData = array();
foreach($json as $data)
{
if($data->date >= ($_GET['lastCheck']/1000))
{
$newData[] = $data;
}
}

echo json_encode($newData);
}

if(isset($_GET['send'])) save();
else if(isset($_GET['receive']) && isset($_GET['lastCheck'])) load();
?>

Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~

> 1 J