Komme i sanntid med Pusher

Ønsker du å krysse webapplikasjonene dine ved å gjøre dem i sanntid - men vil ikke lage nye infrastrukturer for det eneste formålet med å få nettstikkontakter til å fungere? I denne artikkelen vil vi undersøke hvordan du bruker og implementerer Pusher, en HTML5 WebSocket-drevet sanntidsmeldingstjeneste for dine applikasjoner.

Introduksjon

Hva er WebSockets?

I følge WebSocket Wikipedia-siden er WebSocket en teknologi som sørger for toveis kommunikasjonskanaler med full dupleks, over en enkelt TCP-kontakt.

I lekmannens vilkår tillater WebSockets en klient og en server å kommunisere i begge retninger. Det lar en server sende meldinger til klienten, og vice versa.

Hvordan er dette relevant for mitt webprogram?

Gjennom årene har datautløpet alltid vært et problem med webapplikasjoner, spesielt de som har flere personer logget inn og jobber med de samme tingene. For eksempel, i et prosjektstyringsprogram, lager brukerne noen ganger å gjøre ting som deres lagmedlemmer oppretter på samme tid. Med WebSockets kan dette reduseres ved å tillate serveren å trykk varsler til alle tilkoblede parter, slik at nettlesere kan motta nye data i sanntid. I virkeligheten, før du oppretter en duplikatoppgave, ser du at noen andre allerede har opprettet den.

Hva er Pusher?

Pusher er et vertsbasert API for raskt, enkelt og sikkert å legge til skalerbar sanntidsfunksjonalitet via WebSockets til web- og mobilapper.

I hovedsak inkluderer Pusher WebSockets implementering, funksjonalitet, feilsøking og hosting for deg.
I stedet for å måtte kjøre din egen WebSockets-server, kan du laste hele prosessen til Pusher's servere, og sparer både tid og penger..

Pusher er et vertsbasert API for raskt, enkelt og sikkert å legge til skalerbar sanntidsfunksjonalitet via WebSockets til web- og mobilapper.

For Pusher å jobbe, trenger du både et klientbibliotek og et utgiverbibliotek. Klientbiblioteker brukes sammen med klienten som er i sammenheng med søknaden din. Dette kan være en nettleser (via JavaScript), en iPhone-app (via Objective-C) eller en Flash-app (via ActionScript). Utgiverbiblioteker blir brukt på serveren din for å sende hendelser til kundene dine.

For øyeblikket har Pusher klientbiblioteker for JavaScript, Objective-C, ActionScript, .NET og Silverlight, Ruby og Arduino. Den har utgiverbiblioteker for Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C #, PHP, Ruby, Perl og ColdFusion..

I forbindelse med denne opplæringen bruker vi JavaScript-klientbiblioteket og PHP-utgiverbiblioteket. Implementeringen bør ikke være så annerledes hvis du bruker et annet programmeringsspråk.

Jeg har lyst til å bygge en live chat-widget slik at folk kan chatte i sanntid på et nettsted. Med dette i tankene, la oss fortsette.

Sette opp Pusher

Trinn 1: Registrer deg for en gratis Pusher Developer-konto

For å begynne, gå til Pusher nettsiden og registrer deg for din konto. De tilbyr en gratis konto for Sandbox plan brukere, som inkluderer 20 tilkoblinger og 100.000 meldinger per dag. Når du er klar, kan du alltid oppgradere til en betalt plan, men siden vi bare skal bruke den til vår prøveapplikasjon, vil en gratis Sandbox-plan gjøre trikset!

Pusher Registration

På nettstedet klikker du på Melde deg på knappen som du finner i øverste høyre hjørne og angi de nødvendige detaljene. Når du er ferdig, klikker du på Melde deg på knappen igjen for å fullføre registreringen.

Trinn 2: Logg inn for første gang

Etter at du har registrert deg, blir du omdirigert til din Pusher Administration siden. Her kan du administrere alle dine Pusher-applikasjoner. En enkelt konto kan være vert for flere applikasjoner.

Pusher Administration Page

På toppen har du navigasjonslinjen din, hvor du finner følgende avsnitt:

