Inizia con Pusher dimostrazione della comunicazione in tempo reale con i canali

I canali di Pusher sono una piattaforma che semplifica l'aggiunta di dati in tempo reale alle tue app. In questo video, ti mostrerò come iniziare a codificare la comunicazione in tempo reale tra le app client e server con JavaScript e i canali di Pusher.

Creazione dell'applicazione dei canali

La prima cosa che devi fare è creare un account su https://www.pusher.com. Clicca il Iscriviti pulsante e scegli come accedere al tuo account. Puoi utilizzare il tuo account GitHub o Google oppure puoi utilizzare un indirizzo email e una password. Vai avanti e accedi dopo aver creato il tuo account.

La prima volta che accedi, ti verrà richiesto di creare una nuova applicazione Channels. I canali forniranno un nome predefinito per la tua applicazione, ma ha più senso denominare l'applicazione Channels in modo simile alla tua applicazione. Perché scriveremo un'applicazione console Node.js, chiamerò la mia applicazione nodo-console-app. Si noti che la convenzione sui nomi prevede l'uso di trattini al posto degli spazi.

Successivamente, devi scegliere il tuo cluster e vuoi scegliere ciò che è più vicino al tuo server perché i clienti possono essere ovunque in tutto il mondo. Per me, è un traballante tra l'Ohio e la Virginia del Nord. Ho scelto l'Ohio perché è stato selezionato per impostazione predefinita.

A quel punto, potrai scegliere le tecnologie che utilizzerai per scrivere la tua app. Ho scelto Node.js, ma sentiti libero di usare qualsiasi tecnologia tu voglia.

Dopo aver cliccato su Crea la mia app pulsante, vedrai il Iniziare pagina. Questa pagina è un client e nota che indica che lo stato della connessione è connesso. Se guardiamo al Panoramica pagina, vediamo che c'è un cliente. Questo è un client dimostrativo nella pagina Guida introduttiva. 

Nella parte inferiore della pagina Panoramica, troverai l'ID app, la chiave, la chiave segreta e il cluster. Queste sono le informazioni necessarie per connettersi all'applicazione Canali all'interno delle applicazioni client e server.

Creazione dell'app server

In una nuova directory, crea a package.json file con il seguente comando:

npm init --yes

Dovrai quindi installare il pacchetto Pusher.

npm install pusher --save

Quindi, crea un file chiamato server.js-questo è il nostro file di applicazione. Inserisci il seguente codice:

'usare rigoroso'; const Pusher = require ('pusher'); var pusher = new Pusher (appId: '530620', chiave: 'b534d4fac76717b9872e', segreto: 'f84f62e45f82cc09b8c8', cluster: 'us2', crittografato: true);

Questo codice crea a Pusher oggetto passando un oggetto che ha proprietà per l'id app, la chiave, la chiave segreta e il cluster per il costruttore, in pratica tutte le informazioni che abbiamo appena visto nella panoramicala pagina sarà qui. C'è anche un'altra proprietà chiamata criptato che specifica che Pusher dovrebbe crittografare la comunicazione tra la nostra app server e il servizio Canali.

La nostra semplice applicazione server accetterà l'input dell'utente consentendoci di digitare nella finestra della console. Prenderemo quell'input e quindi attiveremo un evento di messaggistica. Il codice è simile a questo:

process.stdin.on ('data', (chunk) => const str = chunk.toString (). trim (); if (str === 'exit') process.exit (0); pusher. trigger ('my-channel', 'my-event', message: str);); console.log ('Digita un messaggio ...');

In questo codice, utilizziamo il flusso di input standard e ascoltiamo l'evento di dati. I dati che riceviamo sono dati non elaborati, quindi li convertiamo in una stringa e tagliamo gli spazi bianchi. Controlliamo quindi se l'utente ha digitato la parola "exit" e, in tal caso, usciremo dal programma.

Quindi usiamo il Pusher oggetto di trigger () metodo per attivare il my-evento evento nel il mio canale canale. Pertanto, l'attivazione di un evento comporta le seguenti tre informazioni in ordine:

• il canale
• l'evento
• il carico utile del messaggio

È importante notare che il nome del canale non è il nome dell'app Canali. Piuttosto si tratta di un nome arbitrario che si spera abbia un qualche tipo di significato per la nostra applicazione. Abbiamo usato il valore predefinito, il mio canale, perché questo è ciò che il client dimostrativo sulLa pagina introduttiva è iscritta a. I clienti iscritti a questo canale possono quindi ascoltare gli eventi che si verificano nel il mio canale canale. In questo caso, avranno bisogno di ascoltare il my-evento evento, perché è quello che stiamo attivando quando inseriamo qualcosa nella console dell'applicazione Node.js.

Il carico utile del messaggio può essere un oggetto di qualsiasi forma. Ancora una volta, questo codice imposta una proprietà del messaggio perché è ciò che sta cercando il client Getting Started.

Abbiamo terminato il nostro codice app emettendo un messaggio che indica all'utente che l'applicazione è pronta. 

Test del codice server

Puoi testare immediatamente l'app del tuo server perché abbiamo già un client: la pagina introduttiva. È possibile eseguire il server con il seguente comando:

nodo server.js

I messaggi che inserisci nell'app della console devono essere visualizzati in una casella di avviso nella pagina Guida introduttiva. Sentiti libero di giocarci prima di passare alla scrittura dell'app per il cliente nella prossima sezione.

Scrivere l'app cliente

Inizializza il progetto client in un'altra directory con il seguente comando:

npm init --yes

Quindi installare la libreria client Pusher con il seguente comando:

npm install pusher-js --save

Crea un file chiamato Client.js e digitare il seguente codice:

'usare rigoroso'; const Pusher = require ('pusher-js'); let pusher = new Pusher ('b534d4fac76717b9872e', cluster: 'us2', crittografato: true); lascia channel = pusher.subscribe ('my-channel'); channel.bind ('my-event', (data) => console.log (data.message);); console.log ('Ascolto dei messaggi ...');

Questo codice crea un client Pusher oggetto. Si noti che l'oggetto client richiede meno informazioni rispetto al server-non includere la chiave segreta o l'ID app nel codice cliente! Nel nostro esempio, quindi ci iscriviamo al il mio canale canale usando il Pusher oggetto di sottoscrivi() metodo. Questo ti permette di ascoltare qualsiasi evento in quel canale.

L'iscrizione a un canale ti offre un oggetto canale che puoi quindi utilizzare per ascoltare gli eventi che si verificano in quel canale e in questo codice abbiamo utilizzato il bind () metodo per associare un ascoltatore al my-evento evento. Ogni volta che il client gestisce il my-evento evento, usa console.log () scrivere il messaggio sullo schermo.

Vai avanti ed esegui il client in una finestra separata della console in modo che tu possa eseguire sia il client che il server contemporaneamente. Il comando per eseguire l'app è:

nodo client.js

Digita i messaggi nell'applicazione server e dovresti vedere il client ricevere e emetterli.

Conclusione

Channels è una piattaforma fantastica che ti dà la possibilità di aggiungere comunicazioni in tempo reale alle tue app, e come hai visto dalle due applicazioni che abbiamo scritto in questo video, puoi aggiungere la potenza della comunicazione in tempo reale con relativa facilità usando Canali e le loro biblioteche.