2. diel - Návštevná kniha cez WebSocket - Server a hlavné PHP trieda

V minulej lekcii, Návštevná kniha cez WebSocket - Úvod a inštalácia nástrojov , sme si predstavili a nainštalovali potrebné technológie. Dnešná tutoriál bude venovaný implementácii backendu, budeme už programovať Node.js server a základný PHP systém.

Node.js časť

Náš adresár "RealtimeKniha­Navstev" si otvoríme vo vývojovom prostredí, ktoré sme si vybrali na začiatku. Nasledovne si v adresári Nodejs vytvoríme súbor server.js.

Nodejs / server.js

V prvom rade si musíme všetky moduly aktivovať.

var app = require('express')();
var http = require('http').Server(app);
var bodyParser = require("body-parser");

var io = require('socket.io')(http);

Nasledovne si vytvoríme premennú port, kde zároveň zvolíme port celého Node.js súboru.

var port = 4000;

Teraz povieme servera na akom porte má bežať a naštartujeme ho. Po naštartovaní uvedieme hlášku do konzoly s tým, že server beží na porte podľa premennej.

http.listen(port, function() {
    console.log('Server jede na portu: ' + port);
});

Nastavíme si bodyParser (aby sme mohli spracovávať POST request).

var urlencodedParser = bodyParser.urlencoded({ extended: false });

Pokračujeme pridaním ďalšieho kódu, ktorý si vzápätí vysvetlíme.

app.post('/', urlencodedParser, function (req, res) {
    if (!req.body) return res.sendStatus(400);
    var post = req.body;
    if(post.password == "d$0awd6$5ZVawdIhlawdZJr8xwadtRFnSlbRX2.$2a$0awd6$5ZVIhawdlZJwdr8xtRFnS72lbRX2.Dsylt5.YSi1BzzqawdBt3rsBawdxYQMYIqsFe") {

        io.emit(post.channel, JSON.parse(post.data));
        res.send('true');

    } else {
        res.sendStatus(400);
    }

});

Na začiatku hovoríme aplikáciu, že má načúvať POST requestu na adrese "/" (takže hneď na ip / doméne). Zároveň aplikáciu odovzdáme parser, ktorý bude dáta z POST requestu parsovať na čitateľnejší podobu. Ďalej si pridáme podmienku, či POST obsahuje nejaké dáta. Ak nie, pošleme status 400 a vypíšeme bad request. Deklarujeme premennú post, ktorá bude obsahovať dáta z POST požiadavke.

Teraz sa dostávame k oblasti, kedy si zvolíme naše heslo, ktorým, budeme overovať, že daný POST odosiela naozaj náš PHP curl a nie nejaký záškodník s Ajaxom. Ak sa heslo overí, pošleme socket užívateľom s pripravením dátami od PHP a vrátime true pre PHP, pretože sme urobili čo sa po nás chcelo. Keď sa Vaše heslo neoverí ako správne, pošleme status 400 a tým vypíšeme bad request.

Ako posledný krok by sme mali ošetriť situáciu, keď sa používateľ len tak pripojí na Node.js cez prehliadač. Vtedy mu vypíšeme bad request .

app.get('/', function(req, res){
    res.sendStatus(400);
});

Celý server teraz zapneme a vyskúšame či všetko funguje. To urobíme tak, že si otvoríme príkazový riadok a do neho napíšeme príkaz:

cd <cesta do adresáře NodeJs>

(Do príkazu si vložte cestu, ktorú zistíte, keď si v prieskumníkovi otvorte daný adresár, kliknete na cestu hore a skopírujete jej). Ďalej už len využijeme príkaz pre naštartovanie servera:

node server.js

Ak sa v konzole objavilo "Server ide na porte 4000", tak je všetko v poriadku. Ešte skúsime ísť do prehliadača a zadať do adresného políčka adresu "localhost: 4000". Mali by sme vidieť text "bad request", čo je správne Server teraz môžeme vypnúť a to tak, že pôjdeme späť do príkazového riadku a Node.js proces jednoducho ukončíme stlačením ctrl + c.

To je všetko z časti Node.js. Node nám teraz bude krásne preposielať dáta, ktoré získa z POST requestu, užívateľom do prehliadača. Tá ďalej spracujeme a tým docielime okamžitého pridávanie nových príspevkov do knihy.

Php časť