dashbord - Her ser du Pusher-programmets statistikk. Du kan se Meldingsfrekvens (antall meldinger sendt per minutt), tilkoblinger (antall åpne tilkoblinger til en viss tid), og meldinger (totale meldinger søknaden din sender per dag).
Redigere - her kan du omdøpe det nåværende programmet og velge om du vil bruke SSL-kryptering eller ikke.
API-tilgang - Dette inneholder søknaden din API-legitimasjon, som vi trenger senere.
Debug - Dette vil vise alle hendelsene utløst og meldinger sendt av Pusher-applikasjonen, så vel som når klienter kobler til eller kobler fra. Dette er ekstremt nyttig når du utvikler din webapp, siden du kan se her akkurat hva Pusher sender og mottar og hvem som er online for å motta dem.
Event Creator - dette er et nyttig verktøy for å sende testhendelser til dine tilkoblede klienter - uten å måtte utløse hendelsene selv fra webapplikasjonen din.

Du er nå klar til å begynne å utvikle med Pusher!

Utvikle med Pusher

Trinn 1: Opprett HTML, CSS, JavaScript og PHP

La oss begynne å utvikle vår live chat-widget ved å lage HTML. Det jeg har i tankene er en widget som vises nederst på skjermen, med en? Hvem er online? liste på siden, som IRC.

      Navn:    
    chattemeldinger gå her 
 
  Hvem er online (0)
  Internett-brukere går her

Noen CSS til å stile vår HTML:

 #chat_widget_container polstring: 20px 20px 5px 20px; background-color: # F2F2F2; grense: 5px solid #AFAFAF; nedre kant: 0 px; bredde: 333px; font-size: 11px; font-familie: "Lucida Grande", Arial, Helvetica, sans-serif; stilling: fast; bottom: 0 px; høyre: 20px #chat_widget_login bredde: 333px; tekst-Justering: center; høyde: 166px; margin-topp: 80px #chat_widget_main_container display: none #chat_widget_messages_container float: left; bredde: 200px; grense: 1px solid #DDD; høyde: 200px; flow: auto; padding: 5 px; background-color: #fff; posisjon: relative #chat_widget_messages overflow-x: hidden; flow-y: auto; stilling: absolutt; bunn: 0px #chat_widget_online bredde: 100px; høyde: 210px; float: venstre; polstring: 0px 10px; grense: 1px solid #DDD; border-left: 0px; background-color: #fff; overløp: auto; #chat_widget_online_list listestil: none; polstring: 0px #chat_widget_online_list> li margin-left: 0px #chat_widget_input_container margin-top: 10px; tekstjustering: venstre #chat_widget_input width: 260px; margin-right: 10px; grense: 1px solid #DDD; polstring: 2px 5px #chat_widget_loader display: none #chat_widget_login_loader display: none .clear clear: both

Den kombinerte HTML og CSS ovenfor skal gjengi noe i tråd med:

Demo Logg inn

Vi må opprette en funksjon som utløser når vi klikker på Logg Inn knappen og kontrollerer verdien som er oppgitt, så la oss gjøre det:

 $ ('# chat_widget_login_button'). klikk (funksjon () $ (dette) .hide (); // skjul innloggingsknappen $ ('# chat_widget_login_loader'). show (); // vis loader gif brukernavn = $ ('#chat_widget_username') .val (); // få brukernavnet brukernavn = brukernavn.replace (/ [^ a-z0-9] / gi, "); // filtrer det hvis (brukernavn ==") / Hvis du er tom, varsler du brukerens varsel ('Vennligst oppgi et gyldig brukernavn (bare alfanumerisk)'); else // else, logg inn vår bruker via start_session.php ajaxCall ('start_session.php', brukernavn: brukernavn , funksjon () // Vi er logget inn! Nå hva?););

Deretter må vi informere serveren når vi har logget inn. For å gjøre dette, oppretter vi en start_session.php fil som i hovedsak logger inn på brukeren.

  ekte)); exit(); ?>

Du vil legge merke til at jeg har opprettet en ajaxCall funksjon, som i utgangspunktet bare bryter rundt jQuery $ .ajax-funksjonen. Legg bare til dette før $ (dokument) .ready () -linjen.

 funksjon ajaxCall (ajax_url, ajax_data, successCallback) $ .ajax (type: "POST", url: ajax_url, dataType: "json", data: ajax_data, tid: 10, suksess: funksjon (msg) hvis suksess) successCallback (msg); else alert (msg.errormsg);, feil: funksjon (msg) );

