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ų

Komentuoti: darxx Atšaukti atsakymą

El. pašto adresas nebus skelbiamas.