Eine real-time Chat-Anwendung ist ein hervorragendes Beispiel dafür, wie die interaktive Kommunikation im Web WebSocket revolutioniert werden kann. real-time In diesem Artikel gehen wir Schritt für Schritt durch die Erstellung einer einfachen Chat-Anwendung mit Laravel und deren Integration WebSocket, laravel-websockets
package um Benutzern reaktionsfähige und interaktive Kommunikationserlebnisse zu bieten.
Ziele der Anwendung
Wir werden eine real-time Chat-Anwendung mit den folgenden Funktionen erstellen:
Nachrichten sofort senden und empfangen: Benutzer können Nachrichten sofort senden und empfangen, ohne die Seite aktualisieren zu müssen.
Online-Benutzerliste: Die Anwendung zeigt eine Liste der Online-Benutzer und deren Chat-Status an.
Bilder und Dateien senden: Benutzer können Bilder und Dateien im Chat teilen.
Erste Schritte mit Installation und Konfiguration
Um zu beginnen, müssen wir das installieren und für laravel-websockets
package die Integration konfigurieren. Folge diesen Schritten: WebSocket Laravel
Installieren Sie laravel-websockets
package: Beginnen Sie mit der Installation package von Composer.
Veröffentlichen Sie die Konfigurationsdatei: Veröffentlichen Sie nach der Installation die Konfigurationsdatei, um die Einstellungen anzupassen.
Ausführen migration: Erstellen Sie die erforderlichen Datenbanktabellen für WebSocket.
Server starten WebSocket: Starten Sie den WebSocket Server, um real-time Verbindungen zu verwalten
Erstellen der Benutzeroberfläche
Wir erstellen eine einfache Benutzeroberfläche mit HTML, CSS und JavaScript, um die Nachrichtenliste, das Eingabefeld und die Liste der Online-Benutzer anzuzeigen.
Integrieren WebSocket und Broadcasting
Wir werden es verwenden Laravel Broadcasting, um es in die Anwendung zu integrieren WebSocket.
Installieren Pusher: Installieren Sie das, um es als Treiber pusher/pusher-php-server
package zu verwenden. Pusher Broadcasting
Konfigurieren Broadcasting: Konfigurieren Sie in der config/broadcasting.php
Datei den Treiber und geben Sie Ihre Pusher Anmeldeinformationen ein.
Erstellen Sie ein Ereignis und senden Sie es: Erstellen Sie ein ChatMessageSent-Ereignis und senden Sie es, wenn ein Benutzer eine Nachricht sendet.
JavaScript-Skript: Verwenden Sie JavaScript, um auf Ereignisse vom Server zu warten und die Benutzeroberfläche zu aktualisieren.
Abschluss
Durch den Abschluss dieses Tutorials haben Sie erfolgreich eine real-time Chat-Anwendung WebSocket mit in erstellt Laravel. Benutzer können Nachrichten sofort senden und empfangen, und Sie haben gesehen, wie WebSocket eine reaktionsfähige und interaktive Kommunikationserfahrung entsteht.