Share
Kanalen van Pusher is een platform dat het gemakkelijk maakt om naadloze realtime gegevens toe te voegen aan je apps. In deze video laat ik je zien hoe je aan de slag gaat met het coderen van realtime communicatie tussen client- en server-apps met JavaScript en kanalen van Pusher.
Het eerste dat u hoeft te doen, is een account maken op https://www.pusher.com. Klik op de Inschrijven knop en kies hoe u zich wilt aanmelden bij uw account. U kunt uw GitHub- of Google-account gebruiken of u kunt een e-mailadres en wachtwoord gebruiken. Ga je gang en log in nadat je je account hebt aangemaakt.
De eerste keer dat u zich aanmeldt, wordt u gevraagd om een nieuwe toepassing Kanalen te maken. Kanalen bieden een standaardnaam voor uw toepassing, maar het is logischer om de Kanalen-toepassing een naam te geven die vergelijkbaar is met uw toepassing. Omdat we een Node.js-consoletoepassing zullen schrijven, bel ik mijn applicatie knooppunt-console-app. Merk op dat de naamconventie is om streepjes te gebruiken in plaats van spaties.
Vervolgens moet u uw cluster kiezen en u wilt kiezen wat zich het dichtst bij uw server bevindt, omdat clients overal ter wereld kunnen zijn. Voor mij is het een gooi-up tussen Ohio en North Virginia. Ik koos voor Ohio omdat dat standaard was geselecteerd.
U kunt vervolgens de technologieën kiezen die u gaat gebruiken om uw app te schrijven. Ik koos voor Node.js, maar voel je vrij om de technologieën te gebruiken die je wilt.
Na het klikken op de Maak mijn app knop, ziet u de Ermee beginnen pagina. Deze pagina is een client en ziet dat de verbindingsstatus is verbonden. Als we naar de Overzicht pagina zien we dat er één klant is. Dat is deze democlient op de pagina Aan de slag.
Onder aan de overzichtspagina vindt u de app-id, de sleutel, de geheime sleutel en het cluster. Dit is de informatie die u nodig hebt om verbinding te maken met uw Kanalen-applicatie vanuit uw client- en servertoepassingen.
Maak in een nieuwe map een package.json bestand met de volgende opdracht:
npm init --yes
U wilt dan het Pusher-pakket installeren.
npm installeren pusher - opslaan
Maak vervolgens een bestand met de naam server.js-dit is ons applicatiebestand. Voer de volgende code in:
Accentsconagua
'gebruik strikt'; const Pusher = require ('pusher'); var pusher = new Pusher (appId: '530620', key: 'b534d4fac76717b9872e', geheim: 'f84f62e45f82cc09b8c8', cluster: 'us2', versleuteld: true);Deze code maakt een Pusher object door een object door te geven dat eigenschappen heeft voor de app-id, de sleutel, de geheime sleutel en het cluster voor de constructor - eigenlijk alle informatie die we zojuist in het overzicht hebben gezienpagina zal hier zijn. Er is ook een andere eigenschap genaamd versleutelde waarin wordt gespecificeerd dat Pusher de communicatie tussen onze serverapp en de Kanalen-service moet coderen.
Onze eenvoudige servertoepassing accepteert gebruikersinvoer door ons toe te staan in het consolevenster te typen. We pakken die invoer en activeren vervolgens een berichtenuitwisseling. Die code ziet er zo uit:
process.stdin.on ('data', (chunk) => const str = chunk.toString (). trim (); if (str === 'exit') process.exit (0); opdringer. trigger ('my-channel', 'my-event', message: str);); console.log ('Typ een bericht ...');In deze code gebruiken we de standaard invoerstroom en luisteren we naar de datagebeurtenis. De gegevens die we ontvangen zijn onbewerkte gegevens, dus we zetten het om naar een string en snijden de witruimte in. We controleren vervolgens of de gebruiker het woord "exit" heeft getypt en, zo ja, we sluiten het programma.
We gebruiken dan de Pusher voorwerpen op gang brengen() methode om de mijn-event evenement in de mijn kanaal kanaal. Dus het triggeren van een evenement omvat de volgende drie stukjes informatie in volgorde:
Het is belangrijk om te weten dat de kanaalnaam niet de naam is van de kanalen-app. Het is eerder een willekeurige naam die hopelijk een bepaalde betekenis heeft voor onze toepassing. We hebben de standaard gebruikt, mijn kanaal, omdat dat is wat de demonstratieclient op deAan de startpagina is geabonneerd. Cliënten die zich op dit kanaal hebben geabonneerd, kunnen vervolgens luisteren naar gebeurtenissen die plaatsvinden in de mijn kanaal kanaal. In dit geval moeten ze luisteren naar de mijn-event evenement, want dat is wat we triggeren wanneer we iets invoeren in de console van de Node.js-applicatie.
De payload van het bericht kan een object van elke vorm zijn. Nogmaals, deze code stelt een berichteigenschap in omdat dat is waar de Aan de slag-client naar op zoek is.
We hebben onze app-code afgewerkt door een bericht uit te voeren dat de gebruiker vertelt dat de toepassing gereed is.
U kunt uw server-app onmiddellijk testen, omdat we al een client hebben: de pagina Aan de slag. U kunt de server uitvoeren met de volgende opdracht:
knooppunt server.js
Berichten die u typt in de console-app moeten worden weergegeven in een waarschuwingsvak op de pagina Aan de slag. Voel je vrij om hiermee te spelen voordat we verder gaan met het schrijven van de client-app in het volgende gedeelte.
Initialiseer het clientproject in een andere map met de volgende opdracht:
npm init --yes
Installeer vervolgens de client Pusher-bibliotheek met de volgende opdracht:
npm installeer pusher-js - opslaan
Maak een bestand met de naam client.js en typ de volgende code:
'gebruik strikt'; const Pusher = vereisen ('pusher-js'); let pusher = new Pusher ('b534d4fac76717b9872e', cluster: 'us2', versleuteld: true); laat kanaal = pusher.subscribe ('mijn kanaal'); channel.bind ('my-event', (data) => console.log (data.message);); console.log ('Luisteren naar berichten ...');Met deze code wordt een client gemaakt Pusher voorwerp. Merk op dat het client-object minder informatie nodig heeft dan de server-neem de geheime sleutel of de app-ID niet op in uw klantcode! In ons voorbeeld abonneren we ons op de mijn kanaal kanaal met behulp van de Pusher voorwerpen abonneren () methode. Hiermee kunt u luisteren naar elk evenement in dat kanaal.
Door je te abonneren op een kanaal, krijg je een kanaalobject dat je vervolgens kunt gebruiken om naar gebeurtenissen in dat kanaal te luisteren. In deze code hebben we het kanaalobject gebruikt. binden() methode om een luisteraar te binden aan de mijn-event evenement. Telkens wanneer de client de mijn-event evenement, het gebruikt console.log () om het bericht naar het scherm te schrijven.
Ga door en voer de client in een apart consolevenster uit, zodat u zowel de client als de server tegelijkertijd kunt uitvoeren. De opdracht om de app uit te voeren is:
knoop client.js
Typ berichten in de servertoepassing en u zou moeten zien dat de client deze ontvangt en uitvoert.
Channels is een fantastisch platform dat je de mogelijkheid geeft om real-time communicatie aan je apps toe te voegen, en zoals je hebt gezien vanuit de twee applicaties die we in deze video schreven, kun je relatief gemakkelijk de kracht van realtime communicatie toevoegen met behulp van kanalen en hun bibliotheken.