Vrhnite sa na PHP časť, kde som si pripravil jednoduchý systém. Po prvé si musíme Apache prenastaviť tak, aby ako koreňový adresár bral náš PHP adresár. Otvoríme si XAMPP Control Panel a tam klikneme na tlačidlo "Config" pri položke Apache. V ponuke vyberieme prvú položku (httpd.conf).

Nájdeme riadok 244 a 245 (ak máte rovnakú verziu ako ja, prípadne hľadajte podľa náhľadu nižšie), document root zmeníte nastavenie na cestu k nášmu PHP adresári, rovnako tak Directory. V mojom prípade riadky vyzerajú takto:

DocumentRoot "C:\Users\patrik\Documents\ITnetwork\Tvorba\RealtimeKnihaNavstev\Code\PHP"
<Directory "C:\Users\patrik\Documents\ITnetwork\Tvorba\RealtimeKnihaNavstev\Code\PHP">

Ak máte s nastavením adresára ťažkosti alebo si ho prajete nastaviť pre každý projekt zvlášť, pomôže vám článok Konfigurácia PHP (XAMPP).

Php / index.php

K nastavenie Apache je to všetko. Teraz vytvoríme súbor index.php v našom adresári PHP a otvoríme si tento súbor v IDE. Ako prvý naštartujeme session a ob (output buffering - čo strechu sa nebude hneď vypisovať, ale ukladať do vyrovnávacej pamäte). Nastavíme kódovanie na "UTF-8", ďalej nastavíme timezone na "Europe / Prague" a načítame si triedu autoloader, ktorá sa nám neskôr bude starať o načítanie ďalších tried (jej kód si hneď uvedieme). Zaregistrujeme autoloader, vytvoríme triedu "MainClass" a potom zavoláme metódu mainMethod ().

session_start();
ob_start();
mb_internal_encoding("UTF-8");
date_default_timezone_set('Europe/Prague');
require('classes/AutoLoader.php');
spl_autoload_register('AutoLoader::load');

$MainClass = new MainClass();
$MainClass->mainMethod();

Teraz si vytvoríme adresár "classes" a ňom vytvoríme súbor AutoLoader.php, v ňom vytvoríme triedu a to "Autoloader".

Php / classes / AutoLoader.php

Autoloader patrí k základným kameňom objektové aplikácie. Ak neprogramuje objektovo, tak okrem toho, že by ste si vedomosti mali veľmi rýchlo doplniť v seriáli Objektovo orientované programovanie v PHP, stačí vám zatiaľ informácie, že sa táto metóda zavolá vždy, keď sa snažíme použiť nejakú triedu (tú chápte ako súbor funkcií). Funkcia má za úlohu tento súbor načítať podľa názvu triedy. Väčšinou len do cesty pridá nejakú zložku a za názov triedy pridá koncovku .php, u nás tomu nebude inak.

Trieda Autoloader bude mať verejnú statickú metódu load (), ktorá bude mať parameter $ class. Ako asi tušíte, metóda "load ()" bude obsahovať include () v podmienke. Keď sa z nejakého dôvodu nenačíta daná trieda, vyvoláme výnimku s tým, že danú triedu sa nepodarilo načítať.

Celý súbor bude vyzerať nejako takto:

<?php

class AutoLoader {

    public static function load($class) {

        if(!include("/classes/$class.php")) {
            header('Content-Type: text/html; charset=utf-8');
            throw new ErrorException("Chyba při načítání třídy $class");
        }

    }

}

Php / classes / MainClass.php

Teraz si vytvoríme súbor MainClass.php a v ňom si triedu "MainClass". Táto trieda bude mať dve metódy. Jednu verejnú - mainMethod () a ďalšie protected "render ()". "MainMethod ()" je hlavná metóda, ktorá sa pri požiadavke na index.php zavolá. Bude obsahovať iba volanie a výpis návratovej hodnoty metódy "render" (). Metóda "render ()" bude obsahovať include šablónovej súboru "template.phtml" (ktorý si vytvoríme v budúcom dieli). Celý súbor bude vyzerať takto:

<?php

class MainClass {

    public function mainMethod() {
        echo $this->render();
    }

    protected function render() {
        return include("template.phtml");
    }

}

Nabudúce, v lekcii Návštevná kniha cez WebSocket - Sprevádzkovanie komunikácie , budeme pokračovať.