So erstellen Sie eine einfache Web-basierte Chat-Anwendung

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial werden wir eine einfache webbasierte Chat-Anwendung mit PHP und jQuery erstellen. Diese Art von Dienstprogramm wäre perfekt für ein Live-Support-System für Ihre Website.

Einführung

Die Chat-Anwendung, die wir heute erstellen werden, wird ziemlich einfach sein. Es wird ein Anmelde- und Abmeldesystem, AJAX-ähnliche Funktionen und Unterstützung für mehrere Benutzer bieten.

Schritt 1: HTML-Markup

Wir werden dieses Tutorial beginnen, indem wir unsere erste Datei namens index.php erstellen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<div id="wrapper">
  <div id="menu">
		<p class="welcome">Welcome, <b></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>
	
	<div id="chatbox"></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){

});
</script>
</body>
</html>

Wir beginnen unseren HTML-Code mit den üblichen Tags DOCTYPE, html, head und body. Im head-Tag fügen wir Ihren Titel und einen Link zu Ihrem CSS-Stylesheet (style.css) hinzu.
Innerhalb des Body-Tags strukturieren wir unser Layout innerhalb des #wrapper div. Wir werden drei Hauptblöcke haben: ein einfaches Menü, unsere Chatbox und unsere Nachrichteneingabe; jeder mit seinem jeweiligen div und id.
- Das Menüband besteht aus zwei Absatzelementen. Der erste wird dem Benutzer willkommen sein und wird nach links schweben und der zweite wird ein Ausgangslink sein und wird nach rechts schweben. Wir haben auch ein Div, um die Elemente zu löschen.
- Der #chatbox div enthält unser Chatlog. Wir laden unser Protokoll aus einer externen Datei mit jQuery's AJAX-Anfrage.
- Das letzte Element in unserem #wrapper div wird unser Formular sein, das eine Texteingabe für die Benutzernachricht und eine Absenden-Schaltfläche enthalten wird.
Wir fügen unsere Skripte hinzu, um die Seite schneller zu laden. Wir werden zuerst mit dem Google jQuery-CDN verlinken, da wir die jQuery-Bibliothek für dieses Tutorial verwenden werden. An unserem zweiten Script-Tag werden wir arbeiten. Wir werden unseren gesamten Code laden, nachdem das Dokument fertig ist.

Schritt 2: CSS-Styling

Wir werden nun etwas CSS hinzufügen, damit unsere Chat-Anwendung besser aussieht als mit dem Standard-Browser-Stil. Der folgende Code wird unserer style.css-Datei hinzugefügt.

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

Es gibt nichts besonderes an der oben genannten css außer der Tatsache, dass einige IDs oder Klassen, für die wir einen Stil festgelegt haben, ein bisschen später hinzugefügt werden.

Wie Sie oben sehen können, sind wir damit fertig, die Benutzeroberfläche des Chats zu erstellen.

Schritt 3: Verwenden von PHP zum Erstellen eines Anmeldeformulars.

Jetzt werden wir ein einfaches Formular implementieren, das den Benutzer nach seinem Namen fragt, bevor wir fortfahren.

<?
session_start();

function loginForm(){
	echo'
	<div id="loginform">
	<form action="index.php" method="post">
		<p>Please enter your name to continue:</p>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		<input type="submit" name="enter" id="enter" value="Enter" />
	</form>
	</div>
	';
}

if(isset($_POST['enter'])){
	if($_POST['name'] != ""){
		$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
	}
	else{
		echo '<span class="error">Please type in a name</span>';
	}
}
?>

Die von uns erstellte loginForm() -Funktion besteht aus einem einfachen Anmeldeformular, das den Benutzer nach seinem / ihrem Namen fragt. Wir verwenden dann eine if and else-Anweisung, um zu überprüfen, ob die Person einen Namen eingegeben hat. Wenn die Person einen Namen eingegeben hat, setzen wir diesen Namen als $_SESSION['name']. Da wir eine Cookie-basierte Sitzung zum Speichern des Namens verwenden, müssen wir session_start() aufrufen, bevor etwas an den Browser ausgegeben wird.

