Noțiuni de bază în timp real cu Pusher

Doriți să vă îmbogățiți aplicațiile web făcându-le în timp real - dar nu doriți să creați noi infrastructuri pentru singurul scop de a obține socket-uri web pentru a funcționa? În acest articol, vom explora modul de utilizare și implementare Pusher, un serviciu HTML5 WebSocket alimentat în timp real pentru aplicațiile dvs..

Introducere

Ce sunt WebSockets?

Conform paginii WebSocket Wikipedia, WebSocket este o tehnologie care oferă canale de comunicare bidirecționale, bidirecționale, pe o singură soclu TCP.

În termeni de layman, WebSockets permit unui client și unui server să comunice în ambele direcții. Permite unui server să trimită mesaje clientului și invers.

Cum este relevant pentru aplicația mea web??

De-a lungul anilor, expirarea datelor a fost întotdeauna o problemă cu aplicațiile web, în special cu cele care au conectat mai multe persoane și care lucrează la aceleași lucruri. De exemplu, într-o aplicație de management de proiect, utilizatorii uneori creează articole de rezolvat pe care membrii echipei lor le creează în același timp. Cu WebSockets, acest lucru poate fi atenuat prin permiterea serverului Apăsați notificări către toate părțile conectate, permițând browserelor să primească date noi în timp real. De fapt, înainte de a crea un element duplicat de rezolvat, veți vedea că altcineva l-a creat deja.

Ce este Pusher?

Pusher este un API găzduit pentru adăugarea rapidă, ușoară și sigură a funcționalității scalabile în timp real prin WebSockets către aplicații web și mobile.

În esență, Pusher încorporează implementarea WebSockets, funcționalitatea, depanarea și găzduirea pentru dvs..
În loc să vă rulați propriul server WebSockets, vă permite să descărcați întregul proces pe serverele Pusher, economisind atât timp cât și bani.

Pusher este un API găzduit pentru adăugarea rapidă, ușoară și sigură a funcționalității scalabile în timp real prin WebSockets către aplicații web și mobile.

Pentru ca Pusher să funcționeze, veți avea nevoie atât de o bibliotecă de clienți, cât și de o bibliotecă de editori. Bibliotecile de clienți sunt utilizate împreună cu clientul care interfețează cu aplicația dvs. Acesta poate fi un browser (prin JavaScript), o aplicație iPhone (prin intermediul obiectivului C) sau o aplicație Flash (prin ActionScript). Bibliotecile de publicitate sunt utilizate pe serverul dvs. pentru a trimite evenimente clienților dvs..

În prezent, Pusher are biblioteci de clienți pentru JavaScript, Objective-C, ActionScript, .NET și Silverlight, Ruby și Arduino. Are biblioteci editor pentru Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C #, PHP, Ruby, Perl și ColdFusion.

În scopul acestui tutorial, vom folosi biblioteca de client JavaScript și biblioteca editorului PHP. Implementarea nu ar trebui să fie prea diferită dacă utilizați un alt limbaj de programare.

Mă simt ca să construiesc un widget live chat, astfel încât oamenii să poată vorbi în timp real pe un site web. Având în vedere acest lucru, să continuăm.

Configurarea dispozitivului de împingere

Pasul 1: Înregistrați-vă un cont de dezvoltator gratuit pentru Pusher

Pentru a începe, mergeți la site-ul Pusher și înregistrați-vă pentru contul dvs. Acestea oferă un cont gratuit pentru utilizatorii planului Sandbox, care includ 20 de conexiuni și 100.000 mesaje pe zi. Când sunteți gata, puteți oricând să faceți upgrade la un plan plătit, dar din moment ce îl vom folosi doar pentru aplicația noastră de probă, un plan gratuit pentru Sandbox va face truc!

Pusher Înregistrare

Pe site, faceți clic pe Inscrie-te pe care îl veți găsi în colțul din dreapta sus și introduceți detaliile necesare. După ce ați terminat, faceți clic pe Inscrie-te butonul din nou pentru a finaliza înregistrarea.

Pasul 2: Conectați-vă pentru prima dată

După ce vă înregistrați, veți fi redirecționat către dvs. Pagina Administrare Pusher. Aici puteți gestiona toate aplicațiile Pusher. Un singur cont poate găzdui mai multe aplicații.

Pusher Administration

