3. diel - Návštevná kniha cez WebSocket - Sprevádzkovanie komunikácie
V minulej lekcii, Návštevná kniha cez WebSocket - Server a hlavné PHP trieda , sme implementovali jednoduchý Node.js server a začali s PHP serverom, kde sme vytvorili hlavnú triedu a autoloader. Dnes budeme pokračovať vytvorením triedy pre volanie Node.js servera a pridáme si sľúbenú šablónu.
Php / classes / WebSocketApi.php
Táto trieda slúži pre volanie Node.js servera a získanie odpovede, či sa preposlanie požiadavke cez WebSockets na ďalších klientov podarilo. Bude obsahovať jednu metódu a to "sendSocket ()" s parametrami "$ channel", "$ dáta" a tri privátne premenné:
- "$ Password" - rovnaké heslo ako v súbore "server.js"
- "$ Ip" - localhost
- "$ Port" - 4000
Ukážme si kód triedy, ako vždy si ho hneď popíšeme:
<?php class WebSocketApi { private $password = "d$0awd6$5ZVawdIhlawdZJr8xwadtRFnSlbRX2.$2a$0awd6$5ZVIhawdlZJwdr8xtRFnS72lbRX2.Dsylt5.YSi1BzzqawdBt3rsBawdxYQMYIqsFe", $ip = "localhost", $port = 4000; public function sendSocket($channel, $data) { $Url = "http://$this->ip:$this->port"; $ch = curl_init(); $POST = ["channel" => $channel, "password" => $this->password, "data" => json_encode($data, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_QUOT)]; $POST_string = null; foreach ($POST as $key => $value) { $POST_string .= $key.'='.$value.'&'; } rtrim($POST_string, '&'); curl_setopt($ch, CURLOPT_URL, $Url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch,CURLOPT_POST, count($POST)); curl_setopt($ch, CURLOPT_POSTFIELDS, $POST_string); $response = curl_exec($ch); curl_close($ch); return $response == "true"; } }
Metóda "sendSocket ()" obsahuje premennú "$ Url", ktorá zjednotí IP adresu a port do jedného. Ďalej načítame curl (technológia pre posielanie webových požiadaviek z PHP, na niektorých webhostinzích ju treba aktivovať) a vytvárame pole s nastavením pre curl. Kúsok nižšie vytvárame pole s POST dátami. Cyklus premení POST dáta na string, funkciou RTrim () na konci odstránime posledný "&". Teraz už len trochu nastavíme curl a do premennej si uložíme výsledok požiadavke na Node.js server. Následne zavrieme curl a vrátime true ak sme od servera dostali reťazec "true", v opačnom prípade vrátime false ako neúspech.
Aby sme mohli náš PHP server vyskúšať, potrebujeme ešte chýbajúce šablónu. Poďme si ju pridať.
Php / template.phtml
Obsah súboru bude zatiaľ samotná html kostra s jQuery, socket.io, Font Awesome a vlastným štýlom, ktorý tiež vytvoríme. Súbor bude vyzerať nejako takto:
<!DOCTYPE html> <html> <head lang="cs-cz"> <meta charset="UTF-8"> <meta name="author" content="Patrik Smělý(SogoCZE)"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="Realtime Kniha návštěv"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Realtime Kniha návštěv</title> <base href="localhost"> <link rel="stylesheet" type="text/css" href="/css/style.css"> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" charset="UTF-8"></script> <script src="https://cdn.socket.io/socket.io-1.2.0.js" charset="UTF-8"></script> </head> <body> <h1>Realtime Kniha návštěv</h1> </body> </html>
Php / CSS / style.css
K šablóne potrebujeme aj nejaké tie štýly. Vytvoríme teda adresár "css" v našom PHP adresári a v ňom ešte súbor "style.css". Ten bude zatiaľ obsahovať len pár základných vecí a to:
* { padding: 0 0 0 0; margin: 0 0 0 0; box-sizing: border-box; } body { background-color: #DDDDDD; color: black; font-size: 14px; font-family: Helvetica Neue, Helvetica, Arial; }
Ideme teda konečne vyskúšať náš PHP systém a celé WebSocket API! Do metódy "mainMethod ()" v triede "MainClass" pridáme nasledujúci kód:
Php / classes / MainClass.php
public function mainMethod() { $WebSocketApi = new WebSocketApi(); if ($WebSocketApi->sendSocket("Test", ["name" => "Patrik", "message" => "testing"]) === true) { echo("Povedlo se! Nodejs vrací true!"); } else { echo("Něco se nepovedlo! Node.js nevrací true!"); } echo $this->render(); }
Vytvoríme inštanciu nášho websocketového API a pridáme podmienku, v
ktorej budeme volať metódu "sendSocket ()". Parametre sú Kanál a [dáta].
Ako kanál zvolíme napr. Reťazec "Test" a do dát dáme napríklad
["name" => "Patrik", "message" => "testing"].
Vráťme sa späť k našej podmienke. Ak táto metóda vráti true, vypíšeme "Podarilo sa! Node.js vracia true!" Keď to tak nie je, vypíšeme "Niečo sa nepodarilo! Node.js nevracia true! ".
Teraz spustíme Apache v XAMPP a cez prehliadač prejdeme na adresu "localhost". Mali by sme dostať nasledujúce výsledok:
nadpis si vložíme div s triedou "messages". Pod neho vložíme script,
ktorý bude došlé správy v reálnom čase pridávať do stránky.Php /
template.phtml<div class="messages"></div>
<script type="application/javascript">
var Sockets = io.connect('localhost:4000');
Sockets.on('Test', function(data) {
$('.messages').append("<span>" + data.name + ": " + data.message + "</span><br/>");
});
</script>Pomocou metódy io.connect () sa
pripojíme k serveru a budeme načúvať na danom kanáli. Parametrom metódy
connect () je IP adresa a port. Týmto pripojíme užívateľa k nášmu
serveru. Ako callback má načúvacie metóda on () nastavenú funkciu, ktorá v
parametroch prijíma dáta. Tú využijeme pre výpis dát z PHP servera. V
callback Func pripojíme do nášho divu spanie s premennými data.name a
data.message. Tým do stránky pridáme došlej správy. Mali by ste dostať
nasledujúce výsledok:
Keď
si teraz web načítame 2x vedľa seba a jeden obnovíme, na druhom sa okamžite
ukáže naša správa. To znamená, že PHPčko odoslalo dáta do Node.js a ten
poslal užívateľa a vynútil obnovenie stránky. Komunikujeme teda z PHP s
klientmi, bez toho aby zavolali PHP požiadavku. No nie je to úžasné? 
Naše API funguje ako má.V
budúcej lekcii, Návštevná kniha cez WebSocket - Šablóna programu , aplikáciu dodáme krajší kabát. A ďalej ju v
kurze upravíme do plnohodnotnej real-time knihy návštev alebo chatu, ak
chcete projekt tak nazývať.
