Realtime krijgen met Pusher

Wilt u uw webtoepassingen leuker maken door ze real-time te maken - maar wilt u geen nieuwe infrastructuren maken met als enig doel om web-sockets te laten werken? In dit artikel zullen we onderzoeken hoe we dit kunnen gebruiken en implementeren Pusher, een HTML5 WebSocket-ondersteunde real-time berichtenservice voor uw toepassingen.

Invoering

Wat zijn WebSockets?

Volgens de WebSocket Wikipedia-pagina is WebSocket een technologie die bi-directionele, full-duplex communicatiekanalen biedt via één TCP-socket.

WebSockets zorgen ervoor dat een cliënt en een server in beide richtingen kunnen communiceren. Hiermee kan een server berichten naar de client verzenden en omgekeerd.

Hoe is dit relevant voor mijn webapplicatie?

In de loop der jaren is het verlopen van gegevens altijd een probleem geweest met webtoepassingen, met name die waarbij meerdere mensen zijn ingelogd en aan dezelfde dingen werken. In een toepassing voor projectbeheer maken gebruikers bijvoorbeeld soms taken die hun teamleden op hetzelfde moment maken. Met WebSockets kan dit worden beperkt door de server toe te staan Duwen kennisgevingen aan alle verbonden partijen, waardoor browsers in realtime nieuwe gegevens kunnen ontvangen. Voordat u een taakitem voor dupliceren maakt, ziet u dat iemand anders het item al heeft gemaakt.

Wat is Pusher?

Pusher is een gehoste API voor het snel, eenvoudig en veilig toevoegen van schaalbare real-time functionaliteit via WebSockets aan web- en mobiele apps.

In wezen geeft Pusher de implementatie, functionaliteit, foutopsporing en hosting van WebSockets voor u weer.
In plaats van dat u uw eigen WebSockets-server moet uitvoeren, kunt u het hele proces naar de servers van Pusher offloaden, waardoor u zowel tijd als geld bespaart.

Pusher is een gehoste API voor het snel, eenvoudig en veilig toevoegen van schaalbare real-time functionaliteit via WebSockets aan web- en mobiele apps.

Om Pusher te laten werken, hebt u zowel een clientbibliotheek als een bibliotheek van een uitgever nodig. Clientbibliotheken worden gebruikt met de client die een interface heeft met uw applicatie. Dit kan een browser (via JavaScript), een iPhone-app (via Objective-C) of een Flash-app (via ActionScript) zijn. Publisher-bibliotheken worden op uw server gebruikt om evenementen naar uw klanten te verzenden.

Op dit moment heeft Pusher clientbibliotheken voor JavaScript, Objective-C, ActionScript, .NET en Silverlight, Ruby en Arduino. Het heeft publisher-bibliotheken voor Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C #, PHP, Ruby, Perl en ColdFusion.

Voor deze tutorial gebruiken we de JavaScript-clientbibliotheek en de PHP-uitgeverbibliotheek. De implementatie moet niet te verschillend zijn als u een andere programmeertaal gebruikt.

Ik heb zin om een live chat-widget te maken, zodat mensen in realtime op een website kunnen chatten. Met dit in gedachten, laten we doorgaan.

Pusher instellen

Stap 1: Registreer voor een gratis Pusher-ontwikkelaarsaccount

Ga om te beginnen naar de Pusher-website en registreer u voor uw account. Ze bieden een gratis account voor Sandbox-gebruikers, inclusief 20 verbindingen en 100.000 berichten per dag. Wanneer u klaar bent, kunt u altijd upgraden naar een betaald plan, maar omdat we het alleen gaan gebruiken voor onze voorbeeldtoepassing, zal een gratis Sandbox-abonnement de slag maken!

Pusher registratie

Klik op de site op de Inschrijven knop die u in de rechterbovenhoek vindt en voer de vereiste details in. Als u klaar bent, klikt u op de Inschrijven knop opnieuw om uw registratie te voltooien.

Stap 2: log de eerste keer in

Nadat u zich hebt geregistreerd, wordt u omgeleid naar uw Pusher-beheerpagina. Hier kun je al je Pusher-applicaties beheren. Eén account kan meerdere applicaties hosten.

Pusher-beheerpagina

Bovenaan hebt u uw navigatiebalk, waar u de volgende secties zult vinden:

Dashboard - hier zie je de statistieken van je Pusher-applicatie. Je kan de ... zien Bericht snelheid (aantal verzonden berichten per minuut), aansluitingen (aantal open verbindingen op een bepaald tijdstip), en berichten (totaal aantal berichten dat uw toepassing per dag verzendt).
Bewerk - Hier kunt u de huidige applicatie hernoemen en kiezen of u SSL-codering wilt gebruiken.
API-toegang - dit bevat uw applicaties API-referenties, welke we later nodig zullen hebben.
debug - Hiermee worden alle geactiveerde gebeurtenissen en berichten weergegeven die zijn verzonden door uw Pusher-toepassing, evenals wanneer clients verbinding maken of de verbinding verbreken. Dit is uiterst handig bij het ontwikkelen van uw web-app, omdat u hier precies kunt zien wat Pusher verzendt en ontvangt en wie online is om ze te ontvangen.
Event Creator - dit is een handig hulpmiddel voor het verzenden van testgebeurtenissen naar uw verbonden clients - zonder dat u de gebeurtenissen zelf vanuit uw webtoepassing hoeft te activeren.

Je bent nu klaar om te beginnen met Pusher!

Ontwikkelen met Pusher

Stap 1: Maak de HTML, CSS, JavaScript en PHP

Laten we beginnen met het ontwikkelen van onze live chat-widget door de HTML te maken. Wat ik in gedachten heb is een widget die onderaan het scherm verschijnt, met een? Wie is er online? lijst aan de zijkant, zoals IRC.

      Naam:    
    chatberichten ga hier naartoe 
 
  Wie is er Online (0)
  online gebruikers gaan hier naartoe

Enkele CSS om onze HTML te stijlen:

 #chat_widget_container opvulling: 20px 20px 5px 20px; background-color: # F2F2F2; border: 5px solid #AFAFAF; border-bottom: 0px; width: 333px; font-size: 11px; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; position: fixed; bodem: 0px; rechts: 20px #chat_widget_login width: 333px; text-align: center; Hoogte: 166px; margin-top: 80px #chat_widget_main_container display: none #chat_widget_messages_container float: left; width: 200px; border: 1px solid #DDD; Hoogte: 200px; overflow: auto; padding: 5px; background-color: # fff; positie: relatief #chat_widget_messages overflow-x: verborgen; overflow-y: auto; positie: absoluut; bottom: 0px #chat_widget_online width: 100px; Hoogte: 210px; float: left; opvulling: 0px 10px; border: 1px solid #DDD; border-left: 0px; background-color: # fff; overflow: auto; #chat_widget_online_list list-style: none; opvulling: 0px #chat_widget_online_list> li margin-left: 0px #chat_widget_input_container margin-top: 10px; text-align: left #chat_widget_input width: 260px; margin-right: 10px; border: 1px solid #DDD; opvulling: 2px 5px #chat_widget_loader display: none #chat_widget_login_loader display: none .clear clear: both

De gecombineerde HTML en CSS hierboven zouden iets moeten weergeven in de trant van:

Demo Inloggen

We moeten een functie maken die wordt geactiveerd wanneer we op de knop klikken Log in knop en controleert de ingevoerde waarde, dus laten we dat doen:

 $ ('# chat_widget_login_button'). click (function () $ (this) .hide (); // verberg de login knop $ ('# chat_widget_login_loader'). show (); // toon de loader gif gebruikersnaam = $ ('#chat_widget_username'). val (); // krijg de gebruikersnaam username = username.replace (/ [^ a-z0-9] / gi, "); // filter it if (username ==") / / indien leeg, waarschuw dan de gebruikerswaarschuwing ('Geef een geldige gebruikersnaam op (alleen alfanumeriek)'); else // else, login onze gebruiker via start_session.php ajaxCall ('start_session.php', gebruikersnaam: gebruikersnaam , function () // We zijn ingelogd! Nu wat?););

Vervolgens moeten we de server informeren wanneer we zijn ingelogd. Hiervoor maken we een start_session.php bestand dat zich hoofdzakelijk in de gebruiker zal aanmelden.

  true)); Uitgang(); ?>

Je zult merken dat ik een ajaxCall functie, die eigenlijk alleen maar in de jQuery $ .ajax-functie past. Voeg dit toe vóór de regel $ (document) .ready ().

 function ajaxCall (ajax_url, ajax_data, successCallback) $ .ajax (type: "POST", url: ajax_url, dataType: "json", data: ajax_data, time: 10, success: function (msg) if (msg. succes) successCallback (msg); else alert (msg.errormsg);, error: function (msg) );

Laten we nu ook de Pusher JavaScript-bibliotheek en jQuery laden. Plaats de volgende scriptreferenties in de van uw HTML:

Stap 2: noteer uw API-referenties

Herinner de API-toegang pagina van boven? Ga hier terug naar en noteer je API-referenties. We hebben deze waarden nodig wanneer we de client- en uitgeversbibliotheken instellen.

Pusher API-referenties

Voel je vrij om de mijne te gebruiken, maar ik raad je ten sterkste aan om die van mij te gebruiken, aangezien een gratis account beperkt is en je misschien midden in de bocht bent.

Stap 3: Implementeer de Pusher-code

Voordat we beginnen met het implementeren van Pusher in onze applicatie, moeten we een aantal Push-termen begrijpen:

Kanaal - een manier om gegevensstromen binnen een applicatie te differentiëren. Een toepassing kan meerdere kanalen hebben en een kanaal kan meerdere clients hebben. We kunnen dit vergelijken met een chatroom in IRC - alle berichten die naar een specifieke chatroom zijn gestuurd, zijn zichtbaar voor alle mensen binnen.
Evenementen - Dit is vergelijkbaar met de server die gegevens naar de client verzendt, zodat u berichten in de chatroom kunt bekijken. Gebeurtenissen worden geactiveerd door de bibliotheek van de uitgever en klanten kunnen zich abonneren op deze evenementen. In onze analogie is abonneren op een evenement vergelijkbaar met luisteren wanneer mensen in de kamer chatten en kennis nemen van wat ze zeggen.

Er zijn drie soorten kanalen:

Publieke kanalen - kanalen waar iedereen zich op kan abonneren, zolang ze de naam van het kanaal weten.
Privé-kanalen - kanalen waarop alleen geverifieerde gebruikers zich kunnen abonneren.
Aanwezigheidskanalen - vergelijkbaar met privé-kanalen, maar stellen ons ook in staat om andere verbonden clients op de hoogte te stellen van informatie over het verbinden van de client. We zullen dit kanaal gebruiken in onze chatwidget.

Aanwezigheidskanalen zijn speciaal omdat ze ons informatie over gebruikers laten sturen wanneer ze verbinding maken. Ze hebben ook speciale evenementen waarop we ons kunnen abonneren om te weten wanneer een gebruiker verbinding maakt en verbreekt. Aanwezigheidskanalen zijn ideaal voor beveiligde privékanalen die moeten weten wanneer een gebruiker in- of uit gaat.

Verbinding maken met de Pusher-service

Laten we beginnen met het verbinden van onze klant met de Pusher-service. Om dit te doen, moeten we een nieuw exemplaar van het Pusher-object maken (vanuit de bibliotheek) en het abonneren functie. Voeg de volgende code toe na de // We zijn ingelogd! Wat nu? commentaar.

De abonneren functie zorgt er in wezen voor dat de client lid wordt van het kanaal. Eenmaal in het kanaal kan de client gebeurtenissen ontvangen die binnen het kanaal plaatsvinden.

 pusher = nieuwe Pusher ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // overschrijven het channel_auth_endpoint nettuts_channel = pusher.subscribe ('presence-nettuts'); // sluit je aan op het channel presence-nettuts

Wat is een ?channel_auth_endpoint??

Bij een abonnement op a aanwezigheid of privaat kanaal, moeten we ervoor zorgen dat de verbindende gebruiker toegang heeft tot het kanaal. Daarom, voordat de client volledig verbinding met het maakt, maakt de Pusher-client automatisch een oproep naar de URL die is gedefinieerd in de channel_auth_endpoint variabele en verzendt deze informatie over het verbinden door de gebruiker. Vervolgens door channel_auth_endpoint, we kunnen uitzoeken of de verbindende gebruiker geautoriseerd is.

Standaard is deze oproep gedaan naar / Pusher / auth, maar we kunnen het overschrijven door de channel_auth_endpoint veranderlijk.

Een uniek socket_id wordt door Pusher gegenereerd en naar de browser verzonden. Wanneer een poging wordt gedaan om zich te abonneren op een privé- of aanwezigheidskanaal de socket_id en kanaal naam wordt naar uw aanvraag gestuurd, (1) via een AJAX POST-verzoek waarmee de gebruiker toegang tot het kanaal krijgt met uw bestaande verificatiesysteem. Als dit lukt, retourneert uw toepassing een autorisatiereeks naar de browser die is ondertekend met uw Pusher-geheim. Dit wordt naar Pusher verzonden via de WebSocket, die de autorisatie (2) voltooit als de autoratiereeks overeenkomt.