În partea de sus, aveți bara de navigare, unde veți găsi următoarele secțiuni:

Tablou de bord - acesta este locul în care veți vedea statisticile aplicației Pusher. Poti vedea Rata mesajelor (numărul de mesaje trimise pe minut), Conexiuni (numărul de conexiuni deschise la un moment dat) și Mesaje (totalul mesajelor trimise de aplicația dvs. pe zi).
Editați | × - aici, puteți redenumi aplicația curentă și puteți alege dacă doriți sau nu să utilizați criptarea SSL.
Acces API - aceasta conține aplicația dvs. API de acreditare, pe care o vom cere mai târziu.
debug - aceasta va afișa toate evenimentele declanșate și mesajele trimise de aplicația Pusher, precum și când clienții se conectează sau se deconectează. Acest lucru este extrem de util atunci când vă dezvoltați aplicația web, deoarece puteți vedea aici exact ce trimite și primește Pusher și cine este online pentru a le primi.
Creatorul evenimentului - acesta este un instrument util pentru trimiterea de evenimente de testare către clienții conectați - fără a fi nevoie să declanșați evenimentele dvs. din aplicația dvs. web.

Acum sunteți gata să începeți să vă dezvoltați cu Pusher!

Dezvoltarea cu Pusher

Pasul 1: Creați cod HTML, CSS, JavaScript și PHP

Să începem să dezvoltăm widget-ul live chat creând HTML. Ceea ce am în minte este un widget care va apărea în partea de jos a ecranului, cu un "Cine este online"? listă pe partea, ca IRC.

      Nume:    
    mesajele de chat merg aici 
 
  Cine e online (0)
  utilizatorii online merg aici

Unele CSS-uri pentru stilul nostru HTML:

 #chat_widget_container padding: 20px 20px 5px 20px; background-color: # F2F2F2; frontieră: 5px solid #AFAFAF; border-bottom: 0px; lățime: 333px; font-size: 11px; font-familie: "Lucida Grande", Arial, Helvetica, sans-serif; Poziția: fix; bottom: 0px; dreapta: 20px #chat_widget_login lățime: 333px; text-align: center; height: 166px; marginea superioară: 80px #chat_widget_main_container display: none #chat_widget_messages_container float: left; lățime: 200px; frontieră: 1px solid #DDD; height: 200px; overflow: auto; padding: 5px; culoare de fundal: #fff; poziție: relativă #chat_widget_messages overflow-x: hidden; overflow-y: auto; Poziția: absolută; fund: 0px #chat_widget_online width: 100px; height: 210px; plutește la stânga; padding: 0px 10px; frontieră: 1px solid #DDD; border-left: 0px; culoare de fundal: #fff; overflow: auto; #chat_widget_online_list style-list: none; umplutură: 0px #chat_widget_online_list> li margin-left: 0px #chat_widget_input_container margin-top: 10px; text-aliniere: stânga #chat_widget_input width: 260px; marja de-dreapta: 10px; frontieră: 1px solid #DDD; umplere: 2px 5px #chat_widget_loader display: none #chat_widget_login_loader display: none .clear clar: ambele

HTML-ul și CSS-ul combinat de mai sus ar trebui să facă ceva în paralel cu:

Demo Login

Va trebui să creăm o funcție care să declanșeze când dăm clic pe Logare butonul și verifică valoarea introdusă, deci hai să facem asta:

 $ ('# chat_widget_login_button') click (functie () $ (this) .hide (); // ascunde butonul de login $ ('# chat_widget_login_loader'). (/ username = username.replace (/ [^ a-z0-9] / gi, "); // filtrați dacă (username ==") / username = / if blank, apoi alertați alerta utilizatorului ('Vă rugăm să furnizați un nume de utilizator valid (numai alfanumeric)'); altfel // altceva, conectați utilizatorul nostru prin start_session.php ajaxCall ('start_session.php', username: username , function () // Suntem logati! Acum ce?););

Apoi, trebuie să informăm serverul când ne-am conectat. Pentru a face acest lucru, vom crea un server start_session.php fișier care va fi, în esență, conectat la utilizator.

  Adevărat)); Ieșire(); ?>