Eine Sache, auf die Sie genau achten sollten, ist, dass wir die Funktion htmlspecialchars() verwendet haben, die Sonderzeichen in HTML-Entitäten umwandelt, wodurch die Namensvariable vor Cross-Site-Scripting (XSS) geschützt wird. Wir werden diese Funktion später auch der Textvariablen hinzufügen, die in das Chat-Protokoll geschrieben wird.

Anmeldeformular anzeigen

Um das Anmeldeformular anzuzeigen, falls sich ein Benutzer nicht angemeldet hat und daher keine Sitzung erstellt hat, verwenden wir eine andere if and else-Anweisung um die #wrapper div- und script-Tags in unserem ursprünglichen Code. Im gegenteiligen Fall wird dadurch das Login-Formular ausgeblendet und das Chat-Feld angezeigt, wenn der Benutzer angemeldet ist und eine Sitzung erstellt hat.;

<?php
if(!isset($_SESSION['name'])){
	loginForm();
}
else{
?>
<div id="wrapper">
	<div id="menu">
		<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>	
	<div id="chatbox"></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>

Begrüßungs- und Abmelde-Menü

Das Login-System für diese Chat-Anwendung ist noch nicht fertig. Wir müssen dem Benutzer weiterhin erlauben, sich abzumelden und die Chat-Sitzung zu beenden. Wenn Sie sich erinnern können, enthielt unser ursprüngliches HTML-Markup ein einfaches Menü. Lassen Sie uns zurückgehen und etwas PHP-Code hinzufügen, der dem Menü mehr Funktionalität verleiht.

Zuerst fügen wir der Begrüßungsnachricht den Namen des Benutzers hinzu. Dazu geben wir die Sitzung des Benutzernamens aus.

<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

Um es dem Benutzer zu ermöglichen, sich abzumelden und die Sitzung zu beenden, werden wir uns selbst vorauseilen und kurz jQuery verwenden.

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'index.php?logout=true';}		
	});
});
</script>

Der jquery-Code über simple zeigt eine Bestätigungsmeldung an, wenn ein Benutzer auf den #exit-Link klickt. Wenn der Benutzer den Exit bestätigt und daher entscheidet, die Sitzung zu beenden, senden wir sie an index.php?logout=true. Mit dieser einfachen Methode wird eine Variable namens logout mit dem Wert true erstellt. Wir müssen diese Variable mit PHP abfangen:

if(isset($_GET['logout'])){	
	
	//Simple exit message
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
	fclose($fp);
	
	session_destroy();
	header("Location: index.php"); //Redirect the user
}

Wir sehen nun, ob eine Get-Variable von 'Logout' mit der Funktion isset() existiert. Wenn die Variable über eine URL übergeben wurde, z. B. den oben genannten Link, beenden wir die Sitzung des Benutzernamens.

Bevor wir die Session des Benutzers mit der Funktion session_destroy() zerstören, wollen wir eine einfache Exit-Nachricht in das Chat-Log schreiben. Es wird sagen, dass der Benutzer die Chat-Sitzung verlassen hat. Dazu verwenden wir die Funktionen fopen(), fwrite() und fclose(), um unsere Datei log.html zu manipulieren, die, wie wir später sehen werden, als unser Chat-Protokoll erstellt wird. Bitte beachten Sie, dass wir dem div eine Klasse von 'msgln' hinzugefügt haben. Wir haben bereits das CSS-Styling für dieses div definiert.

Danach zerstören wir die Sitzung und leiten den Benutzer auf dieselbe Seite um, auf der das Login-Formular erscheint.

Schritt 4: Umgang mit Benutzereingaben

Nachdem ein Benutzer unser Formular eingereicht hat, möchten wir seine Eingabe erfassen und in unser Chat-Protokoll schreiben. Um dies zu tun, müssen wir jQuery und PHP verwenden, um synchron auf der Client- und Serverseite zu arbeiten.

jQuery

