WebSocket ir PHP

Šis straipsnis bus apie WebSocket panaudojimą kartu su PHP. Pirmiausia reikėtų pradėti nuo to kas yra WebSocket. WebSocket – Tai yra naujas HTML 5 Interneto socketų API kurio pagalba galima sukurti ryšį su kitais naudotojais. WebSocket sukuria atskirą tunelį tarp jūsų naršyklės ir serverio pagal nurodytą adresą ir portą. Visas bendravimas vyksta TCP protokolu.

Susijungimas

Prieš susijungiant su serveriu, naršyklė išsiunčia antraštę su WebSocket raktu. Tokius atveju serveris turi sukurti WebSocket tunelį tarp naršyklės ir serverio grąžindamas raktą pagal kurį jis atpažįstamas. Prieš susijungiant ir naršyklei išsiunčiant duomenis į serverį, serveri turi pasisveikinti (handshake). Po prisijungimo ir tunelio sukūrimo patvirtintimo grąžinamas 101 atsakymas. 101 – susijungimas pavyko.

Palaikymas

Kurios naršyklės palaiko WebSocket?

  • Chrome 4 ir aukštesnė
  • FireFox 4 ir aukštesnė – WebSocket yra pagal nutylėjimą išjungta dėl protokolo saugumo problemų.
  • Opera 11 ir aukštesnė – Taip pat išjungta dėl protokolo saugumo problemų.
  • Safari 5 ir aukštesnė
  • iOS 4.2

Pirmoji programa

Sukurti pirmą programą su WebSocket labai paprasta ir lengva. Pirmiausia ką padarysime sukurkime server.php kuris bus atsakingas už priimamas užklausas.

Serverio pusė

Pirmiausia ko mums reikės PHPWebSocket klasės. Jis padės mums ypač paprastai ir lengvai valdyti gaunamas užklausas. Žinoma galite ir patys susikurti savo norimą klasę ir priiminėti duomenis iš WebSocket. Kaip sukurti ir valdyti socket’us informacijos galite rasti PHP dokumentacijoje. Straipsnyje bus naudojama PHPWebSocket klasė.
Straipsnyje naudojamas kodas bus skirtas sukurti WebSocket tarp klientų ir serverio ir perduoti visiems duomenis kurioj vietoj kažkuris klientas paspaudė pelės mygtuką ir šią vietą atvaizduoti visiems prisijungusiems klientams.

<?php
include "websocket.class.php";
class Mouse extends WebSocket{
  	function process($user,$msg){
    		foreach ($this->users as $key => $value) {
     			$this->send($value->socket,$user->id."|".$msg);
     		}
  	}
}
 
$master = new Mouse("localhost",8000);
?>

Kaip matote serverio pusėje socket’ų priėmimas ir siuntimas ypač paprastas ir lengvas. Pirmiausia ką padarėme tai praplėtėme WebSocket klasę ir pridėjome savo norimą. Funkcija process() apdoroja gautus duomenis iš kliento pusės ir apdorotus duomenis išsiunčia atgal klientui. Šiuo atveju gauti kažkurio kliento duomenys išsiunčiami visiems prisijungusiems klientams. Taip gaunamas realus bendravimas tarp visų klientų.

Kliento pusė

Kliento pusėje mes sukuriama ryšį tarp mūsų naršyklės ir serverio. Žemiau pateiktas visas JavaScript kodas kaip vyksta susijungimas, kaip perduodami duomenys ir jie apdorojami:

var socket;
$(document).ready(function() {
	var host = "ws://server.simep.lt:8000/mouse/server.php";
	try{
		socket = new WebSocket(host);
		log('WebSocket - status '+socket.readyState);
		socket.onopen    = function(msg){ log("Welcome - status "+this.readyState); };
		socket.onmessage = function(msg){
		     var s = msg.data.split("|");
		     if ($("#" + s[0]).length != 0) {
		    	$("#" + s[0]).css("left",s[1]).css("top",s[2]);
		     }
		     else {
		    	$("body").append('<div id="' + s[0] +'" style="position: absolute;left:' + s[1] +'px;top:' + s[2] +'px; width: 10px; height: 10px; border: 1px solid black"></div>');
		     }
		     log("Received: " + msg.data);
	        };
	        socket.onclose = function(msg){ log("Disconnected - status "+this.readyState); };
	}
	catch(ex){ log(ex); }
});
$(document).click(function(e) {
	var msg = e.clientX + "|" + e.clientY;
	try{ socket.send(msg); log('Sent: '+ msg); } catch(ex){ log(ex); }
});
function log(msg){ $("#log").append("<br>"+msg); }

