Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Otázka z PHP na Node.js - Návštevná kniha cez WebSocket
Hm, to nám toho ale moc nepovedalo že? Skúsme si teda trochu toho real-timu. Prejdeme do template.phtml a pod

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:Real-time obnovenie stránky cez PHP a Node.js - Návštevná kniha cez WebSocketKeď 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ť.


 

Predchádzajúci článok
Návštevná kniha cez WebSocket - Server a hlavné PHP trieda
Všetky články v sekcii
Návštevná kniha cez WebSocket
Preskočiť článok
(neodporúčame)
Návštevná kniha cez WebSocket - Šablóna programu
Článok pre vás napísal Patrik Smělý
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor miluje filosofii, sci-fi, technologie, hry a hlavně svobodu. Aktivně se věnuje programování, designu, 3D grafice, správě sítí a trochu méně hardwaru. Mimo technologické zaměření se velice zajímá o politiku a psychologii.
Aktivity