Erste Schritte mit Pusher Erstellen Sie eine Chat-App mit Kanälen, PHP und Vue.js

Channels von Pusher ist eine Plattform, mit der Sie Ihren Apps nahtlose Echtzeitdaten zur Verfügung stellen können. 

In diesem Beitrag zeige ich Ihnen, wie Sie die funktionalen Komponenten einer sehr einfachen Chat-App schreiben. Es handelt sich hierbei um ein knappes Beispiel, aber Sie werden sehen, wie Channels die Implementierung von Echtzeitkommunikation in einer Web-App vereinfachen können.

Einrichten des Servers

Unsere Serveranwendung ist eine einzelne PHP-Datei messages.php Hier werden die POST-Anforderungen vom Browser verarbeitet. Unser Message-Handler sendet die Nachrichten des Clients an den Channels-Dienst, der diese Nachrichten dann an andere Clients sendet.

Wenn Sie PHP für Ihre Serveranwendung verwenden, möchten Sie die Channels-Bibliothek herunterladen und verwenden. Sie können diese Bibliothek mit Composer und dem folgenden Befehl installieren:

Composer benötigen einen Pusher / Pusher-PHP-Server

Der Code für messages.php ist fast eine exakte Kopie dessen, was Sie auf der Seite "Erste Schritte" in Ihrem Channels-Dashboard finden. Es gibt nur einige Modifikationen.

Zuerst müssen Sie die autoload.php Datei zur Verwendung der Pusher-Bibliothek:

erfordern './… /vendor/autoload.php';

Als nächstes haben die Daten, die vom Client stammen, das JSON-Format. Daher möchten wir sie offensichtlich in ein funktionsfähiges PHP-Array dekodieren.

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

Wir möchten dann unser Pusher-Objekt einrichten, damit wir ein Ereignis auslösen können.

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

Meine PHP-Installation funktioniert nicht, wenn die verschlüsselt Option ist aktiviert, daher habe ich sie aus meinem Code weggelassen. Ihre Laufleistung kann variieren, es ist jedoch wichtig zu beachten, dass die verschlüsselt Diese Option legt fest, ob die zwischen dem Server und Channels gesendeten Daten verschlüsselt werden. Es hat nichts mit der Verbindung zwischen Channels und Ihren Clients zu tun - die Clientbibliothek kümmert sich darum.

Die letzte Zeile des Servercodes sendet die Nachrichtendaten an Channels:

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

Wie bei anderen Serverbibliotheken übergeben wir drei Dinge an auslösen() Methode:

1. Der Kanalname: anon-chat
2. Der Veranstaltungsname: Nachricht senden
3. Die Nutzlast: $ data

Beachten Sie, dass sich die Kanal- und Ereignisnamen von den auf der Seite „Erste Schritte“ verwendeten Kanal- und Ereignisnamen unterscheiden. Sie müssen keine neuen Kanäle erstellen oder benutzerdefinierte Ereignisse im Dashboard definieren. Verwenden Sie einfach die gewünschten Kanal- und Ereignisnamen in Ihrem Code.

Den Client abschließen

Unser Kunde ist eine Webseite mit drei Vue.js-Komponenten, die die Benutzeroberfläche unterstützen. Die Hauptkomponente wird aufgerufen ChannelsChat, und dort werden wir unsere setzen Pusher Objekt, auf das lauscht Nachricht senden Veranstaltungen in der anon-chat Kanal. Lass uns die verwenden erstellt Haken.

created () let pusher = neuer Pusher ('427017da1bd2036904f3', Cluster: 'us2', verschlüsselt: true); let channel = pusher.subscribe ('anon-chat'); channel.bind ('send-message', function ()  // muss später implementiert werden); 

In diesem Code erstellen wir die Pusher Objekt, abonnieren Sie die anon-chat Kanal und hören auf Nachricht senden Veranstaltungen.

Da es sich um eine Chat-Anwendung handelt, müssen wir den Nachrichtenverlauf speichern, damit jeder, der die Anwendung verwendet, alle Nachrichten sehen kann, die er während seiner Sitzung erhalten hat. Die einfachste Möglichkeit, dies zu erreichen, besteht darin, jede Nachricht als Element im Array zu speichern. Fügen wir also ein Mitteilungen Dateneigenschaft für diese Komponente, wie im folgenden Code gezeigt:

data () return messages: []

Dann, wenn wir eine Nachricht erhalten, werden wir einfach drücken() es in unserem Array, wie im folgenden Code gezeigt:

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

Wir werden dann die übergeben Mitteilungen zum MessageView Komponente:

Nachrichten senden

Der letzte Code gehört zum Nachricht gesendet Komponente; Wenn der Benutzer eine Nachricht eingibt und auf die Schaltfläche Senden klickt, müssen wir diese Daten an senden messages.php.

Zuerst stellen wir sicher, dass der Benutzer etwas in das Textfeld eingibt. Ansonsten müssen Sie nichts tun!

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

Das Botschaft Eigenschaft ist an die gebunden Der Wert von uns, also verwenden wir das, um festzustellen, ob wir Daten haben.

Als nächstes senden wir die POST-Anfrage an message.php, und die Daten sind ein Objekt mit einem Botschaft Eigentum.

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

Wenn die Anfrage erfolgreich war, löschen wir die Botschaft Der Wert der Eigenschaft, der wiederum das löscht Wert (denken Sie daran, dass sie gebunden sind). Wenn die Anforderung fehlschlägt, informiert ein Warnfeld den Benutzer über einen Fehler.

Das war es für den Code. Öffnen Sie also zwei Browserfenster und zeigen Sie auf index.php. Beginnen Sie mit dem Senden von Nachrichten. In beiden Fenstern werden die Nachrichten automatisch aktualisiert und angezeigt.

Fazit

Wie Sie sehen, ist es mit Channels unglaublich einfach, Echtzeit-Kommunikation zu Ihren Anwendungen hinzuzufügen, und es war nicht einmal viel Code erforderlich! 

Sie haben auch gelernt, dass Sie beim Schreiben Ihres Codes spontan Kanäle und Ereignisse erstellen können. Sie müssen nicht vor der Verwendung eingerichtet werden. 

Und schließlich haben Sie gelernt, wie Sie Ihre Anwendungen für die Echtzeitkommunikation einrichten können. Behandeln Sie einfach eingehende Benutzereingaben von Ihrem Server und lösen Sie Ereignisse basierend auf dieser Eingabe aus.