Pirmiausia kas įvyksta, tai, kad tik užsikrovus puslapiui mes iškart jungiamės į nurodytą WebSocket adresą kur ir turi būti sukurtas WebSocket tarp kliento ir serverio. WebSocket turi 3 pagrindinius metodus pagal kuriuos vadomas WebSocket:

  • onopen – Pavyko prisijungti prie WebSocket serverio.
  • onmessage – Gauta žinutė iš serverio
  • onclose – Dingo/Nutrauktas ryšys su serveriu.

Taip pat WebSocket turi ir nurodytas būsenas ar pavyko prisijungimas, ar jungiamasi, ar atsijungta:

  • 0 – Jungiamasi
  • 1 – Prisijungta
  • 2 – Atsijungiama
  • 3 – Atsijungta

Daugiau apie WebSocket metodus, būsenas ir funkcijas galite paskaityti oficialiame WebSocket API puslapyje.

Taigi, kai pavyksta mums prisijungti prie serverio. Galime pradėti siuntinėti žinutes ir gauti atsakymus iš serverio. Aukščiau nurodytame pavyzdyje parodyta kad paspaudus pelės mygtuką bus siunčiama žinutė į WebSocket – socket.send();. Kaip pastebėjote prieš tai, kad mūsų kintamasis socket buvo nustatytas sukuriant WebSocket prisijungimą prie serverio.

Pabaigai

Prieš bendraujant jūs turite paleisti serverio pusėje server.php, kitu atveju joks klientas negalės susijungti, kadangi socket’ai neegzistuos.

Paleidimui naudokite šią komandinę eilutę: php -q server.php Tokiu atveju gausite ir visą informaciją apie tai kaip vyksta susijungimas, kas siunčiame ir kas išsiunčiama.

Šis straipsnis skirtas susipažinimui su WebSocket ir kaip tai veikia. Kaip sukurti paprastą programėlę kurios pagalbos galite bendrauti su draugais.

Žemiau pateikta kaip galite pasileisti WebSocket serverį su xampp:

1. Pirmiausia pasileidę xampp Control Panel atsidarykite Shell

2. Shell lange įveskite prieš tai nurodytą komandą:

Straipsnyje naudotą kodą galite parsisiųsti ir išbandyti patys.


Parsisiųsti

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Žymos: , ,

10 komentarų

  1. Jei neklystu čia savotiško striminimas?

    • Ir pagal viso straipsnio informacija suprantu kad jį naudoti dabartinėje situacijoje negalima. Nes didžioji dauguma neturės galimybės naudotis nes kaip teisingai paminėjai pas kaip kurias naršykles šis protokolas įšiungtas dėl saugumo :) Gražus ir geras straipnis. Like

  2. Iš dalies galima. Šis straipsnis tiesiog grynai dirbant su WebSocket, kaip tai veikia. Dar nebandžiau bet berods eitų kažką išburti ir su http://socket.io/

    • Ištikro socket.io yra šiuo atveju labiau tinkamas. Jis dirba su tam pritaikytu node.js, o kai dėjau didelęs pastangas pats parašyti WebSocket libą ant php, labai nusivyliau, nes pats php nemoka gražiai su juo tvarkytis ir gan dažnai be jokios rimtos priežasties ateina tušti paketai. Su node.js dar taip nebuvo.

  3. Simas J

    Straipsnis puikus, tačiau deja nesupratau socket’ų naudos… Kam jie reikalingi ir ką leis padaryti ko dabar neįmanoma padaryti (arba labai sunku)?

  4. Leis sukurti multiplayer žaidimą/chat ir betką kam reikia live susijungimo su serveriu, be kitų technologijų kaip flash ar java.

  5. Kęstas

    Lai autorius nesupyks, man labai norisi drėbtelti šiek tiek kritikos. :) Straipsnis tikrai įdomus, tačiau nepakankamai išsamus. Toks įspūdis, kad straipsnis iš kažkur paimtas ir išverstas į lietuvių kalbą. Autoriau, nepagailėk kablelių – čia jų labai trūksta. 😉

    • Dėkui už kritiką, jis visuomet gerai :) Dėl vertimo tai, mhm, na kad neverčiu aš tų straipsnių, iš galvos rašau ir tiek. Dėl Lietuvybės, matai mas su ja sunku, o ypač su skyrybos ženklais, kirčiais ir panašiais dalykais :)

  6. T

    Įsijungiau Sockets extension’ą per wamp ir bandant per shell paleisti serverį, išmeta, kad nepaleistas extensionas. Dėl ko taip gali būti? Ar čia wamp kažkokios bėdos?

    • WAMP’as shellui (PHP CLI) ir apache (PHP MOD) naudoja skirtungus php.ini, todėl tikriausiai tu „įjungei extensioną“ ne tam moduliui, pasitikrink per php.ini, tik turėk omenyje, kad turi tikrinti per tą PHP (šiuo atveju shell), per kurį ruošiesi dirbti (-;

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Galite naudoti šias HTML žymas ir atributus: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>