Kom i gang med Pusher Bygg en chat-app med kanaler, PHP og Vue.js

Kanaler fra Pusher er en plattform som lar deg gi applikasjonene dine sømløse sanntidsdata. 

I dette innlegget vil jeg vise deg hvordan du skriver de funksjonelle komponentene i en veldig enkel chat-app. Det er et fjernet eksempel, men du får se hvordan kanaler kan forenkle implementeringen av sanntids kommunikasjon i en web-app.

Sette opp serveren

Vår server applikasjon er en enkelt PHP-fil kalt messages.php som vil håndtere POST-forespørsler som kommer fra nettleseren. Vår meldingshåndterer sender klientens meldinger til Kanal-tjenesten, som deretter sender disse meldingene til andre klienter.

Når du bruker PHP til serverprogrammet ditt, vil du laste ned og bruke kanalbiblioteket, og du kan installere det biblioteket ved hjelp av komponist og følgende kommando:

komponist krever pusher / pusher-php-server

Koden for messages.php er nesten en eksakt kopi av hva du kan finne på Komme i gang-siden i Dashboard for kanaler. Det er bare noen få modifikasjoner.

Først må du kreve autoload.php fil for å bruke Pusher-biblioteket:

krever './.../vendor/autoload.php';

Deretter kommer dataene fra klienten i JSON-format, så vi vil åpenbart dekode det til en brukbar PHP-array.

$ data = json_decode (file_get_contents ('php: // input'), true);

Vi vil da sette opp vårt Pusher-objekt slik at vi kan utløse en hendelse.

$ options = array ('cluster' => 'us2'); $ pusher = ny Pusher \ Pusher ('427017da1bd2036904f3', 'c46fabbaf65c4c31686b', '534815', $ opsjoner);

PHP-installasjonen min virker ikke hvis kryptert alternativet er aktivert, så jeg utelatt det fra koden min. Kilometertrykket kan variere, men det er viktig å merke seg at kryptert alternativet avgjør om dataene som sendes mellom serveren og kanalene er kryptert. Det har ingenting å gjøre med forbindelsen mellom kanaler og dine klienter - klientbiblioteket håndterer det.

Den endelige linjen i serverens kode sender meldingsdataene til kanaler:

$ pusher-> trigger ('anon-chat', 'send-message', $ data);

Som med andre serverbiblioteker, sender vi tre ting til avtrekker() metode:

1. Kanalnavnet: anon-chat
2. Hendelsesnavnet: sende melding
3. Nyttelasten: $ data

Legg merke til at kanal- og hendelsesnavnene er forskjellige enn kanal- og hendelsesnavnene som brukes på Komme i gang-siden. Du trenger ikke å opprette nye kanaler eller definere egendefinerte hendelser i oversikten. bare bruk hvilke kanaler og hendelsesnavn du vil ha i koden din.

Fullfører kunden

Vår klient er en nettside med tre Vue.js-komponenter som driver brukergrensesnittet. Hovedkomponenten kalles ChannelsChat, og det er der vi skal sette vår Pusher objekt som lytter etter sende melding hendelser i anon-chat kanal. La oss bruke opprettet krok.

opprettet () la pusher = ny Pusher ('427017da1bd2036904f3', cluster: 'us2', kryptert: true); la kanal = pusher.subscribe ('anon-chat'); channel.bind ('send-message', funksjon ()  // for å bli implementert senere); 

I denne koden lager vi Pusher objekt, abonner på anon-chat kanal, og lytt etter sende melding arrangementer.

Fordi dette er et chat-program, må vi lagre meldingsloggen slik at den som bruker programmet, kan se alle meldingene de mottok under økten. Den enkleste måten å oppnå dette på er å lagre hver melding som et element i gruppen. Så la oss legge til en meldinger dataegenskap til denne komponenten, som vist i følgende kode:

data () return messages: []

Da, når vi mottar en melding, vil vi ganske enkelt trykk() det til vårt utvalg, som vist i følgende kode:

channel.bind ('send-message', (data) => this.messages.push (data.message));

Vi vil da passere meldinger til MessageView komponent:

Sende meldinger

Den siste av vår kode tilhører MessageSend komponent; Når brukeren skriver en melding og klikker Send-knappen, må vi sende dataene til messages.php.

Først må vi sørge for at brukeren skrev noe inn i tekstboksen. Ellers er det ikke nødvendig å gjøre noe!

sendMessage (e) if (! this.message) return;  // fortsettelse følger… 

De budskap Eiendommen er bundet til s verdi, så vi vil bruke det for å avgjøre om vi har noen data.

Deretter sender vi POST-forespørselen til message.php, og dataene er et objekt med a budskap eiendom.

 // (fortsettelse) axios.post ('/ message.php', message: this.message) .Til (() => this.message = ";) .fang ((err) => varsel (feil););

Hvis forespørselen er vellykket, tømmer vi budskap egenskapens verdi, som i sin tur rydder s verdi (husk at de er bundet). Hvis forespørselen mislykkes, forteller en advarselsboks brukeren om at det oppsto en feil.

Det er det for koden. Så åpne to nettleservinduer og pek dem til index.php. Begynn å sende meldinger, og du bør se begge Windows automatisk oppdatere og vise meldingene.

Konklusjon

Som du kan se, gjør kanaler det utrolig enkelt å raskt legge til sanntidskommunikasjon til programmene dine, og det krever ikke engang mye kode! 

Du lærte også at du kan lage kanaler og hendelser på fluen mens du skriver koden. Det er ikke nødvendig å sette opp dem før du bruker dem. 

Og til slutt lærte du hvordan du kan sette opp programmene dine for å inkludere sanntids kommunikasjon. Bare håndter innkommende brukerinngang fra serveren din, og utløs hendelser basert på denne innspillingen.