Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Jak vytvořit jednoduchou webovou chatovací aplikaci

by
Difficulty:BeginnerLength:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

V tomto návodu budeme vytvářet jednoduchou webovou chatovací aplikaci s PHP a jQuery. Tento druh utility bude perfektní pro systém živé podpory pro váš web.


Úvod

final product

Chatovací aplikace, kterou dnes budeme vytvářet bude velmi jednoduchá. Bude obsahovat systém přihlášení a odhlášení, vlastnosti stylu AJAX a také bude nabízet podporu pro více uživatelů.


Krok 1: HTML značky

Začneme tento tutoriál vytvářením našeho prvního souboru s názvem index.php.

  • Začneme naše html obvyklým DOCTYPE, html, head a body tagy. Do head tagu, přidáme title a propojíme náš stylesheet (style.css).
  • V body tagu, vytvoříme náš návr v #wrapper div. Budeme mít tři hlavní bloky: jednoduché menu, chatbox a vložení textu, každý se svým div a id.
    • #menu div bude obsahovat dva paragraph elementy. První bude uvítání uživatele a bude nalevo a druhý bude exit link a bude napravo. Také přidáme div pro čištění elementů.
    • #chatbox div bude obsahovat chatlog. Nahrajeme náš log z externího souboru pomocí jQuery ajax requestu.
    • Poslední položka v našem  #wrapper divu bude formulář, který bude obsahovat vložení textu pro zprávu od uživatele a tlačítko submit.
  • Poslední přidáme skripty, aby se stránka nahrávala rychleji. Nejdříve nalinkujeme Google jQuery CDN, protože v tomto tutorialu budeme používat jQuery knihovnu. Budeme pracovat v našem druhém script tagu. Nahrajeme všechen náš kód, poté co bude dokument připraven.

Krok 2: CSS Styling

Nyní přidáme nějaké css, aby naše chat aplikace vypadala lépe, než s výchozím stylingem prohlížeče. Kód níže bude přidán do našeho style.css souboru.

Není na něm nic speciálního, kromě toho, že některé ID nebo třídy, pro které jsme nastavili styl, budou přidány později.

Jak vidíte výše, dokončili jsme tvorbu uživatelského rozhraní chatu.

Krok 3: Použití PHP pro vytvoření formuláře přihlášení.

Nyní implementujeme jednoduchý formulář, který se bude ptát uživatele na jméno, než budou pokračovat dále.

Funkce loginForm() je složena z jednoduchého přihlašovacího formuláře, který se ptá uživatele/uživatelky na jméno. My potom použijeme if a else, abychom ověřili, že osoba zadala jméno. Pokud osoba zadala jméno, nastavíme to jméno jako $_SESSION['name']. Protože používáme relaci založenou na cookies pro uložení jména, musíme volat session_start(), než je cokoliv vypsáno do prohlížeče.

Jedna věc, na kterou se chcete lépe podívat, je to, že jsme použili htmlspecialchars() funkci, která konvertuje speciální charaktery na HTML entity a ochraňuje proměnnou name od Cross-site skriptování (XSS). Později přidáme tuto funkci do textové proměnné, která bude postnutá do chat logu.

Zobrazení přihlašovacího formuláře

Abychom zobrazili přihlašovací formulář v případě, že se uživatel nepřihlásil a proto nevytvořil relaci, použijeme další if a else kolem #wrapper div a skript tagu v našem původním kódu. V opačném případě, tohle schová přihlašovací formulář a zobrazí chatovací okno, pokud se uživatel přihlásil a vytvořil relaci.

Vítejte a odhlášení 

Ještě nejsme hotový s tvořením přihlašovacího systému pro tuto chatovací aplikaci. Stále musíme uživateli dovolit se odhlásit a ukončit chatovací relaci. Pokud si pamatujete, náš původní HMTL markup obsahoval jednoduché menu. Jdeme zpátky a přidáme nějaký PHP kód, který dodá menu další funkcionalitu.

Ale nejdříve, přidáme uživatelské jméno do uvítací zprávy. To uděláme vypsáním relace, uživatelského jména.

Abychom dovolili uživateli se odhlásit a ukončit relaci, budeme muset lehce předběhnout a použit lehce jQuery.

jQuery kód výše jednoduše zobrazuje varování, pokud uživatel klikne na #exit link. Pokud uživatel stiskne exit, rozhodne se ukončit relaci a my je pošlem na index.php?logout=true. Tohle jednoduše vytvoří proměnnou, zvanou logout s hodnotou true. Tuhle proměnnou potřebujeme zachytit pomocí PHP:

Nyní vidíme jestli existuje proměnná "logout" pomocí isset() funkce. Pokud byla proměnná předána pomocí url, jako je link zmíněný výše, pokračujeme ukončením relace s uživatelským jménem.

Než zničíme uživatelskou relaci pomocí session_destroy() funkce, chceme napsat jednoduchou exit zprávu do chat logu. Bude říkat, že uživatel opustil chatovací relaci. To uděláme použitím fopen(), fwrite() a fclose() funkcí pro manipulaci našeho log.html souboru, který, jak uvidíme později, bude vytvořen jako náš chat log. Všimněte si, že jsme přidali také třidy "msgln" do divu. Již jsme definovali css styl pro tento div.

Po tomto, zničíme relaci a přesměrujeme uživatele na stejnou stránku, kde se objevuje přihlašovací formulář.


Krok 4: zacházení s uživatelským vstupem

