Jednoduchý chat v PHP

V tomto článku si ukážeme jak vytvořit jednoduchý chat v PHP. Reaguji na starý článek PHP-chatu, o který byl celkem velký zájem. Původní PHP chat byl však zastaralý, to dnes napravíme

Chat bude vypadat takto:

Jednoduchý PHP chat

localhost

Stylovat to nijak nebudu, nechám to na každém zvlášť.

Databáze

Nejprve bude potřeba připravit si databázi. Vytvoříme si tabulku messages se sloupci:

id UNSIGNED INT AUTO_INCREMENT
username VARCHAHR(40)
message TEXT
time UNSIGNED INT

Sloupec id bude sloužit klasicky jako primární klíč, username jako jméno uživatele, message pro jeho zprávu a ve sloupci time bude UNIXový čas odeslání zprávy.

Tabulka by tedy měla v phpMyAdmin vypadat takto:

Pokud je tabulka hotová, vytvoříme si PHP soubory. Budou celkem 4:

index.php
db.php
send_message.php
get_messages.php

Soubor index.php bude obsahovat hlavní stránku, na které bude samotný chat a formulář pro odeslání zprávy:

<?php
//Inicializovat sezení
session_start();
?>


<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>PHP Chat</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <form>
            <label for="username">Jméno:</label>
            <input type="text" name="username" id="username" value="<?= $_SESSION["username"] ?? "" ?>">
            <label for="message">Zpráva:</label>
            <input type="text" name="message" id="message">
            <button type="button" onclick="send()">Odeslat</button>
        </form>
    </div>

    <div id="messages"></div>
</body>
</html>

Zde budeme mít jen dvě pole pro jméno a zprávu, pak tlačítko pro odeslání. Tlačítko Odeslat bude mít onclick event funkci send(), kterou si uvedeme níže.

K odeslání zprávy pomocí AJAXu a aktualizaci chatu bude potřeba přidat následující JavaScript, můžeme si ho dat například hned před </body> tag:

<script>
    function send() {
        // Vytvořit AJAX požadavek metodou POST
        $.post("send_message.php", // URL pro požadavek
            {
                "username" : $("#username").val(), // Objekt s hodnotami pro odeslání
                "message" : $("#message").val()
            },
            function (data) { // Callback funkce při úspěchu
                $("#message").val(""); // Smazat obsah pole pro zprávu
            }
        );
        reloadMessages(); // Ihned aktualizujeme právě odeslanou zprávu
    }

    function reloadMessages() {
        // Vytvořit AJAX požadavek metodou GET
        $.get("get_messages.php", function(data) {
            $("#messages").html(data); // Nastavit obsah zpráv na výstup požadavku
        });
    }

    // Prvotně načíst zprávy
    reloadMessages();

    // Vykonat funkci v určeném intervalu
    // 3000 ms = 3 sekundy
    setInterval(reloadMessages, 3000);
</script>

Zmíněnou funkci send() tedy zavoláme po kliknutí na tlačítko Odeslat, je to díky eventu onclick. Funkce pouze získá data z formuláře (jméno a zprávu) a odešle je metodou POST do souboru send_message.php, kde data dále zpracujeme. Pokud se data podaří odeslat, vymažeme obsah pole pro zprávu. Poté zavoláme funkci reloadMessages(), která nám ihned načte onu odeslanou zprávu z databáze.

Již zmíněná funkce reloadMessages() tedy načte zprávy z databáze. Děláme to za pomocí souboru get_messages.php, kde je PHP kód pro získání dat z databáze.

Po načtení stránky jinak ihned zavoláme funkci reloadMessages(), která nám načte všechny původní zprávy z databáze. Dále nastavíme interval pro znovuzavolání funkce reloadMessages(), ať nám načte zprávu například od jiného uživatele, nemusíme tak stránku aktualizovat.

V souboru db.php nastavíme své údaje k databázi a vytvoříme spojení přes PDO:

<?php

// Údaje pro připojení k databázi
$host = "localhost";
$db = "php-chat";
$user = "root";
$password = "";

// Vytvoření MySQL připojení přes PDO,
// bude nastaveno kódování UTF-8 a při chybě se vyvolá výjimka
$pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $password, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);

Kód pouze vytvoří připojení k databázi za pomocí PDO. Proměnné:

$host je pro název serveru, na lokálu localhost, 127.0.0.1 nebo přímo lokální IP adresa (např. 192.168.1.112)
$db je pro název databáze, já si ji pojmenoval jako php-chat
$user je pro jméno uživatele k databázi, po čisté instalaci WAMP nebo XAMPP je to většinou root
$password je heslo uživatele k databázi, já nemám nastavené žádné, stačí mi tedy pouze prázdné uvozovky ""

Když máme soubor na vytvoření databázového spojení hotový, můžeme napsat hlavní PHP skripty.

Skript souboru get_messages.php bude vracet všechny zprávy z databáze:

<?php
// Vytvořit spojení s databází ze souboru db.php
require "db.php";

// Připravit SQL dotaz
// Vybrat vše z tabulky "chat", řadit sestupně podle sloupce pro čas
$query = $pdo->prepare("SELECT * FROM `messages` ORDER BY `time` DESC");

// Vykonat připravený dotaz
$query->execute();

// Získat všechny řádky z dotazu
$messages = $query->fetchAll();

// Iterovat přes každý řádek a vypsat jej
foreach ($messages as $message) {
    echo "<p>(" . date("d. m. H:i:s", $message["time"]) . ") <b>" . htmlspecialchars($message["username"]) . "</b>: " . htmlspecialchars($message["message"]) . "</p>";
}

Všimněte si, že jsem při vypisování jména a zprávy použil funkci htmlspecialchars. Takto funkce převede speciální HTML znaky na jejich ekvivalentní entity. Díky tomu zabrání XSS útoku.

Potom tady bude skript send_message.php, který bude volán z AJAX požadavků a zapisovat zprávy do databáze:

<?php
// Ověření, jestli není jméno nebo zpráva prázdná
if (!empty($_POST["username"]) && !empty($_POST["message"])) {

    // Inicializovat sezení
    session_start();

    // Vytvořit spojení s databází ze souboru db.php
    require "db.php";

    // Připravit SQL dotaz
    $query = $pdo->prepare("INSERT INTO `messages` (`username`, `message`, `time`) VALUES (?, ?, ?)");

    // Vykonat dotaz s parametry
    $query->execute([
        $_POST["username"],
        $_POST["message"],
        time() // Aktuální čas v unixovém formátu
    ]);

    // Nastavit jméno do sezení pro zapamatování
    $_SESSION["username"] = htmlspecialchars($_POST["username"]);
}

Teď už bychom měli mít náš jednoduchý PHP chat hotový. Pokud u tebe něco nefunguje, můžeš si celý projekt stáhnout níže a zkusit najít chybu

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 175x (3.3 kB)
Aplikace je včetně zdrojových kódů v jazyce PHP

Článek pro vás napsal František Jaroš

Uživatelské hodnocení:

2 hlasů

Aktivity