Inizia con Pusher crea un'app di chat con canali, PHP e Vue.js

I canali di Pusher sono una piattaforma che ti consente di dare alle tue app dati in tempo reale senza interruzioni. 

In questo post, ti mostrerò come scrivere i componenti funzionali di una semplice applicazione di chat. È un esempio semplificato, ma vedrai in che modo i canali possono semplificare l'implementazione della comunicazione in tempo reale in un'app Web.

Impostazione del server

La nostra applicazione server è un singolo file PHP chiamato messages.php che gestirà le richieste POST provenienti dal browser. Il nostro gestore di messaggi invierà i messaggi del cliente al servizio Canali, che trasmetterà quindi tali messaggi ad altri client.

Quando si utilizza PHP per l'applicazione server, si desidera scaricare e utilizzare la libreria Canali ed è possibile installarla utilizzando Composer e il seguente comando:

il compositore richiede pusher / pusher-php-server

Il codice per messages.php è quasi una copia esatta di ciò che puoi trovare nella pagina Guida introduttiva nella dashboard di Canali. Ci sono solo alcune modifiche.

In primo luogo, è necessario richiedere il autoload.php file per utilizzare la libreria Pusher:

richiede './... /vendor/autoload.php';

Successivamente, i dati provenienti dal client sono in formato JSON, quindi ovviamente vogliamo decodificarlo in un array PHP funzionante.

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

Vogliamo quindi impostare il nostro oggetto Pusher in modo che possiamo quindi attivare un evento.

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

La mia installazione di PHP non funziona se il criptato l'opzione è abilitata, quindi l'ho omessa dal mio codice. Il tuo chilometraggio può variare, ma è importante notare che il criptato l'opzione determina se i dati inviati tra il server e i Canali sono crittografati o meno. Non ha nulla a che fare con la connessione tra Canali e i tuoi client - la libreria client li gestisce.

La riga finale del codice del nostro server invia i dati del messaggio ai canali:

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

Come con altre librerie server, passiamo tre cose al trigger () metodo:

1. Il nome del canale: anon-Chat
2. Il nome dell'evento: invia messaggio
3. Il carico utile: $ data

Si noti che il canale e i nomi degli eventi sono diversi dal nome del canale e dell'evento utilizzato nella pagina Guida introduttiva. Non è necessario creare nuovi canali o definire eventi personalizzati nella dashboard; basta usare qualsiasi nome di canale e evento nel codice.

Completamento del cliente

Il nostro client è una pagina Web con tre componenti Vue.js che alimentano l'interfaccia utente. Il componente principale è chiamato ChannelsChat, ed è dove metteremo il nostro Pusher oggetto che ascolta invia messaggio eventi nel anon-Chat canale. Usiamo il creato gancio.

created () let pusher = new Pusher ('427017da1bd2036904f3', cluster: 'us2', criptato: vero); lascia channel = pusher.subscribe ('anon-chat'); channel.bind ('send-message', function ()  // da implementare in seguito); 

In questo codice, creiamo il Pusher oggetto, iscriviti al anon-Chat canale, e ascoltare invia messaggio eventi.

Poiché si tratta di un'applicazione di chat, è necessario memorizzare la cronologia dei messaggi in modo che chiunque usi l'applicazione possa vedere tutti i messaggi ricevuti durante la loro sessione. Il modo più semplice per farlo è archiviare ogni messaggio come elemento nell'array. Quindi aggiungiamo un messaggi proprietà data a questo componente, come mostrato nel seguente codice:

data () return messages: []

Quindi, quando riceviamo un messaggio, lo faremo semplicemente Spingere() al nostro array, come mostrato nel seguente codice:

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

Passeremo quindi al messaggi al MessageView componente:

Invio di messaggi

L'ultimo del nostro codice appartiene al MessageSend componente; quando l'utente digita un messaggio e fa clic sul pulsante Invia, è necessario inviare tali dati a messages.php.

Innanzitutto, assicuriamoci che l'utente abbia digitato qualcosa nella casella di testo. Altrimenti, non c'è bisogno di fare nulla!

sendMessage (e) if (! this.message) return;  // continua… 

Il Messaggio la proprietà è legata al valore, quindi lo useremo per determinare se abbiamo dati.

Successivamente, inviamo la richiesta POST a message.php, e il dato è un oggetto con a Messaggio proprietà.

 // (segue) axios.post ('/ message.php', message: this.message). then (() => this.message = ";). catch ((err) => alert (err););

Se la richiesta ha esito positivo, cancelliamo il Messaggio valore della proprietà, che a sua volta cancella il valore (ricorda che sono legati). Se la richiesta non riesce, una finestra di avviso informa l'utente che si è verificato un errore.

Questo è tutto per il codice. Quindi apri due finestre del browser e indirizzale a index.php. Inizia a inviare messaggi e dovresti vedere entrambe le finestre aggiornare automaticamente e visualizzare i messaggi.

Conclusione

Come puoi vedere, Canali rende incredibilmente facile aggiungere rapidamente comunicazioni in tempo reale alle tue applicazioni, e non ha nemmeno bisogno di molto codice! 

Hai anche imparato che puoi creare canali ed eventi al volo mentre scrivi il tuo codice. Non è necessario impostarli prima di usarli. 

E infine, hai imparato come configurare le tue applicazioni per incorporare la comunicazione in tempo reale. Gestisci semplicemente l'input dell'utente in entrata dal tuo server e attiva gli eventi in base a quell'input.