Potom co uživatel odešle náš formulář, chceme vzít jeho vstup a zapsat ho do našeho chat logu. Abychom toho docílili, musí jQuery a PHP fungovat synchronně na klientské a serverové straně.

jQuery

Skoro vše co budeme dělat s jQuery pro manipulaci s našimi daty, se bude točit kolem jQuery post requestu.

  1. Než uděláme cokoliv, musíme vzít uživatelský vstup nebo cokoliv co napsal do #submitmsg. To může být dosaženo pomocí val() funkce, která bere hodnotu nastavenou v poli formuláře. Tuto hodnotu, uložíme do proměnné clientmsg.
  2. Teď přijde nejdůležitější část: jQuery post request. Tohle pošle POST request do post.php souboru, který za moment vytvoříme. To postne klientský vstup nebo cokoliv co bylo uloženo do clientmsg proměnné.
  3. Na konci, vymažeme vstup #usermsg nastavením atributu na blank.

Všimněte si, že kód výše přijde do našeho script tagu, kde bude vložen do jQuery logout kódu.

PHP - post.php

V tento moment máme POST data odeslána na post.php soubor, pokaždé když uživatel odešle formulář a pošle novou zprávu. Naším cílem je vzít tato data a zapsat je do našeho chat logu.

  1. Než uděláme cokoliv, musíme začít post.php soubor s session_start() funkcí, protože budeme používat relaci uživatelského jména v tomto souboru.
  2. Použitím bool isset, kontrolujeme jestli relace pro "name" existuje, než budeme cokoliv dělat.
  3. Nyní vezmeme POST data, která byla odeslána do tohoto souboru pomocí jQuery. Uložíme tato data do $text proměnné.
  4. Tato data, stejně jako všechna uživatelská data, budou uložena do log.html souboru. Abychom to udělali, otevřeme soubor s fopen funkci nastavenou na "a", která  podle php.net: otevře soubor pouze pro psaní, umístí pointer na konec souboru. Pokud soubor neexistuje, pokusí se jej vytvořit. My potom zapíšeme naši zprávu do souboru pomocí fwrite() funkce.
    • Zprávu kterou budeme psát bude přiložena dovnitř .msgln divu. Bude obsahovat datum a čas generovaný funkci date(), uživatelské jméno relace a text, který bude obklopen htmlspecialchars() funkcí, prevence XSS.

    Nakonec, ukončíme práci se souborem pomocí fclose().


Krok 5: Zobrazení chat logu (log.html) a jeho obsahu

Vše co uživatel napsal je zpracováno a postnuto pomocí jQuery, je to zapsáno do chat logu pomocí PHP. Jediná věc co zbývá je zobrazení aktualizovaného chat logu uživateli.

Abychom si ušetřili čas, před-nahrajem log do #chatbox, pokud má nějaký obsah.

Použijeme podobný postup jako jsme použili s post.php souborem, ale tentokrát pouze čteme a vypisujeme obsah souboru.

jQuery.ajax request

Ajax request je jádrem všeho, co nyní děláme. Tento request nám nejen dovoluje posílat a přijímat data skrz formulář, bez obnovení stránky, ale také nám dovoluje zacházet s požadovanými daty.

Zabalíme náš ajax request do funkce. Za chvilku uvidíte proč. Jak vidíte výše, použijeme pouze tři z jQuery ajax request objektů.

  • url: řetězec URL  Použijeme název souboru našeho chat logu, tedy log.html.
  • cache: Toto zabraní našemu souboru, aby byl cached. Zajistí, že dostaneme aktualizovaný chat log, pokaždé když pošleme request.
  • sucess: Tohle nám dovolí připojit funkcí, která předá data, která jsme chtěli.

Jak vidíte, potom přemístíme data, která jsme chtěli (html) do #chatbox divu.

Auto-scrolling

Jak můžete vidět v jiných chatovacích aplikacích, obsah automaticky scrolluje dolu, pokud kontejner chat logu (#chatbox) přeteče. Přidáme jednoduchou a podobnou funkci, která bude porovnávat scrollovací výšku kontejneru před a po odeslání ajax requestu. Pokud je scrollovací výška větší po rquestu, použijeme jQuery animovaný efekt pro scrollovaní #chatbox divu.

  • Jako první uložíme #chatbox scroll výšku do proměnné oldscrollHeight, než uděláme request.
  • Po té, co request vratí sucess, uložíme #chatbox div scroll výšku do newscrollHeight proměnné.
  • Potom porovnáme obě scrollovací výšky pomocí if. Pokud je newscrollHeight větší než oldscrollHeight, použijeme animovaný efekt pro scrollování #chatbox divu.

Nepřetržité obnovování chat logu

Nyní možná nastala otázka, jak budeme nepřetržitě obnovovat nová data, která jsou posílána mezi uživateli? Nebo abych položil otázku jinak, jak budeme nepřetržitě posílat requesty pro aktualizaci dat?

Odpověď na naši otázku leží ve funkci setInterval. Tato funkce bude spouštět náš loadLog() funkci každé 2,5 vteřiny a loadLog funkce bude požadovat aktualizaci souboru a autoscroll divu.

Hotovo

Máme hotovo! Doufám, že jste se naučili základy toho, jak funguje chatovací systém a pokud máte nějaké poznatky nebo cokoliv, uvítám je. Tohle je nejjednodušší chatovací systém, který je. Můžete pokračovat a vytvořit několik chatovacích místností, přidat administrátorský backand, přidat emoticony, atd. Jen nebe je vaše hranice.

Níže je pár odkazů, které se vám hodí, pokud chcete rozšířit vaších chatovací aplikaci.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.