Veți observa că am creat un ajaxCall funcția, care în principiu doar înfășoară în jurul funcției jQuery $ .ajax. Doar adăugați acest lucru înaintea liniei $ (document) .ready ().

 funcția ajaxCall (ajax_url, ajax_data, successCallback) $ .ajax (tip: "POST", url: ajax_url, dataType: "json", data: ajax_data, time: 10; succes) successCallback (msg); altul alert (msg.errormsg);, eroare: funcție (msg) );

Acum, să încărcăm biblioteca JavaScript Pusher și jQuery, de asemenea. Plasați următoarele referințe de script în cadrul din HTML:

Pasul 2: Luați notă de acreditările API

Amintiți-vă Acces API Pagina de mai sus? Reveniți la acesta și notați-vă acreditările API. Vom avea nevoie de aceste valori atunci când vom configura bibliotecile clienților și editorilor.

API-uri Pusher API

Simțiți-vă liber să folosiți a mea, cu toate acestea, vă recomandăm să obțineți propriul dvs., deoarece un cont gratuit este limitat și s-ar putea să fiți tăiat în mijlocul.

Pasul 3: Implementați codul Pusher

Înainte de a începe implementarea aplicației Pusher în aplicația noastră, trebuie să înțelegem niște termeni Pusher:

Canal - o modalitate de diferențiere a fluxurilor de date în cadrul unei aplicații. O aplicație poate avea mai multe canale, iar un canal poate avea mai mulți clienți. Putem compara acest lucru cu o cameră de chat în IRC - toate mesajele trimise într-o anumită cameră de chat pot fi văzute de toți cei care sunt în interiorul.
Evenimente - Acest lucru este asemănător serverului care trimite date către client pentru a putea vizualiza mesajele din camera de chat. Evenimentele sunt declanșate de biblioteca editorilor, iar clienții se pot abona la aceste evenimente. În analogia noastră, abonarea la un eveniment este similară cu a asculta atunci când oamenii chat în cameră și luând notă de ceea ce spun ei.

Există trei tipuri de canale:

Canale publice - canale la care oricine se poate abona, atâta timp cât cunosc numele canalului.
Canale private - canale la care se pot abona numai utilizatorii autentificați.
Canale de prezență - asemănător cu canalele private, dar ne permite și să noțiam alți clienți conectați informații despre conectarea clientului. Vom folosi acest canal în widgetul nostru de chat.

Canalele de prezență sunt speciale, deoarece ne permit să trimitem informații despre utilizatori atunci când se conectează. De asemenea, au evenimente speciale la care ne putem abona pentru a afla când un utilizator se conectează și se deconectează. Canalele de prezență sunt ideale pentru canalele private, care trebuie să știe când un utilizator intră sau iese.

Conectarea la serviciul Pusher

Să începem prin conectarea clientului nostru la serviciul Pusher. Pentru a face acest lucru, va trebui să creați o nouă instanță a obiectului Pusher (din bibliotecă) și să apelați Abonati-va funcţie. Adăugați următorul cod după // Suntem logați! Acum ce? cometariu.

Abonati-va în mod esențial, clientul se alătură canalului. După intrarea în canal, clientul va putea să primească evenimente care se petrec în interiorul acestuia.

 pushher = Pusher nou ('12c4f4771a7f75100398'); // APP KEY: Pusher.channel_auth_endpoint = 'pusher_auth.php'; // suprascrie channel_auth_endpoint nettuts_channel = pushher.subscribe ('presence-nettuts'); // se alăture canalului prezență nettuts

Ce e ?channel_auth_endpoint??

Când vă abonați la a prezenţă sau privat , trebuie să ne asigurăm că utilizatorul conectat are permisiunea de a accesa canalul. Prin urmare, înainte de a permite clientului să se conecteze complet la acesta, clientul Pusher efectuează automat un apel la adresa URL definită în channel_auth_endpoint variabile și le trimite informații despre conectarea utilizatorului. Apoi, prin channel_auth_endpoint, ne putem da seama dacă utilizatorul conectat este autorizat.

Implicit, se face acest apel / Împingător / auth, dar îl putem ignora prin setarea channel_auth_endpoint variabil.

Unic socket_id este generat și trimis la browser de către Pusher. Atunci când se încearcă să se aboneze un canal privat sau de prezență socket_id și numele canalului este trimis la cererea dvs., (1) printr-o cerere AJAX POST care autorizează utilizatorul să acceseze canalul împotriva sistemului de autentificare existent. În cazul în care aplicația dvs. de succes returnează un șir de autorizație browserului conectat cu secretul Pusher. Acesta este trimis către Pusher prin WebSocket, care completează autorizația (2) dacă se potrivește șirul de autorizare.