Fast alles, was wir mit jQuery tun werden, um mit unseren Daten umzugehen, dreht sich um die jQuery-Post-Anfrage.

	//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});

Bevor wir etwas tun, müssen wir die Eingabe des Benutzers oder das, was er eingegeben hat, in die #submitmsg-Eingabe aufnehmen. Dies kann mit der Funktion val() erreicht werden, die den in einem Formularfeld festgelegten Wert erhält. Wir speichern diesen Wert nun in der Variablen clientmsg.
Hier kommt unser wichtigster Teil: die jQuery-Post-Anfrage. Dies sendet eine POST-Anfrage an die Datei post.php, die wir in Kürze erstellen werden. Es sendet die Eingaben des Clients oder was in der Variable clientmsg gespeichert wurde.
Zum Schluss löschen wir die Eingabe #usermsg, indem Sie das Wertattribut auf leer setzen.

Bitte beachten Sie, dass der obige Code nicht in unser Skript-Tag passt, wo wir den jQuery-Logout-Code platziert haben.

PHP - post.php

Im Moment senden wir POST-Daten an die post.php-Datei, sobald der Benutzer das Formular abschickt, und sendet eine neue Nachricht. Unser Ziel ist es jetzt, diese Daten zu erfassen und in unser Chat-Protokoll zu schreiben.

<?
session_start();
if(isset($_SESSION['name'])){
	$text = $_POST['text'];
	
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
	fclose($fp);
}
?>

Bevor wir irgendetwas machen, müssen wir die Datei post.php mit der Funktion session_start() starten, da wir die Sitzung des Benutzernamens in dieser Datei verwenden werden.
Mit dem isset boolean überprüfen wir, ob die Sitzung für 'name' existiert, bevor Sie etwas anderes tun.
Wir erfassen nun die POST-Daten, die von jQuery an diese Datei gesendet wurden. Wir speichern diese Daten in der Variablen $text.
Diese Daten sowie alle Benutzereingabedaten werden in der log.html-Datei gespeichert. Diese Daten, wie auch alle allgemeinen Benutzereingabedaten, Um dies zu tun, öffnen wir die Datei mit dem Modus auf der fopen-Funktion zu 'a', die laut php.net öffnet die Datei nur zum Schreiben; Wenn die Datei nicht existiert, versuchen Sie, sie zu erstellen. Wir schreiben dann unsere Nachricht in die Datei mit der Funktion fwrite().
- Die Nachricht, die wir schreiben werden, wird im .msgln div eingeschlossen. Es enthält das Datum und die Uhrzeit, die von der Funktion date (), der Sitzung des Benutzernamens und dem Text generiert werden, der ebenfalls von der Funktion htmlspecialchars() umgeben ist, um XSS zu verhindern.
Zum Schluss schließen wir unsere Datei mit fclose().

Schritt 5: Anzeigen des Chat-Protokolls (log.html) Inhalt

Alles, was der Benutzer gepostet hat, wird mit jQuery bearbeitet und veröffentlicht. Es wird mit PHP in das Chatprotokoll geschrieben. Das einzige, was noch zu tun ist, ist, das aktualisierte Chat-Protokoll dem Benutzer anzuzeigen.

Um uns etwas Zeit zu sparen, laden wir das Chat-Protokoll in den #chatbox div hoch, wenn es Inhalt hat.

	<div id="chatbox"><?php
	if(file_exists("log.html") && filesize("log.html") > 0){
		$handle = fopen("log.html", "r");
		$contents = fread($handle, filesize("log.html"));
		fclose($handle);
		
		echo $contents;
	}
	?></div>

Wir verwenden eine ähnliche Routine wie die Datei post.php, außer dass wir diesmal nur den Inhalt der Datei lesen und ausgeben.

Die jQuery.ajax-Anfrage

Die Ajax-Anfrage ist der Kern von allem, was wir tun. Diese Anfrage ermöglicht uns nicht nur, Daten über das Formular zu senden und zu empfangen, ohne die Seite zu aktualisieren, sondern auch, um die angeforderten Daten zu verarbeiten.