La oss nå laste inn Pusher JavaScript-biblioteket og jQuery også. Plasser følgende skriptreferanser innenfor av HTML-en din:

Trinn 2: Legg merke til API-legitimasjonene dine

Husk API-tilgang side ovenfra? Gå tilbake til det og noter ned API-legitimasjonene dine. Vi trenger disse verdiene når vi konfigurerer klient- og utgiverbiblioteker.

Pusher API-legitimasjon

Bruk gjerne min, men jeg anbefaler at du får din egen, siden en gratis konto er begrenset, og du kan bli kuttet av midtveis.

Trinn 3: Implementer Pusher-koden

Før vi begynner å implementere Pusher i vår søknad, må vi forstå noen Pusher-vilkår:

Kanal - en måte å differensiere strømmer av data i en applikasjon. Et program kan ha flere kanaler, og en kanal kan ha flere klienter. Vi kan sammenligne dette med et chatterom i IRC - alle meldinger som sendes til et bestemt chatrom, kan ses av alle menneskene som er inne.
arrangementer - Dette er relatert til serveren som sender data til klienten, slik at du kan vise meldinger i chatterommet. Hendelser utløses av utgiverbiblioteket, og klienter kan abonnere på disse hendelsene. I vår analogi er abonnement på et arrangement likt å lytte når folk snakker i rommet og legger merke til hva de sier.

Det finnes tre typer kanaler:

Offentlige kanaler - kanaler som noen kan abonnere på, så lenge de kjenner kanalens navn.
Private kanaler - kanaler som bare autentiserte brukere kan abonnere på.
Tilstedeværelseskanaler - ligner på private kanaler, men tillater oss også å varsle andre tilkoblede klienter med informasjon om klientens tilkobling. Vi bruker denne kanalen i vår chat-widget.

Tilstedeværelseskanaler er spesielle siden de lar oss sende informasjon om brukere når de kobler til. De har også spesielle arrangementer som vi kan abonnere på for å vite når en bruker kobler sammen og kobler fra. Tilstedeværelseskanaler er ideelle for sikre, private kanaler som trenger å vite når en bruker går inn eller ut.

Kobler til Pusher-tjenesten

La oss begynne med å koble vår klient til Pusher-tjenesten. For å gjøre det, må vi opprette en ny forekomst av Pusher-objektet (fra biblioteket) og ringe til abonnere funksjon. Legg til følgende kode etter // Vi er logget inn! Hva nå? kommentar.

De Abonnere funksjon gjør i hovedsak klienten til å delta i kanalen. En gang i kanalen vil klienten kunne motta hendelser som skjer i den.

 pusher = ny Pusher ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // overstyr channel_auth_endpoint nettuts_channel = pusher.subscribe ('presence-nettuts'); // Bli med på kanalens tilstedeværelsesnettverk

Hva er en ?channel_auth_endpoint??

Når du abonnerer på en tilstedeværelse eller privat kanal, må vi sørge for at tilkoblingsbrukeren får tilgang til kanalen. Derfor må Pusher-klienten automatisk ringe til nettadressen som er definert i. Før klienten blir fullstendig koblet til den channel_auth_endpoint variabel og sender den informasjon om brukeren som kobler til. Så gjennom channel_auth_endpoint, Vi kan finne ut om tilkoblingsbrukeren er autorisert.

Som standard er denne anropen laget til / Pusher / auth, men vi kan overstyre det ved å sette inn channel_auth_endpoint variabel.

En unik socket_id genereres og sendes til nettleseren av Pusher. Når det blir forsøkt å abonnere på en privat- eller tilstedeværelseskanal de socket_id og CHANNEL_NAME sendes til din søknad, (1) via en AJAX POST-forespørsel som tillater brukeren å få tilgang til kanalen mot ditt eksisterende autentiseringssystem. Hvis vellykket, returnerer søknaden din en autorisasjonstreng til nettleseren som er signert med Pusher-hemmeligheten din. Dette sendes til Pusher over WebSocket, som fullfører autorisasjonen (2) hvis godkjenningsstrengen samsvarer.

