September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

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:

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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();
?>
<?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ženo 7x (3.3 kB)
Aplikace je včetně zdrojových kódů v jazyce PHP OOP

 

Všechny články v sekci
Zdrojákoviště pro OOP v PHP
Článek pro vás napsal František Jaroš
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (3)

 

 

Komentáře

Avatar
Tomáš Bajt
Člen
Avatar
Tomáš Bajt:1. září 17:12

Super tutoriál, zkusím sám ten auto reload přes JS, vím o tom už dost dlouho, jen se mi to zatím nepodařilo :D

Editováno 1. září 17:13
Odpovědět
1. září 17:12
Život je jednoduchý, to jen lidé si ho dělají složitým.
Avatar
Marek Halčin:2. září 20:45

dakujem za clanok. veľmi pomohol. možno je to pre začiatočníkov ale i tak ci tak díky :)

 
Odpovědět
2. září 20:45
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.