//Load the file containing the chat log
	function loadLog(){		

		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
		  	},
		});
	}

Wir verpacken unsere Ajax-Anfrage in eine Funktion. Sie werden sehen, warum in einer Sekunde. Wie Sie oben sehen, werden wir nur drei der jQuery ajax request Objekte verwenden.

url: Eine Zeichenfolge der anzufordernden URL. Wir verwenden den Log-Namen des Logs log.log.
cache: Dies verhindert, dass unsere Datei zwischengespeichert wird. Es stellt sicher, dass wir jedes Mal, wenn wir eine Anfrage senden, ein aktualisiertes Chat-Protokoll erhalten.
erfolg: Dadurch können wir eine Funktion anfügen, die die angeforderten Daten weitergibt.

Wie Sie sehen, verschieben wir die Daten, die wir angefordert haben (html), in das #chatbox div.

Automatisches Scrollen

Wie Sie vielleicht schon in anderen Chat-Anwendungen gesehen haben, scrollt der Inhalt automatisch nach unten, wenn der Chat-Log-Container (#chatbox) überläuft. Wir werden ein einfaches und ähnliches Feature implementieren, das die Scrollhöhe des Containers vor und nach der Ajax-Anfrage vergleicht. Wenn die Scroll-Höhe nach der Anfrage größer ist, werden wir den Animate-Effekt von jQuery benutzen, um das #chatchbox div zu scrollen.

	//Load the file containing the chat log
	function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div	
				
				//Auto-scroll			
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}				
		  	},
		});
	}

Wir speichern zuerst die Scrollhöhe #chatbox div in die alte scrollHeight-Variable, bevor wir die Anfrage machen.
Nachdem unsere Anfrage erfolgreich beendet wurde, speichern wir die Scrollhöhe von #chatbox div in der neuen scrollHeight-Variablen.
Wir vergleichen dann beide Scrollhöhenvariablen mit einer if-Anweisung. Wenn newscrollHeight größer als oldscrollHeight ist, verwenden wir den animate-Effekt, um das #chatbox-div zu scrollen.

Kontinuierliches Aktualisieren des Chat-Protokolls

Jetzt kann eine Frage auftauchen: Wie werden wir die neuen Daten, die zwischen den Benutzern hin und her gesendet werden, ständig aktualisieren? Oder um die Frage neu zu formulieren, wie werden wir fortwährend Anfragen senden, um die Daten zu aktualisieren?

setInterval (loadLog, 2500);	//Reload file every 2500 ms or x ms if you wish to change the second parameter

Die Antwort auf unsere Frage liegt in der Funktion setInterval. Diese Funktion führt unsere loadLog() Funktion alle 2,5 Sekunden aus, und die loadLog-Funktion fordert die aktualisierte Datei an und scrollt das div automatisch.

Fertig

Wir sind fertig! Ich hoffe, dass Sie gelernt haben, wie ein einfaches Chat-System funktioniert, und wenn Sie Vorschläge zu irgendetwas haben, werde ich sie gerne begrüßen. Dieses Chat-System ist so einfach wie es mit einer Chat-Anwendung möglich ist. Sie können dies bearbeiten und mehrere Chat-Räume erstellen, ein administratives Backend hinzufügen, Emoticons hinzufügen, ect. Der Himmel hier ist deine Grenze.

Im Folgenden finden Sie einige Links, die Sie überprüfen möchten, wenn Sie diese Chat-Anwendung erweitern möchten:

Sichern Sie Ihre Formulare mit Formschlüsseln - verhindern Sie XSS (Cross-Site Scripting) und Cross-Site Request Forgery
Ein Formular ohne Seitenaktualisierung mit jQuery einreichen - Erweitern Sie unsere Ajax-Anfrage
So erstellen Sie AJAX-Anforderungen mit Raw-Javascript - Erfahren Sie, wie Anforderungen hinter den Kulissen mit reinem Javascript arbeiten.

Folgen Sie uns auf Twitter, oder abonnieren Sie den NETTUTS RSS-Feed für mehr tägliche Web-Entwicklungstuts und -artikel.