Når vi går tilbake til vår søknad, må vi opprette vår channel_auth_endpoint. Opprett en fil, kalt pusher_auth.php og plasser dette innvendig:

 hasAccessTo ($ channel_name) == false) header ("true" 403); ekko ("Ikke autorisert"); avslutte (); * / $ pusher = ny Pusher ('12c4f4771a7f75100398', // APP KEY '51399f661b4e0ff15af6 '// APP SECRET' 8896 '// APP ID); // Eventuelle data du vil sende om personen som abonnerer på $ presence_data = array (' brukernavn '=> $ _SESSION [' brukernavn ']); ekko $ pusher-> presence_auth ($ channel_name, // navnet på kanalen brukeren abonnerer på $ socket_id, // socket id mottatt fra Pusher klient bibliotek $ _SESSION ['userid'], // et unikt bruker ID som identifiserer brukeren $ presence_data // dataene om personen); exit ();?>

Nå som vi kan godkjenne våre tilkoblede brukere, må vi binde noen JavaScript-funksjoner til Pusher-hendelser for å vise at vi allerede har logget inn. Oppdater koden under // Vi er logget inn! Hva nå? kommentar, slik som:

 // Vi er logget inn! Hva nå? pusher = ny Pusher ('12c4f4771a7f75100398'); // APP KEY Pusher.channel_auth_endpoint = 'pusher_auth.php'; // overstyr channel_auth_endpoint nettuts_channel = pusher.subscribe ('presence-nettuts'); // Bli med i tilstedeværelsesnettverket kanal pusher.connection.bind ('connected', funksjon () // bind en funksjon etter at vi har koblet til Pusher $ ('# chat_widget_login_loader'). skjul (); // skjul viser (); // skjul innloggingsskjermbildet $ ('# chat_widget_main_container'). show () ; // vis chat-skjermen // her, vi binder til puseren: subscription_succeeded event, som kalles når du // lykkes å abonnere på en kanal nettuts_channel.bind ('pusher: subscription_succeeded', funksjon (medlemmer) // dette lager en liste over alle onlineklienter og setter online listen html // den oppdaterer også nettantellingen var whosonline_html = "; members.each (funksjon (medlem) whosonline_html + = ''+ member.info.username +'
'; ); . $ ( '# Chat_widget_online_list') html (whosonline_html); updateOnlineCount (); ); // her binder vi til pusheren: member_added event, som forteller oss når noen andre // lykkes abonnere på kanalen nettuts_channel.bind ('pusher: member_added', funksjon (medlem) // dette legger til den nye tilkoblede klientens navn til online-listen // og oppdaterer online-tellingen også $ ('# chat_widget_online_list'). append (''+ member.info.username +'
'); updateOnlineCount (); ); // her binder vi oss til pusher: member_removed event, som forteller oss når noen // avbryter eller kobler fra kanalen nettuts_channel.bind ('pusher: member_removed', funksjon (medlem) // dette fjerner klienten fra online listen og oppdaterer nettantellingen $ ('# chat_widget_member_' + member.id) .remove (); updateOnlineCount ();); );

Husk å legge til updateOnlineCount (); funksjon over $ (Document) .ready () linje:

 funksjon updateOnlineCount () $ ('# chat_widget_counter'). html ($ ('chat_widget_member'). lengde);

En forklaring på hva vi nettopp har lagt til

De pusher.connection.bind funksjonen tillater oss å binde en tilbakeringingsfunksjon når Pusher-tilkoblingsstatus endres. Det er mange mulige statuser, for eksempel initialisert, tilkobling, utilgjengelig, mislyktes og frakoblet. Vi vil ikke bruke dem i denne opplæringen, men du kan lese mer om dem i Pusher-dokumentasjonen.

De channel_name.bind funksjonen tillater oss å binde en funksjon til en bestemt hendelse som kan skje inne i kanalen. Som standard har tilstedeværelseskanaler hendelser av seg selv som vi kan binde funksjoner til, som pusher: subscription_succeeded arrangement som vi brukte ovenfor. Du kan lese mer om dem i dokumentasjonen for Client Presence Events.

La oss teste appen nå og se hva som skjer. For å gjøre dette, åpne to faner av appen din og logg inn to ganger. Du bør se noe slikt:

Første test

Når du lukker en fane, lukkes den andre klienten også og utløser vår pusher: member_removed hendelse og fjerning av klienten fra onlinelisten:

Andre test

Nå som det virker, kan vi endelig implementere kjernefunksjonaliteten til vår søknad - live chat.

Implementere live chat-funksjonaliteten

La oss begynne med å knytte en funksjon til innlevering av vårt chat-skjema:

 $ ('# chat_widget_form'). send (funksjon () var chat_widget_input = $ ('# chat_widget_input'), chat_widget_button = $ ('# chat_widget_button'), chat_widget_loader = $ ('# chat_widget_loader'), melding = chat_widget_input.val (); // få verdien fra tekstinngangen chat_widget_button.hide (); // skjul chat-knappen chat_widget_loader.show (); // vis chat-lasteren gif ajaxCall ('send_message.php', message: message , funksjon (msg) // gjør et ajax-anrop til send_message.php chat_widget_input.val ("); // fjern tekstinngangen chat_widget_loader.hide (); // skjul loader gif chat_widget_button.show (); // show chat-knappen newMessageCallback (msg.data); // vise meldingen med funksjonen newMessageCallback); return false;);

De newMessageCallback funksjon:

 funksjon newMessageCallback (data) if (has_chat == false) // hvis brukeren ikke har chatmeldinger i div ennå $ ('# chat_widget_messages'). html ("); // fjern innholdet, dvs. meldinger gå her 'has_chat = true; // og sett det slik at det ikke går inn i denne if-statement igjen $ (' # chat_widget_messages '). append (data.message +'
');

Etterpå må vi opprette send_message.php å motta vårt AJAX-anrop fra oven og utløse ny melding begivenhet:

 <$_SESSION['username']> $ message "; // utløser hendelsen 'new_message' i kanalen vår, 'presence-nettuts' $ pusher-> trigger ('presence-nettuts', // kanalen 'new_message' melding '=> $ melding) // dataene som skal sendes); // ekko suksessmatrisen for ajax-samtalen echo json_encode (array (' message '=> $ melding,' suksess '=> sann)); ;?>

Du lurer sikkert på hvorfor vi abstrakte newMessageCallback inn i sin egen funksjon. Vel, vi må ringe det igjen når vi mottar en ny melding hendelse fra Pusher. Følgende kode binder en funksjon til en hendelse, kalt ny melding, som vil utløse hver gang en bruker sender en melding. Legg til denne koden etter nettuts_channel.bind ( 'stapper: member_removed') kodeblokk:

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

De data variabel i bindingsfunksjonen ovenfor blir dataene serveren sender i $ Pusher-> trigger () ring, som skal inneholde meldingsdataene.

testing

La oss prøve vår app igjen med to nettlesere, ikke faner. (Eller prøv det med en venn hvis du har lastet opp det et sted.)

Hei venn!

Gratulerer! Du har vellykket opprettet et arbeidsprogram ved hjelp av Pusher.

Konklusjon

Der har du det, en jobbing sanntid søknad drevet av Pusher. Du er velkommen til å besøke live chat demoen jeg har satt opp her.

Det er mye mer som jeg ikke diskuterte i denne opplæringen, for eksempel feilsøking av appene dine, unntatt mottakere fra hendelser, og utløser hendelser på klientsiden, men du kan lære disse bare ved å lese Pusher-dokumentasjonen. Du kan også sjekke ut deres fremvisning av nettsteder og applikasjoner som bruker Pusher til å jobbe i sanntid.

Denne opplæringen klipper bare overflaten på Pusher og WebSockets generelt. Med denne typen teknologi kan du bare begrense det du kan forestille deg å bygge.

Har du prøvd å lage noe med Pusher, eller har du tenkt å gjøre det snart? Gi meg beskjed i kommentarene!

Merk: Pusher har bedt om at vi tilbakestiller API-legitimasjonene som brukes av demo-kontoen på denne opplæringen som en forholdsregel til at den blir misbrukt. Jeg beklager dere, og forhåpentligvis kan du bare få din egen :) Takk!

Kode