Jednoduchý chat v PHP

V tomto článku si ukážeme ako vytvoriť jednoduchý chat v PHP. Reagujem na starý článok PHP-chatu, o ktorý bol celkom veľký záujem. Pôvodný PHP chat bol však zastaraný, to dnes napravíme:)

Chat bude vyzerať takto:

Jednoduchý PHP chat

localhost

Stylovať to nijako nebudem, nechám to na každom zvlášť.

Databázy

Najprv bude potrebné pripraviť si databázu. Vytvoríme si tabuľku messages sa stĺpci:

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

Stĺpec id bude slúžiť klasicky ako primárny kľúč, username ako meno používateľa, message pre jeho správu a v stĺpci time bude UNIXový čas odoslania správy.

Tabuľka by teda mala v phpMyAdmin vyzerať takto:

Ak je tabuľka hotová, vytvoríme si PHP súbory. Budú celkom 4:

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

Súbor index.php bude obsahovať hlavnú stránku, na ktorej bude samotný chát a formulár pre odoslanie správy:

<?php
//Inicializovat sezení
session_start();
?>
<?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>

Tu budeme mať len dve polia pre meno a správu, potom tlačidlo pre odoslanie. Tlačidlo Odeslat bude mať onclick event funkciu send(), ktorú si uvedieme nižšie.

Na odoslanie správy pomocou AJAXu a aktualizáciu chatu bude potrebné pridať nasledujúce JavaScript, môžeme si ho dát napríklad hneď pred </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>

Spomínanú funkciu send() teda zavoláme po kliknutí na tlačidlo Odeslat, je to vďaka eventu onclick. Funkcia iba získa dáta z formulára (meno a správu) a odošle ich metódou POST do súboru send_message.php, kde dáta ďalej spracujeme. Ak sa dáta podarí odoslať, vymažeme obsah poľa pre správu. Potom zavoláme funkciu reloadMessages(), ktorá nám ihneď načíta onú odoslanú správu z databázy.

Už spomínaná funkcia reloadMessages() teda načíta správy z databázy. Robíme to za pomocou súboru get_messages.php, kde je PHP kód pre získanie dát z databázy.

Po načítaní stránky inak ihneď zavoláme funkciu reloadMessages(), ktorá nám načíta všetky pôvodné správy z databázy. Ďalej nastavíme interval pre znovuzavolání funkcie reloadMessages(), nech nám načíta správu napríklad od iného užívateľa, nemusíme tak stránku aktualizovať.

V súbore db.php nastavíme svoje údaje k databáze a vytvoríme spojenie cez 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 len vytvorí pripojenie k databáze za pomocou PDO. premenné:

$host je pre názov servera, na lokálu localhost, 127.0.0.1 alebo priamo lokálne IP adresa (napr. 192.168.1.112)
$db je pre názov databázy, ja si ju pomenoval ako php-chat
$user je pre meno používateľa k databáze, po čistej inštalácii WAMP alebo XAMPP je to väčšinou root
$password je heslo používateľa k databáze, ja nemám nastavené žiadne, stačí mi teda iba prázdne úvodzovky ""

Keď máme súbor na vytvorenie databázového spojenia hotový, môžeme napísať hlavné PHP skripty.

Skript súboru get_messages.php bude vracať všetky správy z databázy:

<?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šimnite si, že som pri vypisovaní mena a správy použil funkciu htmlspecialchars. Takto funkcia prevedie špeciálne HTML znaky na ich ekvivalentné entity. Vďaka tomu zabráni XSS útoku.

Potom tu bude skript send_message.php, ktorý bude volaný z AJAX požiadaviek a zapisovať správy do databázy:

<?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"]);
}

Teraz už by sme mali mať náš jednoduchý PHP chat hotový. Pokiaľ u teba niečo nefunguje, môžeš si celý projekt stiahnuť nižšie a skúsiť nájsť chybu:)

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 175x (3.3 kB)
Aplikácia je vrátane zdrojových kódov v jazyku PHP OOP

Článok pre vás napísal František Jaroš

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Aktivity