Revenind la cererea noastră, trebuie să ne creăm channel_auth_endpoint. Creați un fișier, numit pusher_auth.php și plasați acest lucru în interior:

 * / $ pusher = Pusher nou ('12c4f4771a7f75100398', / / APP KEY '51399f661b4e0ff15af6 (*) ', // APP SECRET' 8896 '// APP ID); // Toate datele pe care doriți să le trimiteți despre persoana care subscrie $ presence_data = array (' username '=> $ _SESSION [' username ']); pusher-> presence_auth ($ CHANNEL_NAME, // numele canalului utilizatorul este abonarea la $ socket_id, // priza id-ul primit de la biblioteca client $ _SESSION împingător [ „userid“], // codul unic de utilizator, care identifică userul $ presence_data // datele despre persoana respectivă; exit ();?>

Acum, că putem autentifica utilizatorii conectați, va trebui să legăm câteva funcții JavaScript în evenimentele Pusher pentru a arăta că am fost deja conectat. Actualizați codul de mai jos // Suntem logați! Acum ce? comentariu, cum ar fi:

 // Suntem logați! Acum ce? pushher = Pusher nou ('12c4f4771a7f75100398'); // APP KEY: Pusher.channel_auth_endpoint = 'pusher_auth.php'; // suprascrie channel_auth_endpoint nettuts_channel = pushher.subscribe ('presence-nettuts'); // se alăture-prezență nettuts canal pusher.connection.bind ( 'conectat', funcția () // leagă o funcție după ce am conectat la împingător $ ( '# chat_widget_login_loader') ascunde ();. // ascunde ()) (* # chat_widget_login_button ') arată (); // arătați butonul de login din nou $ (' # chat_widget_login '). ; // afișați ecranul de chat // aici, legăm la împingătorul: eveniment subscription_succeeded, care se numește de fiecare dată când // subscrie cu succes la un canal nettuts_channel.bind ('pusher: subscription_succeeded', funcția (members) // this face o listă a tuturor clienților online și stabilește lista online html // actualizează, de asemenea, numărul online var whosonline_html = "; members.each (function (member) whosonline_html + = ''+ member.info.username +'
„; ); . $ ( '# Chat_widget_online_list') html (whosonline_html); updateOnlineCount (); ); // aici ne lega la împingător: member_added eveniment, care ne spune de fiecare dată când cineva se abonează // cu succes la nettuts_channel.bind canalului ( „împingător: member_added“, funcția (membru) // acest nume adaugă noul client conectat la lista online // și actualizează conturile online și $ ('# chat_widget_online_list') append (''+ member.info.username +'
„); updateOnlineCount (); ); // aici, ne obligăm la evenimentul pusher: member_removed, care ne spune de fiecare dată când cineva // se dezabonează sau se deconectează de la canal nettuts_channel.bind ('pusher: member_removed', funcția (member) // aceasta elimină clientul din lista online și actualizează numărătoarea online $ ('# chat_widget_member_' + member.id) .remove (); updateOnlineCount ();); );

