Ein wichtiger Aspekt bei der Entwicklung einer kommerziellen Website ist die Organisation des Feedbacks des Publikums. Und natürlich ist die direkte Kommunikation mit den Seitenbesuchern der Korrespondenz per E-Mail oder dem Ausfüllen von Kontaktformularen deutlich vorzuziehen. Zu diesem Zweck wurden viele Anwendungen entwickelt, mit denen Benutzer über Text-, Audio- oder Videonachrichten kommunizieren können.

Skripte zum Organisieren von Chats, die wir Ihnen vorstellen möchten, können problemlos in Ihre Website integriert werden, wodurch das Kommunikationsniveau zwischen Website-Besuchern und mit einem Online-Berater einer Unternehmenswebsite oder eines Online-Shops auf ein neues Niveau gehoben wird. Machen wir gleich eine Reservierung – alle hier gesammelten Skripte gehören zur Premiumklasse, d.h. nicht frei. Ihre Kosten halten sich jedoch in einem durchaus vertretbaren Rahmen und werden sich nicht spürbar auf Ihr Budget auswirken. In Kürze werden wir eine Auswahl kostenloser Skripte zum Erstellen eines Chats veröffentlichen. Abonnieren Sie uns in den sozialen Netzwerken oder per RSS, damit Sie keinen Beitrag verpassen.

Letzte Aktualisierung: 31.10.2015

Als wir das letzte Mal den Controller und das Modell definiert haben, erstellen wir jetzt den Rest des Chats. Definieren wir zunächst Ansichten.

Hauptansichtscode Index.cshtml wird so aussehen:

@model AjaxChat.Models.ChatModel @( Layout = null; ) Chat in Ajax und JQuery @Styles.Render("~/Content/Site.css") Geben Sie einen Namen ein: Login @Ajax.ActionLink("Login", "Index " , new ( user = "" ), new AjaxOptions ( UpdateTargetId = "container", OnFailure = "LoginOnFailure", OnSuccess = "LoginOnSuccess" ), new ( @id = "LoginButton", @style = "visibility:hidden;" ) ) @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js") @Scripts.Render("~/Scripts/chat.js" )

Dies ist eine Ansicht ohne Masterseite. Ein div-Element mit id="Username" zeigt den Benutzernamen an. Der Block mit id="LastRefresh" soll den Zeitpunkt des letzten Chat-Updates anzeigen und der div mit id="Error" soll eventuell auftretende Fehler anzeigen.

Und für den Login selbst haben wir ein Textfeld und einen Button. Wenn Sie jedoch einen Spitznamen eingeben und auf einen Button klicken, werden die Daten nicht sofort an den Server übermittelt, da es sich hierbei nicht um ein Formular handelt. Das eigentliche Senden der Daten an den Server erfolgt über einen Ajax-Link mit der ID = „LoginButton“:

@Ajax.ActionLink("Login", "Index", new ( user = "" ), new AjaxOptions ( UpdateTargetId = "container", OnFailure = "LoginOnFailure", OnSuccess = "LoginOnSuccess" ), new ( @id = "LoginButton ", @style = "visibility:hidden;" ))

Wenn Sie auf den Link klicken, wird der Block mit der ID="container" aktualisiert. Aus diesem Grund erfolgt eine teilweise Aktualisierung der aktuellen Seite mithilfe von Ajax und nicht durch ein normales Neuladen der Seite. Aber wir selbst werden den Link nicht anklicken. Wir werden es nicht einmal sehen, da sein Stil auf „sichtbarkeit: verborgen“ eingestellt ist.

Der Klick erfolgt automatisch in der in der Ansicht enthaltenen Datei chat.js:

$(document).ready(function () ( // login $("#btnLogin").click(function () ( var nickName = $("#txtUserName").val(); if (nickName) ( // Wir erstellen einen Link mit Parametern, der für den Zugriff verwendet wird. var href = "/Home?user=" + encodeURIComponent(nickName); , href) ).click(); //setze das Feld mit dem Spitznamen des Benutzers $("#Username").text(nickName) )); //Bei erfolgreicher Anmeldung Nachrichten laden Funktion LoginOnSuccess(result) ( Scroll(); ShowLastRefresh(); // alle fünf Sekunden den Chat aktualisieren setTimeout("Refresh();", 5000); //Nachrichten durch Drücken der Eingabetaste senden $ (" #txtMessage").keydown(function (e) ( if (e.keyCode == 13) ( e.preventDefault(); $("#btnMessage").click(); ) )); Schaltfläche Click-Handler zum Senden von Nachrichten $("#btnMessage").click(function () ( var text = $("#txtMessage").val(); if (text) ( //Rufen Sie die Index-Methode auf und übergeben Sie die „ chatMessage“ Parameter var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + encodeURIComponent(text); $("#ActionLink") .attr(" href", href).click(); ) )); //Handler für die Schaltfläche zum Beenden des Chats $("#btnLogOff").click(function () ( //rufen Sie die Index-Methode auf und übergeben Sie die „ logOff" Parameter var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&logOff=true"; $("#ActionLink").attr(" href", href). click(); document.location.href = "Home"; )); ) //Wenn ein Fehler vorliegt, wird beim Anmelden eine Fehlermeldung angezeigt. Funktion LoginOnFailure(result) ( $("#Username").val(""); $("#Error").text(result.responseText) ; setTimeout("$ ("#Error").empty();", 2000); // das Chat-Feld alle fünf Sekunden aktualisieren function Refresh() ( var href = "/Home?user=" + encodeURIComponent($ ("#Username") .text()); $("#ActionLink").attr("href", href).click(); setTimeout("Refresh();", 5000); Nachrichtenfunktion ChatOnFailure(result) ) ( $("#Error").text(result.responseText); setTimeout("$("#Error").empty();", 2000); ) // bei erfolgreichem Empfang von eine Antwort von der Serverfunktion ChatOnSuccess(result ) ( Scroll(); ShowLastRefresh(); ) //zum unteren Rand des Fensters scrollen function Scroll() ( var win = $("#Messages"); var height = win. scrollHeight; win.scrollTop(height); ) // Anzeige der Zeit der letzten Chat-Aktualisierung Funktion ShowLastRefresh() ( var dt = new Date(); var time = dt.getHours() + ":" + dt.getMinutes( ) + ":" + dt.getSeconds(); $(" #LastRefresh").text("Letzte Aktualisierung war um " + Zeit); )

Um Login-Daten zu senden und auf einen Link zu klicken, schreiben wir folgende Zeilen in den Click-Handler:

// einen Link mit Parametern erstellen, die für den Zugriff verwendet werden var href = "/Home?user=" + encodeURIComponent(nickName); href = href + "&logOn=true"; // Automatischer Klick auf einen Ajax-Link $("#LoginButton").attr("href", href).click();

Da der Parameter logOn=true in der Anfrage an den Server übergeben wird, sendet die Index-Methode bei der Verarbeitung dieser Anfrage eine Teilansicht an den Client Chatroom: return PartialView("ChatRoom", chatModel); . Lassen Sie uns diese Ansicht erstellen:

@( Html.RenderPartial("History", Model); ) @Ajax.ActionLink("ActionLink", "Index", new ( user = "", logOn = "", logOff = "", chatMessage = "" ), neue AjaxOptions ( UpdateTargetId = "RefreshArea", OnSuccess = "ChatOnSuccess", OnFailure = "ChatOnFailure"), neu ( @id = "ActionLink", @style = "visibility:hidden;" ))

Dies ist eine vom ChatModel typisierte Teilansicht, die von der Index-Methode übergeben wird. Es enthält Felder zum Eingeben und Senden von Nachrichten sowie eine Schaltfläche zum Verlassen des Chats.

Darüber hinaus gibt es einen div id="RefreshArea"-Block, der direkt zur Anzeige von Nachrichten und Benutzern gedacht ist. Um diese Informationen darzustellen, wird eine Teilansicht aufgerufen Geschichte, die wir nun erstellen werden. Und es gibt auch einen unsichtbaren Ajax-Link, der den div id="RefreshArea"-Block aktualisiert:

@Ajax.ActionLink("ActionLink", "Index", new ( user = "", logOn = "", logOff = "", chatMessage = "" ), new AjaxOptions ( UpdateTargetId = "RefreshArea", OnSuccess = "ChatOnSuccess" , OnFailure = "ChatOnFailure" ), new ( @id = "ActionLink", @style = "visibility:hidden;" ))

In der obigen Javascript-Datei wird bei erfolgreicher Anmeldung die Funktion LoginOnSuccess aufgerufen, die wiederum die Funktion Refresh() aufruft:

Funktion Refresh() ( var href = "/Home?user=" + encodeURIComponent($("#Username").text()); $("#ActionLink").attr("href", href).click( ); setTimeout("Refresh();", 5000);

Diese Funktion generiert erneut eine Abfragezeichenfolge mit Parametern für den Ajax-Link und führt einen Autoklick darauf durch. Dadurch wird der Block div id="RefreshArea" alle fünf Sekunden mit neuen Daten aktualisiert.

Eine ähnliche Aktion wird auch ausgeführt, wenn Sie auf die Schaltfläche klicken, um eine Nachricht an den Chat zu senden:

Var href = "/Home?user=" + encodeURIComponent($("#Username").text()); href = href + "&chatMessage=" + encodeURIComponent(text); $("#ActionLink").attr("href", href).click();

Und da in beiden Fällen bei der Übergabe von Parametern an die Index-Methode des Controllers die Parameter logOn und logOff nicht gesetzt werden, gibt die Index-Methode als Antwort eine Teilansicht zurück History.cshtml: return PartialView("History", chatModel);

Jetzt erstellen wir die Teilansicht selbst History.cshtml:

@using AjaxChat.Models @model ChatModel

Online-Chat: @Model.Users.Count

@msg.Date
@if (msg.User != null) ( @(msg.User.Name + ":") @msg.Text ) else ( @msg.Text )

Schließlich können Sie die Anwendung noch auf irgendeine Weise gestalten. Am Ende sollte es ungefähr so ​​aussehen. Wenn wir beginnen, sehen wir das Anmeldefeld:

Die Live-Kommunikation auf der Website wird den Besucher nicht gleichgültig lassen, da Sie immer im Chat schreiben können und er Ihnen etwas antworten wird. Diese Funktion finden Sie immer seltener auf Websites, die Entwickler vergessen haben und mehr darauf verweisen Foren und Kommentare. Wenn es jedoch möglich ist, einen Chat auf der Website zu installieren, besteht kein Grund, diese Gelegenheit zu verpassen, die Benutzer werden nur dankbar sein. In dieser Lektion schauen wir uns an, wie man mithilfe von Avatar-Diensten einen sehr interessanten Chat für eine Website erstellt, der der Kommunikation eine angenehmere Form verleiht. Um einen solchen AJAX-Chat zu erstellen, verwenden wir PHP, MySQL und jQuery. Zunächst schauen wir uns das HTML-Markup an, das nach HTML5 aufgebaut ist und die Verwendung der neuen, kürzeren DOCTYPE-Syntax und das Weglassen des Typattributs in Skript-Tags ermöglicht.
index.html

So erstellen Sie einen Chat für eine Website mit PHP | Demo für die RUDEBOX-Website

Um einen scrollbaren Bereich mit Chatzeilen zu organisieren, verwenden wir das jScrollPane-Plugin. Dieses Plugin verfügt über eigene Stile, die in den Kopfabschnitten enthalten sind.
Das Chat-Layout besteht aus vier Hauptbereichen: der oberen Leiste, dem Chat-Container, dem Benutzercontainer und der unteren Leiste. Das letzte Div enthält Formulare für die Benutzerregistrierung und die Übermittlung von Nachrichten. Das Nachrichtenübermittlungsformular ist standardmäßig ausgeblendet und wird nur angezeigt, wenn sich der Benutzer erfolgreich beim Chat-System angemeldet hat.
Notiz! Tabellendefinitionen sind in der Datei tables.sql in den Quellen verfügbar. Sie können Abfragetext zum Erstellen von Tabellen verwenden. Außerdem müssen Sie bei der Installation von Chat auf Ihrem Host die Einstellungen in ajax.php auf Ihre Daten für die Verbindung mit der MySQL-Datenbank ändern.
Wenn Sie die Tabelle erstellt und alles getan haben, was in der Notiz gesagt wird, dann besprechen wir das PHP-Skript, das den Chat steuert. Die erste Datei, die wir uns ansehen werden, ist ajax.php. Es verarbeitet AJAX-Anfragen von der Clientseite aus jQuery und gibt Daten im JSON-Format aus.
ajax.php

/* Datenbankkonfiguration. Fügen Sie Ihre Daten hinzu */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Ende des D*/ error_reporting(E_ALL ^ ​​​​E_NOTICE); erfordern „classes/DB.class.php“; erfordern „classes/Chat.class.php“; erfordern „classes/ChatBase.class.php“; erfordern „classes/ChatLine.class.php“; erfordern „classes/ChatUser.class.php“; session_name("webchat"); session_start(); if(get_magic_quotes_gpc())( // Zusätzliche Schrägstriche entfernen array_walk_recursive($_GET,create_function("&$v,$k","$v = stripeslashes($v);")); array_walk_recursive($_POST,create_function(" &$v,$k","$v = stripeslashes($v);")); ) try( // Mit der Datenbank verbinden DB::init($dbOptions); $response = array(); // Verarbeitung Unterstützte Aktionen: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); break; case "checkLogged" : $response = Chat::checkLogged(); break; case "logout": $response = Chat::submitChat($_POST["chatText"] ); break; case „getUsers“: $response = Chat::getChats(); ) echo json_encode($response) Catch(Exception $e)( die(json_encode(array("error" => $e->getMessage())));

Der Einfachheit halber wird eine Switch-Anweisung verwendet, um die Aktionen zu definieren, die das Skript verarbeitet. Es implementiert Chat-Subsysteme, Anmelde-/Abmeldefunktionen und Aktionen zum Abfragen einer Liste von Replikaten und Benutzern online.
Die Ausgabe erfolgt in Form von JSON-Nachrichten (die mit jQuery einfach verarbeitet werden können), Fehler erzeugen Ausnahmen. Die switch-Anweisung verteilt alle Anfragen an die entsprechenden statischen Methoden der Chat-Klasse, die später in diesem Abschnitt besprochen werden.
DB.class.php

DB ( private static $instance; private $MySQLi; private function __construct(array $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[" db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) ( throw new Exception("Database error.); ) $this->MySQLi->set_charset("utf8"); ) öffentliche statische Funktion init(array $dbOptions)( if(self::$instance exampleof self)( return false; ) self::$instance = new self($dbOptions); ) public static function getMySQLiObject())( return self::$instance ->MySQLi; ) öffentliche statische Funktion query($q)( return self::$instance->MySQLi->query($q); ) public static function esc($str)( return self::$instance->MySQLi ->real_escape_string(htmlspecialchars($str));

Die DB-Klasse ist ein Datenbankmanager. Der Konstruktor ist als privat deklariert, sodass das Objekt nicht außerhalb der Klasse erstellt werden kann und die Initialisierung nur über die statische init()-Methode möglich ist. Es nimmt ein Array von MySQL-Verbindungsparametern und erstellt eine Instanz der Klasse, die in der statischen Variablen self::$instance enthalten ist. Dadurch wird sichergestellt, dass jeweils nur eine Verbindung zur Datenbank besteht.
Der Rest der Klasse implementiert die Kommunikation mit der Datenbank, die auf der statischen query()-Methode basiert.
ChatBase.class.php

/* Basisklasse, die von den Klassen ChatLine und ChatUser verwendet wird */ class ChatBase( // Dieser Konstruktor wird von allen Chat-Klassen verwendet: öffentliche Funktion __construct(array $options)( foreach($options as $k=>$v) ( if(isset ($this->$k))( $this->$k = $v; ) ) ) )

Dies ist eine einfache Basisklasse. Sein Hauptzweck besteht darin, einen Konstruktor zu definieren, der ein Array von Parametern entgegennimmt, aber nur die in der Klasse definierten speichert.
ChatLine.class.php

/* Chat-Zeile */ class ChatLine erweitert ChatBase( protected $text = "", $author = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_lines (author, gravatar , Text) WERTE ("".DB::esc($this->author)."", "".DB::esc($this->gravatar)."", "".DB::esc($ this ->text)."")"); // Ein MySQLi-Objekt der Klasse DB zurückgeben return DB::getMySQLiObject(); ) )

Die ChatLine-Klasse ist eine abgeleitete Klasse von ChatBase. Ein Objekt dieser Klasse kann einfach erstellt werden, indem ein Textarray, der Name des Autors und ein Gravatar-Element an den Konstruktor übergeben werden. Die Klasseneigenschaft Gravatar enthält den MD5-Hash der E-Mail-Adresse. Es ist erforderlich, einen Benutzer-Avatar zu erhalten, der einer E-Mail-Adresse von der Website gravatar.com entspricht.
Diese Klasse definiert auch eine Speichermethode, die das Objekt in der Datenbank speichert. Da die Methode ein in der DB-Klasse enthaltenes MySQLi-Objekt zurückgibt, können Sie mithilfe der Eigenschaft „affected_rows“ überprüfen, ob der Vorgang erfolgreich abgeschlossen wurde.
ChatUser.class.php

Die Klasse ChatUser erweitert ChatBase( protected $name = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($ this ->name)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) public function update())( DB::query (" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."") ON DUPLICATE SCHLÜSSEL-UPDATE last_activity = NOW()"); ) )

Die Klasse verfügt über die Eigenschaften name und gravatar (beachten Sie den geschützten Zugriffsmodifikator – die Eigenschaften sind in der ChatBase-Klasse verfügbar und wir können ihre Werte im Konstruktor festlegen).
Die Klasse definiert eine update()-Methode, die das Feld last_activity mit dem aktuellen Zeitwert aktualisiert. Dies zeigt, dass der Benutzer das Chatfenster geöffnet hält und als Online-Autor gezählt werden sollte.
Chat.class.php

/* Die Chat-Klasse enthält öffentliche statische Methoden, die in ajax.php verwendet werden */ class Chat( öffentliche statische Funktion login($name,$email)( if(!$name || !$email)( throw new Exception(" Füllen Sie alle erforderlichen Felder aus. strtolower(trim ($email))); $user = new ChatUser(array("name" => $name, "gravatar" => $gravatar) // Die save-Methode gibt ein MySQLi-Objekt zurück if($user- >save()- >affected_rows != 1)( throw new Exception("Der angegebene Name wird verwendet."); ) $_SESSION["user"] = array("name" => $name, "gravatar" = > $gravatar); "status" => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar) ) öffentliche statische Funktion checkLogged())( $response = array("logged" => false) ; if($_SESSION["user"]["name"])( $response["logged"] = true; $response["loggedAs"] = array("name" => $_SESSION[" user"][ "name"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"])); ) return $response; ) öffentliche statische Funktion logout())( DB::query("DELETE FROM webchat_users WHERE name = "".DB::esc($_SESSION["user"]["name"])."""); $_SESSION = array(); unset($_SESSION); return array("status" => 1);

Dieser Code erledigt die ganze Arbeit. Die switch-Anweisung in der Datei ajax.php wählte Aktionen aus, die den Methoden dieser Klasse entsprachen. Jede dieser Methoden gibt ein Array zurück, das dann mithilfe der Funktion json_encode() in ein JSON-Objekt konvertiert wird (dies geschieht am Ende der Datei ajax.php).
Wenn sich ein Benutzer anmeldet, werden sein Name und sein Gravatar als Elemente des $_SESSION-Arrays gespeichert und stehen in nachfolgenden Anfragen zur Verfügung.
Chat.class.php

Öffentliche statische Funktion subscribeChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Du hast den Chat verlassen"); ) if(!$chatText)( throw new Exception("Du hast den Chat nicht verlassen hat eine Nachricht eingegeben ."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["name"], "gravatar" => $_SESSION["user"]["gravatar" ], " text" => $chatText)); // Die Speichermethode gibt ein MySQLi-Objekt zurück $insertID = $chat->save()->insert_id; return array("status" => 1, "insertID" => $insertID); ) öffentliche statische Funktion getUsers())( if($_SESSION["user"]["name"])( $user = new ChatUser(array("name" => $_SESSION["user"][ "name"])) ; $user->update(); ) // Chateinträge löschen, die älter als 5 Minuten sind und Benutzer, die 30 Sekunden lang inaktiv sind DB::query("DELETE FROM webchat_lines WHERE ts< SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object())( $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; ) return array("users" => $users, "total" => DB: :query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt); ) öffentliche statische Funktion getChats($lastID)( $lastID = (int)$lastID; $result = DB::query("SELECT * FROM webchat_lines WHERE id > ".$lastID." ORDER BY id ASC"); $chats = array(); while($chat = $result->fetch_object())( // Gibt die Zeit der Nachrichtenerstellung im GMT-Format (UTC) zurück: $chat->time = array("hours" => gmdate("H " ,strtotime($chat->ts)), "minutes" => gmdate("i",strtotime($chat->ts))); $chat->gravatar = Chat::gravatarFromHash($chat->gravatar ) ; $chats = $chat; ) return array("chats" => $chats ) public static function gravatarFromHash($hash, $size=23)( return "http://www.gravatar.com/avatar/ " .$hash."?size=".$size."&default=". urlencode("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=".$size) )

Die Methode getChats() verwendet die Funktion gmdate, um die Uhrzeit im GMT-Format anzuzeigen. Auf der Clientseite verwenden wir die Stunden- und Minutenwerte, um sie in einem JavaScript-Objekt festzulegen, und als Ergebnis wird die Zeit entsprechend der Zeitzone des Benutzers angezeigt.
Chat-Stile sind in der Datei chat.css enthalten. Stile sind unabhängig vom Rest der Seite und können problemlos in eine bestehende Website integriert werden. Sie müssen lediglich HTML-Markup, Stile und JavaScript-Dateien einbinden.
chat.css

/* Haupt-Chat-Container */ #chatContainer( width:510px; margin:100px auto; position:relative; ) /* Obere Leiste */ #chatTopBar( height:40px; background:url("../img/solid_gray.jpg ") repeat-x #d0d0d0; border:1px solid #fff; margin-bottom:15px; position:relative; color:#777; text-shadow:1px 1px 0 #FFFFFF; ) #chatTopBar .name( position:absolute; top:10px; left:40px; ) #chatTopBar img( left:9px; position:absolute; top:8px; ) /* Chat */ #chatLineHolder( height:360px; width:350px; margin-bottom:20px; ) . chat(background:url("../img/chat_line_bg.jpg") repeat-x #d5d5d5; min-height:24px; padding:6px; border:1px solid #FFFFFF; padding:8px 6px 4px 37px; position:relative ; margin:0 10px 10px 0; ) .chat:last-child( margin-bottom:0; ) .chat span( color:#777777; text-shadow:1px 1px 0 #FFFFFF; Schriftgröße:12px; ) . chat .text( Farbe:#444444; Anzeige:inline-block; Schriftgröße:15px; Überlauf:versteckt; vertikal ausrichten:oben; Breite:190px; ) .chat .gravatar( Hintergrund:url("http:// www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=23") ohne Wiederholung; links:7px; Position:absolut; oben:7px; ) .chat img( display:block; sichtbarkeit:versteckt; ) .chat .time( position:absolute; rechts:10px; oben:12px; Schriftgröße:11px; ) .chat .author( margin-right:6px; Schriftart -Größe: 11px)

Alles beginnt mit dem Festlegen der Stile für das #chatContainer-Div. Die horizontale Zentrierung erfolgt mithilfe der Eigenschaft margin:100px auto; . Dieses Div ist in eine obere Leiste, einen Chatbereich, einen Benutzerbereich und eine untere Leiste unterteilt.
Im oberen Bereich werden Informationen zum registrierten Benutzer angezeigt. Es erhält eine relative Positionierung, sodass der Avatar, der Name und die Abmeldeschaltfläche entsprechend positioniert werden.
Darauf folgt ein Div, das alle Chatzeilen enthält – #chatLineHolder. Dieses Div hat eine feste Höhe und Breite, und im jQuery-Teil dieses Tutorials verwenden wir das jScrollPane-Plugin, um es in einen scrollbaren Inhaltsbereich mit einem seitlichen Schieberegler umzuwandeln.
chat.css

/* Benutzerbereich */ #chatUsers( Hintergrundfarbe:#202020; Rand: 1 Pixel fest #111111; Höhe: 360 Pixel; Position: absolut; rechts: 0; oben: 56 Pixel; Breite: 150 Pixel; ) #chatUsers .user( Hintergrund :url("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536" no-repeat 1px 1px #444444; border:1px solid #111111; float:left; width :32px; ) #chatUsers .user img( border:1px solid #444444; display:block; sichtbarkeit:hidden; ) /* Bottom Bar */ #chatBottomBar( background:url("../img/solid_gray .jpg") repeat-x #d0d0d0; position:relative; padding:10px; border:1px solid #fff; ) #chatBottomBar .tip( position:absolute; width:0; height:0; border:10px solid transparent; border -bottom-color :#eeeee; top:-20px; left:20px; Arial,sans-serif; border:1px solid; border-color:#c1c1c1 #eee #eee #c1c1c1; Polsterung:0 5px; Rand rechts: 5px; Breite: 185 Pixel; Gliederung: keine; ) #submitForm( display:none; )

Im zweiten Teil der Stildatei gestalten wir den #chatUsers-Container und die Divs für den Benutzer. Jeder aktive Chat-Benutzer wird durch ein 32 x 32 Pixel großes Gravatar dargestellt. Das Standardbild wird als Hintergrund verwendet und wenn das eigentliche Bild vom gravatar.com-Server geladen wird, erscheint es oben. Dies verhindert das störende Flackern, das normalerweise beim Laden eines Bildes auftritt.
Der Rest des Codes bezieht sich auf das untere Bedienfeld und das Einreichungsformular. Das div .tip-Element wird zu einem mit CSS erstellten Dreieck, indem seine Höhe und Breite auf Null und die Strichstärke auf „groß“ gesetzt werden.
chat.css

/* Standardstile für jScrollPane ändern */ .jspVerticalBar( background:none; width:20px; ) .jspTrack( background-color:#202020; border:1px solid #111111; width:3px; right:-10px; ) ( Hintergrund:URL("../img/slider.png") no-repeat; Breite:20px; links:-9px; Höhe:20px !important; margin-top:-5px; ) .jspDrag:hover( Hintergrund - position:links unten; ) /* Zusätzliche Stile */ a.logoutButton( background-color:#bbb; border:1px solid #eee !important; color:#FFFFFF !important; font-size:12px; padding:5px 9px ; position:absolute; text-shadow:0 0 7px #888 inset; a.logoutButton:hover( text-shadow :1px 1px 0 #888; -moz-box-shadow:0 0 7px #666 inset; -webkit-box-shadow: 0 0 7px #666 inset ) #chatContainer . blueButton(background:url("../img/button_blue.png") no-repeat; border:none !important; color :#516D7F !important; display:inline-block; Schriftgröße:13px; Höhe:29px; text-align:center; text-shadow:1px 1px 0 rgba(255, 255, 255, 0,4); Breite:75px; Rand:0; Cursor:Zeiger; ) #chatContainer .blueButton:hover( Hintergrundposition:links unten; ) p.noChats, #chatUsers .count( klar:both; Schriftgröße:12px; Polsterung:10px; text-align:center; text-shadow:1px 1px 0 #111111; ) #chatUsers .count( Schriftgröße:11px; ) .rounded( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #chatErrorMessage( width :100%; left:0; background-color:#ab0909; border-bottom: #fff;text-shadow:1px 1px 0 #940f0f;

Fahren wir mit dem letzten Teil unseres Tutorials fort – dem jQuery-Code. Der Chat funktioniert, indem er Ereignisse von den Registrierungs- und Nachrichtenformularen sowie von der Schaltfläche „Abmelden“ empfängt und außerdem geplante AJAX-Anfragen an den Server sendet, um nach neuen Nachrichten und Benutzern zu suchen.
Der PHP-Teil verarbeitet AJAX-Anfragen in der Datei ajax.php. jQuery generiert die folgenden AJAX-Anfragen:

• Benutzeranmeldung: eine POST-Anfrage;
• Benutzerabmeldung: eine POST-Anfrage;
• Überprüfung der Benutzer, die online sind: wird alle 15 Sekunden durchgeführt;
• Prüfung auf neue Einträge: Jede Sekunde wird eine GET-Anfrage generiert. Dieser Vorgang kann zu einer sehr hohen Belastung des Webservers führen, daher ist das Skript optimiert und je nach Chat-Aktivität kann der Zeitraum für die Anforderungsgenerierung auf 15 Sekunden erhöht werden.

$(document).ready(function())( // Führen Sie die Init-Methode aus, wenn das Dokument fertig ist: chat.init(); )); var chat = ( // data enthält Variablen zur Verwendung in Klassen: data: ( lastID: 0, noActivity: 0 ), // Init bindet Event-Handler und setzt Timer: init: function())( // jQuery defaultText-Plugin verwenden aktiviert unten: $("#name").defaultText("Nickname"); $("#email").defaultText("Email (used by Gravatar)" // Konvertieren Sie das #chatLineHolder-Div in jScrollPane, // speichern die Plugin-API in chat.data: chat.data.jspAPI = $("#chatLineHolder").jScrollPane(( VerticalDragMinHeight: 12, VerticalDragMaxHeight: 12 )).data("jsp"); // Verwenden Sie die Arbeitsvariable, um zu verhindern // mehrere Formulare senden: varworking = false; // Eine Person im Chat registrieren: $("#loginForm").submit(function())( if(working) return false;working = true; // Verwenden Sie unsere tzPOST-Funktion // (unten definiert): $.tzPOST("login",$(this).serialize(),function(r)(working = false; if(r.error)( chat.displayError(r.error) ; ) else chat.login( r.name,r.gravatar); )); falsch zurückgeben; ));

Die init()-Methode dient dazu, Event-Handler an den Chat zu binden und Timer-Funktionen auszuführen, mit denen eine Prüfung auf neue Chat-Einträge und eine Liste der Online-Benutzer geplant wird. Wir verwenden unsere eigenen Wrapper-Funktionen – $.tzGET und $.tzPOST. Sie übernehmen die Hauptarbeit, eine lange Liste von Parametern für AJAX-Anfragen anzugeben.
script.js

// Neue Chatzeilendaten senden: $("#submitForm").submit(function())( var text = $("#chatText").val(); if(text.length == 0)( return false; ) if(working) return false;working = true; // Generiere eine temporäre ID für den Chat: var tempID = "t"+Math.round(Math.random()*1000000), params = ( id: tempID , Autor: chat .data.name, Gravatar: chat.data.gravatar, Text: text.replace(//g,">") ); // Verwenden Sie die Methode addChatLine, um Chat sofort und ohne hinzuzufügen Warten auf den Abschluss der AJAX-Anfrage: chat.addChatLine($.extend((),params)); // Verwenden Sie die tzPOST-Methode, um den Chat // über eine AJAX-POST-Anfrage zu senden: $.tzPOST("submitChat",$ (this).serialize(),function( r)(working = false; $("#chatText").val(""); $("div.chat-"+tempID).remove(); params[" id"] = r.insertID; chat. addChatLine($.extend((),params)); return false; // Den Benutzer deaktivieren: $("a.logoutButton").live("click",function())( $("#chatTopBar > span").fadeOut(function())( $(this).remove( ); ); $("#submitForm").fadeOut(function())( $("#loginForm").fadeIn(); )); // Überprüfen Sie den Verbindungsstatus des Benutzers (Browser-Update) $.tzGET("checkLogged",function(r)( if(r.logged)( chat.login(r.loggedAs.name,r.loggedAs.gravatar); ) ) ); // Selbstausführende Timeout-Funktionen (function getChatsTimeoutFunction())( chat.getChats(getChatsTimeoutFunction); ))(); (function getUsersTimeoutFunction())( chat.getUsers(getUsersTimeoutFunction); ))(); ),

Im zweiten Teil des Skripts fahren wir mit der Bindung von Event-Handlern fort. In der Formularübermittlungsfunktion werden Sie feststellen, dass, wenn ein Benutzer einen neuen Chat-Eintrag erstellt, eine temporäre Zeichenfolge erstellt wird, die sofort im Chat-Fenster angezeigt wird, ohne auf den Abschluss der AJAX-Anfrage warten zu müssen. Sobald die Aufnahme abgeschlossen ist, wird die temporäre Zeile vom Bildschirm entfernt. Dies vermittelt dem Nutzer das Gefühl, dass der Chat blitzschnell läuft, während die eigentliche Aufzeichnung im Hintergrund stattfindet.
Am Ende dieses Codeabschnitts werden zwei benannte selbstausführende Funktionen gestartet. Diese Funktionen werden als Parameter an die Methoden chat.getChats() bzw. chat.getUsers() übergeben, sodass zusätzliche Zeitüberschreitungen festgelegt werden können.
script.js

// Die Login-Methode verbirgt die Login-Daten des Benutzers // und zeigt das Nachrichteneingabeformular an login: function(name,gravatar)( chat.data.name = name; chat.data.gravatar = gravatar; $("#chatTopBar") .html( chat.render("loginTopBar",chat.data)); $("#loginForm").fadeOut(function())( $("#submitForm").fadeIn(); $("#chatText" ).focus( ); )); // Die Render-Methode generiert HTML-Markup // das für andere Methoden benötigt wird: render: function(template,params)( var arr = ; switch(template)( case „loginTopBar“ : arr = [ " ", "",params.name, "Exit"]; break; case "chatLine": arr = [ " ","",params.author, ":",params.text,"",params.time,""]; break; case "user": arr = [ " " ]; break; ) // Eine einzelne Join-Methode für ein Array ist // schneller als das Zusammenführen mehrerer Strings return arr.join(""); ),

In diesem Teil des Codes erfordert die render()-Methode Aufmerksamkeit. Abhängig vom Vorlagenparameter wird eine Vorlage erstellt. Anschließend erstellt die Methode den angeforderten HTML-Code und gibt ihn zurück, wobei sie die Werte des zweiten Parameters des params-Objekts einbettet.
script.js

// Die Methode addChatLine fügt der Seite eine Chatzeile hinzu addChatLine: function(params)( // Alle Zeitmessungen werden im Zeitzonenformat des Benutzers angezeigt var d = new Date(); if(params.time) ( // PHP gibt die Zeit im UTC-Format (GMT) zurück. Wir verwenden dies, um ein Datumsobjekt zu generieren // und geben es dann im Zeitzonenformat des Benutzers aus // JavaScript konvertiert es für uns time = (d.getHours().< 10 ? "0" : "") + d.getHours()+":"+ (d.getMinutes() < 10 ? "0":"") + d.getMinutes(); var markup = chat.render("chatLine",params), exists = $("#chatLineHolder .chat-"+params.id); if(exists.length){ exists.remove(); } if(!chat.data.lastID){ // Если это первая запись в чате, удаляем // параграф с сообщением о том, что еще ничего не написано: $("#chatLineHolder p").remove(); } // Если это не временная строка чата: if(params.id.toString().charAt(0) != "t"){ var previous = $("#chatLineHolder .chat-"+(+params.id - 1)); if(previous.length){ previous.after(markup); } else chat.data.jspAPI.getContentPane().append(markup); } else chat.data.jspAPI.getContentPane().append(markup); // Так как мы добавили новый контент, нужно // снова инициализировать плагин jScrollPane: chat.data.jspAPI.reinitialise(); chat.data.jspAPI.scrollToBottom(true); },

Die Methode addChat() nimmt als Parameter ein Objekt, das den Chat-String, den Namen des Autors und den Gravatar enthält, und fügt den Chat-String an der entsprechenden Stelle im div#chatContainer ein. Jede Chatzeile (sofern sie nicht temporär ist) verfügt über eine eindeutige ID, die von MySQL zugewiesen wird. Diese ID ist der Klassenname für die Chatzeile im Chat-123-Format.
Wenn die Methode addChat() ausgeführt wird, prüft sie, ob die vorherige Zeile vorhanden ist (für chat-123 prüft sie, ob chat-122 vorhanden ist). Wenn es vorhanden ist, fügt die Methode danach eine neue Zeile ein. Wenn nicht, wird dem div einfach eine neue Zeile hinzugefügt. Diese einfache Technik steuert das Einfügen von Zeilen in der richtigen Reihenfolge und behält diese während des gesamten Chats bei.
script.js

// Diese Methode fordert den letzten Chat-Eintrag // an (beginnend mit lastID) und fügt ihn der Seite hinzu. getChats: function(callback)( $.tzGET("getChats",(lastID: chat.data.lastID),function(r)( for(var i=0;i 3)( nextRequest = 2000; ) if(chat. data.noActivity > 10)( nextRequest = 5000; ) // 15 Sekunden if(chat.data.noActivity > 20)( nextRequest = 15000; ) setTimeout(callback,nextRequest )); // Eine Liste aller Benutzer anfordern. getUsers: function(callback)( $.tzGET("getUsers",function(r)( var users = ; for(var i=0; i< r.users.length;i++){ if(r.users[i]){ users.push(chat.render("user",r.users[i])); } } var message = ""; if(r.total

Und die letzte Datei, die benötigt wird, besteht darin, alle Nachrichten aus der Tabelle zu empfangen:

Der Kreis ist geschlossen und der Chat funktioniert. Wie Sie sehen, ist es ziemlich schwierig, einen Chat zu führen, und Sie müssen über viel Wissen verfügen. Ich hoffe aber, dass dieser Artikel Ihnen diese Aufgabe erheblich erleichtert. Absolut jeder Chat, egal wie komplex er auch sein mag, basiert auf den in diesem Artikel beschriebenen Prinzipien, sodass Sie ihn bedenkenlos als Rahmen verwenden können.

Hallo, liebe Webmaster! Ich bin mir sicher, dass Sie möchten, dass Ihre Website aktiv besucht wird, damit Besucher sich für das auf Ihrer Website veröffentlichte Material interessieren und immer wieder zurückkommen. Höchstwahrscheinlich haben Sie bereits ein Forum und ein Gästebuch auf Ihrer Website. Aber es fehlt noch etwas... Was? Plaudern! Ein Chatroom, in dem man chatten kann, wodurch Besucher immer wieder zurückkommen ...

Was wird dafür benötigt?

Also, was ist der Deal?! Lassen Sie uns unseren eigenen Chat schreiben, der alle Ihre Anforderungen erfüllt, schnell und kompakt ist.
Lassen Sie uns nun entscheiden, was unser Chat können soll.
Zunächst müssen neue Besucher registriert und bereits registrierten Besuchern Zutritt gewährt werden.
Zweitens muss er in der Lage sein, Emoticons einzufügen – diese lustigen kleinen Bilder, auf die die meisten Chats heutzutage nicht mehr verzichten können.
Drittens müssen Nutzer privat kommunizieren können, d. h. persönlich miteinander, damit andere Besucher ihr Gespräch nicht sehen (natürlich außer Administrator J)

Lassen Sie uns nun entscheiden, welche Technologien wir bei der Entwicklung des Chats verwenden werden. Wir werden in PHP schreiben und um Benutzer zu registrieren, werden wir Informationen über sie in einer MySQL-Datenbank speichern. Der Text des Chatrooms selbst (nennen wir den Chatroom die zwischen Besuchern ausgetauschten Informationen) wird in einer Textdatei gespeichert.

Schreiben wir zunächst einen einfachen Chat ohne private und administrative Funktionen, in dem sich Besucher registrieren, miteinander kommunizieren und Emoticons einfügen können.

Es wird ungefähr so ​​aussehen.

Jetzt werde ich noch ein paar Details klären, die vor dem Schreiben des Codes besprochen werden müssen.

Die Textdatei chat.txt (in der unser Chatraum gespeichert wird) sollte nicht mehr als 20 aktuelle Nachrichten enthalten (um den Datenverkehr zu reduzieren und das Laden des Chats zu beschleunigen).

Beim Betreten des Chats muss der Besucher einen Benutzernamen (auch Spitzname genannt) und ein Passwort eingeben. Wenn ein solcher Benutzername bereits in unserer Datenbanktabelle gespeichert ist, sollte das Skript prüfen, ob das Passwort korrekt ist, und, falls korrekt, eine Weiterleitung durchführen der Besucher des Chats, und wenn er falsch ist, kehren Sie zur Hauptseite zurück, um den Benutzernamen und das Passwort erneut einzugeben und ihn darüber zu informieren, dass das Passwort falsch ist. Wenn in der Tabelle kein solcher Login vorhanden ist, müssen Sie den Besucher registrieren, d.h. Fügen Sie der Tabelle Daten über ihn (Login und Passwort) hinzu. Es besteht jedoch keine Notwendigkeit, eine separate Seite für die Registrierung eines neuen Besuchers zu erstellen (im Folgenden nennen wir die Besucher „Chatniks“ J), da sonst die Notwendigkeit, einige zusätzliche Aktionen durchzuführen, um am Chat teilzunehmen, einen erheblichen Teil der Besucher abschreckt.

Wenn Sie außerdem vorhaben, einen kleinen Chat zu erstellen, um beispielsweise mit Freunden zu kommunizieren, wäre es eine gute Idee, alles, was im Chat gesagt wurde, in einer separaten Datei aufzuzeichnen (nennen wir sie History.txt). In Zukunft können Sie einige Aktionen für diese Datei ausführen (z. B. den Inhalt dieser Datei jeden Tag um 12.00 Uhr per E-Mail an Sie senden und ihn dann löschen). Wir werden dies jedoch tun, nachdem unser Chat bereits funktioniert.

Welche Dateien werden zum Erstellen eines Chats benötigt?

Lassen Sie uns nun entscheiden, welche Dateien erstellt werden müssen, damit der Chat funktioniert. Unten finden Sie eine vollständige Liste der Chat-Dateien mit einer Beschreibung, wofür jede Datei benötigt wird.

index.php – Chat-Hauptseite. Zeigt ein Formular zur Eingabe Ihres Benutzernamens und Passworts sowie Informationen darüber an, wie lange eine Person aktuell im Chat ist (und möglicherweise die letzten 20 Antworten).

chat.php – nun, das ist unsere wichtigste und wichtigste Datei. Was es nicht tut: Es überprüft Besucher auf die Richtigkeit des Login-Passwort-Paares, registriert den Besucher und verbindet darüber hinaus eine ziemlich große Anzahl von PHP-Dateien mit sich selbst, die unten beschrieben werden.

chat.inc.php – diese PHP-Datei enthält ein HTML-Dokument mit Frames, auf die mehr als ein Chat mit etwas Selbstachtung verzichten kann, sowie ein kleines Stück PHP-Code.

send.php – diese Datei zeigt ein Formular mit Textfeldern zum Eingeben von Bemerkungen, Einfügen von Emoticons und anderen nützlichen Dingen sowie einem Feld zum Auswählen eines Gesprächspartners (entweder zum Chatten in einem Chatroom oder zur privaten Kommunikation) an.

smiles.php – hier ist alles klar. Diese Datei zeigt Emoticons in einer Schleife auf dem Bildschirm an und generiert JavaScript-Code, um den Emoticon-Code in die Antwortzeile des Chatters einzufügen.

add.php – diese Datei formatiert Chatter-Antworten und fügt sie in die chat.txt-Datei ein.

del.php – Wenn ein Chatter den Chat verlässt, wird der Chatter aus der Liste der aktiven Chatter entfernt (d. h. diejenigen, die gerade ihre wichtigen Probleme besprechen und im Chat sind).

includer.php – enthält 3 Variablen: $myserver, $mylogin, $mypassword. Die Variable $myserver gibt den Server an, auf dem sich die Datenbank befindet (normalerweise localhost), $mylogin und $mypassword – den Benutzernamen und das Passwort für die Verbindung zur Datenbank.

text.php – PHP-Datei, die für die Aktualisierung der Informationen im Chatroom verantwortlich ist.

Users.php – eine PHP-Datei, die eine Liste der Besucher anzeigt, die sich aktuell im Chat befinden, und außerdem JavaScript-Code generiert, um den Spitznamen des ausgewählten Chatters in das Kommentareingabefenster einzufügen.

logo.html – eine Datei, die das Chat-Logo auf dem Bildschirm anzeigt.

chat.txt – das ist der Chatraum; darin werden die letzten 20 Replikate gespeichert.

History.txt – ihr Zweck wurde bereits oben beschrieben.

chat_users.sql – SQL-Datei, die die Struktur der chat_users-Tabelle enthält

logo_chat.jpg – Chat-Logo.

style.css – im Chat verwendetes Stylesheet.

1…7.gif – 7 Emoticon-Zeichnungen, die im Chat verwendet werden.

Und jetzt müssen wir einen Punkt erwähnen, der ohne Erklärung nicht erklärt werden kann.

Was sonst?

Wie verlassen die Leute normalerweise einen Chat? Das ist richtig, selten klickt jemand auf die Schaltfläche „Beenden“; normalerweise schließt er einfach das Chatfenster. Wir müssen diese Momente verfolgen, um verstorbene Chatter umgehend aus der Liste der Chatteilnehmer zu entfernen. Nehmen wir an, einer Person ist etwas passiert und sie aktualisiert die Seite. Eine ziemlich reale Situation. In beiden Fällen tritt also das Unload-Ereignis auf. Es kann mit dem JavaScript-Handler onUnload verfolgt werden. Dieses Ereignis tritt im aktuellen Fenster auf, kurz bevor das Dokument entladen wird. Wir müssen also auf jede der oben genannten Aktionen des Besuchers richtig reagieren: Wenn der Chatter den Chat verlässt, entfernen wir ihn aus der Liste der aktiven Besucher, und wenn er einfach aktualisiert wird, unternehmen wir nichts. Aber wir haben denselben Handler, der auf unterschiedliche Aktionen reagiert! Wie kann dieses Problem gelöst werden? Ich werde näher darauf eingehen, wenn ich die Funktionsweise der Dateien chat.inc.php, send.php und del.php beschreibe.
Wenn Sie sehen möchten, wie der im Artikel beschriebene Chat funktioniert, können Sie zu http://chat.micro.org.ua gehen und sicherstellen, dass alles, was in diesem Artikel beschrieben wird, funktioniert J.

Beginnen wir mit der Arbeit

Nun, da alle Fragen geklärt zu sein scheinen, können Sie direkt mit der Codeeingabe beginnen. Ich beginne damit, den vollständigen Code der Datei zu schreiben, und beschreibe dann im Detail, was sie bewirkt. Und bevor Sie den Code eingeben, erstellen Sie leere chat.txt- und History.txt-Dateien.
Legen Sie außerdem im selben Verzeichnis, in dem Sie den Chat haben, 7 GIF-Dateien ab – das sind unsere Emoticons. Ich denke, dass Sie 7 Emoticons im Internet finden können, aber wenn Sie keine Emoticons haben, können Sie sie von http://chat.micro.org.ua nehmen.
Erstellen Sie nun ein Stylesheet style.css. Wir werden es später zum Entwerfen des Chats benötigen. Wenn Sie jedoch kein CSS verwenden möchten, müssen Sie es nicht erstellen. Wenn Sie sich dennoch für die Verwendung von CSS entscheiden, erstellen Sie zwei Klassen: Normal und Title, sie werden uns später nützlich sein J.
Jetzt brauchen wir ein Chat-Logo. Mein Logo ist das Wort „MICRO“, geschrieben auf blauem Hintergrund in goldenen Buchstaben, 55 Pixel hoch und 195 Pixel breit. Ich überlasse diesen Punkt Ihrem Ermessen.
Nun, öffnen Sie Ihren bevorzugten PHP-Editor (ich hoffe, es ist nicht Notepad J) und beginnen Sie ... Ich beginne mit den Dateien, die von untergeordneter Bedeutung sind. Damit Sie später bei der Erläuterung der Funktionsweise der Hauptdateien nicht von deren Beschreibung abgelenkt werden.

Chat_users.sql

Zuerst müssen Sie die Tabelle „chat_users“ in der Datenbank erstellen. Also hier ist der Code:

TABELLE chat_users ERSTELLEN (
id int(10) NOT NULL auto_increment,
Anmeldetext NICHT NULL,
Passworttext NICHT NULL,
privater Text NICHT NULL,
aktiv tinyint(2) NOT NULL Standardwert „0“,
PRIMÄRSCHLÜSSEL (id)
) TYPE=MyISAM;

Wir haben eine Tabelle mit fünf Spalten erstellt:
1. id – Chatter-ID.
2. Login – Login (Spitzname) des Chatters
3. Passwort – Chatter-Passwort
4. Privat ist eine Grundlage für die Zukunft, wenn wir am „Privat“ arbeiten.
5. aktiv – hier wird nur eine Nummer gespeichert: 1 – wenn der Chatter gerade im Chat ist, und 0, wenn der Chatter gerade nicht im Chat ist.
Hier gibt es nichts Kompliziertes.

Incuder.php

//Ihr Passwort

Dies sind Ihre Daten zur Verbindung mit der Datenbank.

Logo.html

Hier gibt es nicht viel zu erklären. Wir erstellen ein HTML-Dokument, fügen das Chat-Logo-Bild darin ein und drücken es mit der Zeile „TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0“ auf die Seite.

Kommen wir nun zu den Hauptchatdateien.

Index.php

Chatten Sie auf MICRO.ORG.UA

Bisher gibt es in diesem Dokument keine PHP-Deskriptoren, aber später, wenn die Funktionalität des Chats erweitert wird, werden hier einige Daten über den Betrieb des Chats angezeigt.
In dieser Datei zeigen wir das Eingabeformular zur Eingabe des Benutzernamens (Spitzname) und des Passworts an. Außerdem verwenden wir JavaScript, um zu überprüfen, ob die Felder zur Eingabe des Benutzernamens und des Passworts nicht leer bleiben, und konvertieren außerdem sowohl den Benutzernamen als auch das Passwort in Kleinbuchstaben vergleichen wir, sodass sie nicht übereinstimmen (aus Gründen der Grundsicherheit). Nun, wir zeigen auch den Chat-Titel (seinen Namen) und die Urheberrechte an.
Daten aus dem Formular werden an die Datei chat.php gesendet. Das schauen wir uns jetzt an.

Chat.php

Was machen wir in dieser Datei? Zunächst stellen wir die Fehlerunterdrückung (error_reporting(0)) ein – egal was passiert, Besucher sollten keine Fehlermeldungen sehen. Als nächstes fügen wir die Datei includer.php mit Daten für die Verbindung zur Datenbank hinzu. Wir wählen die Login- und Passwortwerte aus dem POST-Array aus und, wenn sie nicht leer sind (obwohl wir diese Option bereits in der Datei index.php vorgesehen haben, was passiert, wenn jemand sofort http://chat eingibt.*** .com/chat.php , dann übertragen wir es in diesem Fall nach index.php), fahren wir mit dem Skript fort. Anschließend prüfen wir, ob wir in der Tabelle chat_users einen Benutzer mit diesem Login haben. Wenn nicht (der Nickname ist nicht besetzt), dann tragen wir den Login und das Passwort in die Tabelle ein – so erfolgt die Registrierung. Wenn ein solcher Login bereits in der Tabelle vorhanden ist, prüfen wir, ob das vom Besucher eingegebene Passwort mit dem Passwort in der Tabelle übereinstimmt. Wenn nicht, erstellen wir einen JavaScript-Code mit einer Meldung, dass das Passwort falsch ist, und übertragen ihn an die Seite index.php. Wenn alles in Ordnung ist (das entsprechende „Login-Passwort“-Paar ist in der Tabelle zu finden, dann geben wir dem Besucher die Datei chat.inc.php). Darüber hinaus führen wir einige Manipulationen J an der Tabelle durch: Wir geben die Zahl 1 in das „aktive“ Feld dieses Besuchers ein, d.h. mach es aktiv.

Chat.inc.php

Dieses Dokument verdient besondere Aufmerksamkeit.
Mit der Zeile „“ stellen wir die Häufigkeit der Dateiaktualisierung auf fünf Sekunden ein. Nach meinen Beobachtungen sind 5 Sekunden für unseren Chat die optimale Aktualisierungsfrequenz, da die Datei, die jedes Mal gelesen wird, nur aus 20 Zeilen besteht. Je schneller text.php aktualisiert wird, desto besser für uns.
Selbstverständlich unterdrücken wir Fehlermeldungen.
Als nächstes lesen wir mit der Funktion file() Informationen aus der Datei chat.txt und zeigen die Informationen auf dem Bildschirm an, wobei wir zunächst die Zeichen „\n“ (Zeilenumbruch) durch „
».
Achten Sie auf die Zeilen:
$num=20;
if ($count>$num)
{

Für ($i=($count-$num); $i

Mithilfe von JavaScript fügen wir den Emoticon-Code in die Replikatzeile in der Datei send.php ein (für das fünfte Emoticon mit dem Namen 5.gif sieht der Code beispielsweise so aus: ). Später werden wir anstelle des Codes in die Datei add.php einfügen , und Chatter sehen ein normales Emoticon auf ihrem Bildschirm.

Send.php

Beliebt:

So übertakten Sie den Prozessor eines Laptops. Viel Speicher, wie Sie das Windows 10-System beschleunigen

Laden Sie die Systemwiederherstellung für Windows 8 herunter Beste Tastaturen für iOS Gboard – Google Keyboard Was tun, wenn Windows Probleme mit Ihrer Festplatte erkennt? Beste Kopfhörer für das iPhone Der Osten ist eine heikle Angelegenheit: Kryptowährungen in Japan Japan hat Bitcoins legalisiert

Neu

So stellen Sie den Menstruationszyklus nach der Geburt wieder her:

• Wir verkaufen alte Dinge online – wo, wo und was verkauft werden kann
• Ein ungewöhnliches Foto ist eine großartige Möglichkeit, für sich selbst zu werben: So erstellen Sie ein interaktives Foto. Interaktive Fotos
• Einen Chat auf PHP schreiben Chat mit dem Senden von PHP-Dateien
• PDF-Datei auf dem iPad herunterladen
• MP3-Player von Samsung. MP3-Player für Samsung. MusiXmatch-Player für Samsung Android Touch-Telefone
• Laden Sie nützliche Programme für Android 7 herunter
• Peer-to-Peer-Netzwerk – was ist das?
• Standard-Smartphone-Tarif von Vodafone – Konditionen, Anschluss
• Lautstärkeregelung auf Android: Standardeinstellungen, Engineering-Menü und Anwendungen
• Anpassen des Xiaomi-Desktops So erstellen Sie quadratische Symbole auf Xiaomi

Eine versteckte Einstellung in allen Android-Smartphones ermöglicht es Ihnen, ein dunkles Theme zu aktivieren Der Telefonbildschirm ist schwarzweiß geworden und alles auf dem Display sieht negativ aus? Auf dieser Seite finden Sie Anleitungen zur Nutzung des Xiaomi Mi A2 Lite mit Android 8.1 und...	Warum möchte das DVD-Laufwerk keine Discs lesen? Eine der häufigsten Computerstörungen ist ein Problem beim Lesen (Erkennen) von Datenträgern im Computerlaufwerk. Viele...	Erstellen einer versteckten Partition „PQService“ Acer 5220, wie man eine versteckte Partition löscht Im heutigen Artikel werden wir über das Zurücksetzen der Laptops von Acer, eMachines und Packard Bell auf die Werkseinstellungen sprechen. Ursprünglich hatte ich vor zu schreiben...	Laptop-Kühlsystem So überprüfen Sie den Kühler eines Laptops String(10) „error stat“ Jeder Verbrennungsmotor muss über ein wirksames Kühlsystem verfügen. Ohne das wird der Motor überhitzen und das war's...

PC-Einstellungen, Updates, Wartung, Einstellungen

RSS