Als we teruggaan naar onze applicatie, moeten we onze channel_auth_endpoint. Maak een bestand, genaamd pusher_auth.php en plaats dit binnen:

 hasAccessTo ($ channel_name) == false) header (", true, 403); echo (" Not authorized "); exit (); * / $ pusher = new Pusher ('12c4f4771a7f75100398', // APP KEY '51399f661b4e0ff15af6 ', // APP SECRET' 8896 '// APP ID); // Alle gegevens die u wilt verzenden over de persoon die zich abonneert $ presence_data = array (' gebruikersnaam '=> $ _SESSION [' gebruikersnaam ']); echo $ pusher-> presence_auth ($ channel_name, // de naam van het kanaal waarop de gebruiker zich abonneert op $ socket_id, // de socket-id ontvangen van de Pusher-clientbibliotheek $ _SESSION ['userid'], // een UNIEKE GEBRUIKERS-ID die identificeert de gebruiker $ presence_data // de gegevens over de persoon); exit ();?>

Nu we onze verbindende gebruikers kunnen verifiëren, moeten we enkele JavaScript-functies aan Pusher-evenementen koppelen om aan te geven dat we al zijn ingelogd. Update de code onder de // We zijn ingelogd! Wat nu? opmerking, zoals zo:

 // We zijn ingelogd! Wat nu? pusher = nieuwe Pusher ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // overschrijven het channel_auth_endpoint nettuts_channel = pusher.subscribe ('presence-nettuts'); // join the presence-nettuts channel pusher.connection.bind ('connected', function () // bind een functie nadat we verbinding hebben gemaakt met Pusher $ ('# chat_widget_login_loader'). hide (); // verberg de het laden van gif $ ('# chat_widget_login_button'). show (); // toon de login knop opnieuw $ ('# chat_widget_login'). hide (); // verberg het login scherm $ ('# chat_widget_main_container'). show () ; // toon het chatscherm // hier binden we aan de pusher: subscription_succeeded-gebeurtenis, die wordt opgeroepen wanneer u // zich met succes abonneert op een kanaal nettuts_channel.bind ('pusher: subscription_succeeded', function (members) // this maakt een lijst van alle online clients en stelt de online lijst in html // het werkt ook het online aantal bij var var whosonline_html = "; members.each (function (member) whosonline_html + = ''+ member.info.username +'
'; ); . $ ( '# Chat_widget_online_list') html (whosonline_html); updateOnlineCount (); ); // hier binden we aan de pusher: member_added -gebeurtenis, die ons vertelt wanneer iemand anders // zich met succes abonneert op het kanaal nettuts_channel.bind ('pusher: member_added', function (member) // dit voegt de naam van de nieuwe verbonden klant toe aan de online lijst // en werkt het online aantal bij evenals $ ('# chat_widget_online_list'). append (''+ member.info.username +'
'); updateOnlineCount (); ); // hier binden we ons aan pusher: member_removed -gebeurtenis, die ons vertelt wanneer iemand // zich afmeldt of de verbinding verbreekt met het kanaal nettuts_channel.bind ('pusher: member_removed', function (member) // dit verwijdert de client uit de online lijst en werkt het online aantal $ bij ('# chat_widget_member_' + member.id) .remove (); updateOnlineCount ();); );

Vergeet niet om de. Toe te voegen updateOnlineCount (); functie boven de $ (Document) .ready () lijn:

 functie updateOnlineCount () $ ('# chat_widget_counter'). html ($ ('. chat_widget_member'). length);

Een verklaring van wat we zojuist hebben toegevoegd

De pusher.connection.bind Met deze functie kunnen we een callback-functie binden wanneer de status van de push-verbindingsverbinding verandert. Er zijn veel mogelijke statussen, zoals geïnitialiseerd, verbonden, niet beschikbaar, mislukt en losgekoppeld. We zullen ze niet gebruiken in deze tutorial, maar je kunt er meer over lezen in de Pusher-documentatie.

De channel_name.bind functie stelt ons in staat om een functie te binden aan een specifieke gebeurtenis die binnen het kanaal kan plaatsvinden. Standaard hebben aanwezigheidskanalen eigen gebeurtenissen waaraan we functies kunnen binden, zoals de pusher: subscription_succeeded evenement dat we hierboven hebben gebruikt. U kunt meer over hen lezen in de documentatie van de Client Presence Events.

Laten we de app nu testen en kijken wat er gebeurt. Open hiervoor twee tabbladen van uw app en log tweemaal in. Je zou zoiets als dit moeten zien:

Eerste test

Wanneer u een tabblad sluit, wordt de tweede client ook gesloten, waardoor onze pusher: member_removed event en het verwijderen van de client uit de online lijst:

Tweede test

Nu dat werkt, kunnen we eindelijk de kernfunctionaliteit van onze applicatie implementeren: de live chat.

Implementatie van de live chat-functionaliteit

Laten we beginnen met het binden van een functie aan de submit-gebeurtenis van ons chatformulier:

 $ ('# chat_widget_form'). submit (function () var chat_widget_input = $ ('# chat_widget_input'), chat_widget_button = $ ('# chat_widget_button'), chat_widget_loader = $ ('# chat_widget_loader'), message = chat_widget_input.val (); // haal de waarde uit de tekstinvoer chat_widget_button.hide (); // verberg de chat-knop chat_widget_loader.show (); // toon de chat-lader gif ajaxCall ('send_message.php', message: message , function (msg) // maak een ajax-oproep naar send_message.php chat_widget_input.val ("); // wis de tekstinvoer chat_widget_loader.hide (); // verberg de loader gif chat_widget_button.show (); // toon de chat-knop newMessageCallback (msg.data); // geef het bericht weer met de functie newMerageCallback); return false;);

De newMessageCallback functie:

 function newMessageCallback (data) if (has_chat == false) // als de gebruiker geen chatberichten heeft in de div yet $ ('# chat_widget_messages'). html ("); // verwijder de inhoud dwz chat berichten gaan hier 'has_chat = true; // en stel het zo in dat het niet opnieuw in deze if-statement komt $ (' # chat_widget_messages '). add (data.message +'
');

Daarna moeten we maken send_message.php om onze AJAX-oproep van boven te ontvangen en de nieuw bericht evenement:

 <$_SESSION['username']> $ message "; // activeer de 'new_message'-gebeurtenis in ons kanaal,' presence-nettuts '$ pusher-> trigger (' presence-nettuts ', // the channel' new_message ', // the event array (' bericht '=> $ bericht) // de te verzenden gegevens); // echo de succesarray voor de ajax-oproep echo json_encode (array (' message '=> $ message,' success '=> true)); exit () ;?>

Je vraagt je waarschijnlijk af waarom we het hebben geabstraheerd newMessageCallback in zijn eigen functie. Wel, we zullen het opnieuw moeten bellen als we een nieuw bericht evenement van Pusher. De volgende code bindt een functie aan een geroepen gebeurtenis nieuw bericht, die wordt geactiveerd telkens wanneer een gebruiker een bericht verzendt. Voeg deze code toe na de nettuts_channel.bind ( 'pusher: member_removed') codeblok:

 nettuts_channel.bind ('new_message', functie (data) newMessageCallback (data););

De gegevens variabele in de bovenstaande bindfunctie zijn de gegevens die de server verzendt in de $ Pusher-> trekker () oproep, die de berichtgegevens moet bevatten.

testen

Laten we onze app opnieuw proberen met twee browsers, geen tabbladen. (Of probeer het met een vriend als je het ergens hebt geüpload.)

Hallo vriend!

Gefeliciteerd! U hebt met Pusher een werkende toepassing gemaakt.

Conclusie

Daar heb je het, een werking echte tijd applicatie mogelijk gemaakt door Pusher. Bezoek de live chatdemonstratie die ik hier heb ingesteld.

Er is veel meer dat ik niet heb besproken in deze zelfstudie, zoals het debuggen van je apps, het uitsluiten van ontvangers van gebeurtenissen en het activeren van gebeurtenissen aan de clientzijde, maar je kunt deze eenvoudig leren door de documentatie van Pusher te lezen. U kunt zelfs hun showcase van websites en applicaties bekijken die Pusher gebruiken om in realtime te werken.

Deze tutorial bekrast alleen het oppervlak van Pusher en WebSockets in het algemeen. Met dit soort technologie, is wat je kunt doen alleen beperkt door wat je je kunt voorstellen om te bouwen.

Heb je geprobeerd iets te creëren met Pusher, of ben je van plan dit binnenkort te doen? Laat het me weten in de comments!

Opmerking: Pusher heeft ons gevraagd om de API-inloggegevens die door het demo-account in deze zelfstudie worden gebruikt opnieuw in te stellen als voorzorgsmaatregel om misbruik te kunnen maken. Ik verontschuldig me aan jullie en hopelijk kan je er gewoon een krijgen :) Bedankt!

Code