Share
Kanalen van Pusher is een platform waarmee u uw apps naadloze realtime gegevens kunt geven.
In dit bericht laat ik je zien hoe je de functionele componenten van een zeer eenvoudige chat-app schrijft. Het is een uitgekleed voorbeeld, maar u zult zien hoe kanalen de implementatie van real-time communicatie in een webapp kunnen vereenvoudigen.
Onze servertoepassing is een enkel PHP-bestand met de naam messages.php die de POST-verzoeken afhandelt die afkomstig zijn van de browser. Onze berichtbehandelaar stuurt de berichten van de klant naar de kanalendienst, die deze berichten vervolgens naar andere klanten zal verzenden.
Wanneer u PHP gebruikt voor uw servertoepassing, wilt u de kanalenbibliotheek downloaden en gebruiken en kunt u die bibliotheek installeren met behulp van composer en de volgende opdracht:
componist vereist push / pusher-php-server
De code voor messages.php is bijna een exacte kopie van wat u kunt vinden op de pagina Aan de slag in uw Kanalen-dashboard. Er zijn slechts een paar wijzigingen.
Ten eerste moet u de autoload.php bestand om de Pusher-bibliotheek te gebruiken:
vereisen './... /vendor/autoload.php';
Vervolgens zijn de gegevens afkomstig van de client in JSON-indeling, dus we willen deze duidelijk decoderen in een bruikbare PHP-array.
Accentsconagua
$ data = json_decode (file_get_contents ('php: // input'), true);Vervolgens willen we ons Pusher-object zo instellen dat we vervolgens een evenement kunnen activeren.
$ options = array ('cluster' => 'us2'); $ pusher = nieuwe Pusher \ Pusher ('427017da1bd2036904f3', 'c46fabbaf65c4c31686b', '534815', $ options);Mijn PHP-installatie werkt niet als de versleutelde optie is ingeschakeld, dus ik heb het uit mijn code weggelaten. Uw kilometerstand kan variëren, maar het is belangrijk op te merken dat de versleutelde optie bepaalt of de gegevens die tussen de server en kanalen worden verzonden, gecodeerd zijn. Het heeft niets te maken met de verbinding tussen kanalen en uw klanten - de clientbibliotheek verwerkt dat.
De laatste regel van onze servercode verzendt de berichtgegevens naar kanalen:
$ pusher-> trigger ('anon-chat', 'send-bericht', $ data);Net als bij andere serverbibliotheken, geven we drie dingen door aan de op gang brengen() methode:
anon-chatten bericht versturen $ data Merk op dat de kanaal- en evenementnamen anders zijn dan de kanaal- en gebeurtenisnamen die op de pagina Aan de slag worden gebruikt. U hoeft geen nieuwe kanalen te maken of aangepaste gebeurtenissen in het dashboard te definiëren; gebruik gewoon de gewenste kanaal- en evenementnamen in uw code.
Onze klant is een webpagina met drie componenten van Vue.js die de gebruikersinterface aandrijven. Het hoofdonderdeel wordt genoemd ChannelsChat, en daar zullen we onze plaatsen Pusher object dat luistert bericht versturen evenementen in de anon-chatten kanaal. Laten we de gebruiken aangemaakt haak.
created () let pusher = new Pusher ('427017da1bd2036904f3', cluster: 'us2', versleuteld: true); laat kanaal = pusher.subscribe ('anon-chat'); channel.bind ('send-message', function () // om later te worden geïmplementeerd); In deze code maken we de Pusher object, abonneer u op de anon-chatten kanaal, en luister voor bericht versturen events.
Omdat dit een chattoepassing is, moeten we de berichtgeschiedenis opslaan zodat iedereen die de toepassing gebruikt alle berichten kan zien die ze tijdens hun sessie hebben ontvangen. De eenvoudigste manier om dit te bereiken is om elk bericht op te slaan als een element in de array. Dus laten we er een toevoegen berichten gegevenseigenschap voor deze component, zoals weergegeven in de volgende code:
data () return messages: []
Wanneer we dan een bericht ontvangen, zullen we eenvoudigweg Duwen() het naar onze array, zoals getoond in de volgende code:
channel.bind ('send-message', (data) => this.messages.push (data.message));We passeren dan de berichten naar de MessageView component:
De laatste van onze code hoort in de MessageSend component; wanneer de gebruiker een bericht typt en op de knop Verzenden klikt, moeten we die gegevens verzenden naar messages.php.
Laten we eerst controleren of de gebruiker iets in het tekstvak heeft getypt. Anders is het niet nodig om iets te doen!
sendMessage (e) if (! this.message) retour; // wordt vervolgd…
De bericht eigendom is gebonden aan de waarde, dus we zullen dat gebruiken om te bepalen of we gegevens hebben.
Vervolgens sturen we het POST-verzoek naar message.php, en de data is een object met een bericht eigendom.
// (vervolg) axios.post ('/ message.php', message: this.message). then (() => this.message = ";). catch ((err) => alert (err););Als het verzoek is gelukt, wissen we de bericht waarde van de eigenschap, die op zijn beurt de waarde (onthoud dat ze gebonden zijn). Als het verzoek mislukt, meldt een waarschuwingsvenster de gebruiker dat er een fout is opgetreden.
Dat is het voor de code. Dus open twee browservensters en wijs ernaar index.php. Begin met het verzenden van berichten en u zou beide vensters automatisch moeten zien updaten en de berichten moeten weergeven.
Zoals u kunt zien, maakt Channels het ongelooflijk gemakkelijk om snel realtime communicatie toe te voegen aan uw applicaties en er was zelfs niet veel code voor nodig!
Je hebt ook geleerd dat je tijdens het schrijven kanalen en evenementen kunt maken terwijl je je code schrijft. Het is niet nodig om ze in te stellen voordat u ze gebruikt.
En tot slot hebt u geleerd hoe u uw applicaties kunt instellen om real-time communicatie op te nemen. Behandel eenvoudig de inkomende gebruikersinvoer van uw server en activeer gebeurtenissen op basis van die invoer.