Nu uitați să adăugați updateOnlineCount (); funcția de mai sus $ (Document) .ready () linia:

 funcția updateOnlineCount () $ ('# chat_widget_counter'). html ($ ('. chat_widget_member').

O explicație a ceea ce tocmai am adăugat

pusher.connection.bind ne permite să legăm o funcție de apel invers ori de câte ori se schimbă starea conexiunii Pusher. Există multe stări posibile, cum ar fi inițializat, conectat, indisponibil, eșuat și deconectat. Nu le vom folosi în acest tutorial, dar puteți citi mai multe despre ele în documentația Pusher.

channel_name.bind ne permite să legăm o funcție de un anumit eveniment care s-ar putea întâmpla în interiorul canalului. În mod implicit, canalele de prezență au evenimente proprii pe care le putem lega funcții, cum ar fi împingător: subscription_succeeded eveniment pe care l-am folosit mai sus. Puteți citi mai multe despre ele în documentația Evenimente pentru clienți.

Hai să examinăm aplicația acum și să vedem ce se întâmplă. Pentru aceasta, deschideți două file ale aplicației și conectați-vă de două ori. Ar trebui să vedeți ceva de genul:

Primul test

Când închideți o filă, al doilea client se închide, declanșându-ne împingător: member_removed eveniment și eliminarea clientului din lista online:

Al doilea test

Acum că funcționează, putem pune în aplicare în cele din urmă funcționalitatea de bază a aplicației noastre - chat live.

Implementarea funcționalității live chat

Să începem prin obligarea unei funcții la evenimentul de prezentare al formularului de chat:

 $ ('# chat_widget_form'), trimiteți (funcția () var chat_widget_input = $ ('chat_widget_input'), chat_widget_button = $ ('chat_widget_button'), chat_widget_loader = $ (); // a obține valoarea din introducerea textului chat_widget_button.hide (); // ascundeți butonul de chat chat_widget_loader.show (); // afișați încărcătorul de chat gif ajaxCall ('send_message.php', message: message , funcția (msg) // efectuați un apel ajax la send_message.php chat_widget_input.val ("); // ștergeți intrarea textului chat_widget_loader.hide (); // ascundeți încărcătorul gif chat_widget_button.show (); // show butonul de chat newMessageCallback (msg.data); // afișați mesajul cu funcția newMessageCallback); return false;);

newMessageCallback funcţie:

 Funcția newMessageCallback (date) if (has_chat == false) // daca utilizatorul nu are mesaje de chat în div încă $ ( '# chat_widget_messages') html ( ");. // elimina conținutul respectiv„chat- Mesajele intră aici 'has_chat = true; // și setați-o astfel încât să nu intre în interiorul acestei declarații if-again $ (' # chat_widget_messages ') append (data.message +
„);

După aceea, va trebui să creăm send_message.php pentru a primi apelul nostru AJAX de sus și a declanșa mesaj nou eveniment:

 <$_SESSION['username']> $ message; // declanșează evenimentul 'new_message' din canalul nostru, 'trigger-ul net-urilor de prezență-nettuts' ('presence-nettuts', // canalul 'new_message' mesajul '=> $ message) // datele de trimis); // echo matricea de succes pentru ajax call echo json_encode (array (' message '=> $ message,' succes '=> true) ;

Probabil vă întrebați de ce am abstracționat newMessageCallback în propria sa funcție. Ei bine, va trebui să o sunăm din nou când primim a mesaj nou eveniment de la Pusher. Următorul cod leagă o funcție pentru un eveniment numit mesaj nou, care va declanșa de fiecare dată când un utilizator trimite un mesaj. Adăugați acest cod după nettuts_channel.bind ( 'împingător: member_removed') cod bloc:

 nettuts_channel.bind ('new_message', funcția (data) newMessageCallback (data););

date variabila în funcția de legare deasupra va fi datele pe care le trimite serverul $ Pusher-> trigger () apel, care ar trebui să conțină datele mesajului.

Testarea

Hai să încercăm din nou aplicația noastră două browsere, nu tab-uri. (Sau încercați cu un prieten dacă l-ați încărcat undeva.)

Salut prietene!

Felicitări! Ați creat cu succes o aplicație de lucru utilizând Pusher.

Concluzie

Acolo îl aveți, un lucru timp real aplicație alimentată de Pusher. Simțiți-vă liber să vizitați demo-ul live chat pe care l-am înființat aici.

Există mult mai multe lucruri pe care nu le-am discutat în acest tutorial, cum ar fi depanarea aplicațiilor, excluderea destinatarilor din evenimente și declanșarea evenimentelor de pe partea clientului, dar le puteți învăța pur și simplu prin citirea documentației Pusher. Puteți chiar să verificați prezentarea lor de site-uri web și de aplicații care utilizează Pusher pentru a lucra în timp real.

Acest tutorial doar zgârie suprafața Pusher și WebSockets în general. Cu acest tip de tehnologie, ceea ce puteți face este limitat doar de ceea ce vă puteți imagina construirea.

Ați încercat să creați ceva cu Pusher sau intenționați să faceți acest lucru în curând? Anunță-mă în comentariile!

Notă: Aplicatorul a cerut să resetați acreditările API utilizate de contul demo în acest tutorial, ca măsură de precauție pentru abuzarea acestuia. Îmi cer scuze pentru voi băieți și, sperăm, puteți obține doar dvs. :) Multumesc!

Cod