Erstellen Sie eine Echtzeit-Chat-Anwendung mit Modul und Laravel 5

In diesem Tutorial zeige ich Ihnen, wie Sie eine Echtzeit-Chat-Anwendung mit Laravel 5, PostgreSQL und Pusher implementieren. Dann werden wir diese Anwendung zusammen für Modulus bereitstellen.

Wir verwenden Laravel 5 für den Back-End-Service, HTML5 und jQuery für eine einfache Front-End-Anwendung, PostgreSQL für die Datenbank und Pusher für die Echtzeitkommunikation zwischen Server und Clients. Die Gesamtarchitektur sieht folgendermaßen aus:

Das Szenario

1. Ein Benutzer öffnet die Chat-Anwendung in einem Browser und gibt einen Kurznamen an, um den Chat fortzusetzen.
2. Der Benutzer gibt einen Text ein und klickt auf Senden Taste.
3. Die Nachricht wird von einem Dienst verarbeitet, der mit Laravel 5 geschrieben wurde, und wird in der Datenbank gespeichert. 
4. Die persistente Nachricht wird an Pusher gesendet, um ein neues Nachrichtenereignis auszulösen, um diese Nachricht an verbundene Clients zu senden.
5. Die neue Nachricht wird von den Clients abgerufen und die Chat-Nachrichtenliste wird für alle verbundenen Clients aktualisiert. 

Wir werden mit diesem Szenario sehr nützliche Themen behandeln, auch wenn dies eine sehr einfache Anwendung ist. 

Vorbereitung auf die Umgebung

Laravel Projekt einrichten

Lassen Sie uns zuerst Laravel installieren, damit wir einen Chat-Service für unsere Anwendung schreiben können. Wir werden Composer verwenden, um Laravel und verwandte Pakete einfach zu installieren. Weitere Informationen zur Composer-Installation finden Sie auf der Composer-Website. Öffnen Sie nach der Installation von Composer eine Eingabeaufforderung und führen Sie den folgenden Befehl aus, um Laravel 5 zu installieren:

composer global erfordert "laravel / installer = ~ 1.1"

Sie werden folgende Ausgabe sehen:

Wir sind bereit, ein Laravel-Projekt zu erstellen. Führen Sie den folgenden Code aus, um eine Projektstruktur für die Chatanwendung zu generieren.

laravel new Echtzeit-ChatLaravel

Dadurch wird ein Boilerplate-Laravel-Projekt generiert, und Sie sehen die folgende Ordnerstruktur:

Datenbank

Unsere Anwendung wird mit einer Datenbank interagieren und es wird PostgreSQL sein. In diesem Projekt verwenden wir ElephantSQL, ein Unternehmen, das PostgreSQL als Service anbietet. Sie können mit Laravel verschiedene Arten von Datenbanken verwenden, beispielsweise SQLite, MySQL, PostgreSQL und SQL Server. Ich habe mich für PostgreSQL entschieden, denn wenn wir unser Projekt bei Modulus bereitstellen, können Sie keine interne Datenbank wie die oben genannten Datenbanktypen verwenden. Ich ziehe es vor, eine Datenbank zu verwenden, die sie als Dienst anbietet. Mit ElephantSQL können Sie einige der guten Funktionen von PostgreSQL mit einem kostenlosen Tarif ausprobieren. 

Sie können einen kostenlosen Plan von ElephantSQL nutzen, um ihn für Ihre Anforderungen zu verwenden. Wenn Sie Ihre Konto- und Datenbankerstellung abgeschlossen haben, kennen Sie Datenbankinformationen wie Hostname, Name der Datenbank, Nutzername, und Passwort. Notieren Sie sich diese Informationen zur Verwendung in Laravel für die Datenbankkonfiguration.

Pusher

Dieses Unternehmen bietet einen Dienst zum Auslösen von Ereignissen für die Echtzeitkommunikation. Sie können die Pusher-Website besuchen, um eine zu erhalten. Nach erfolgreicher Konto- und Anwendungserstellung erhalten Sie einige Anmeldeinformationen wie App-ID, App-Geheimnis, und App-Schlüssel. Wir werden in den nächsten Abschnitten über ihre Verwendung sprechen.

Nginx

Um eine PHP-Anwendung in Modulus ausführen zu können, müssen Sie einen Webserver für Ihre Anwendung konfiguriert haben. Wir werden die folgende Nginx-Konfiguration verwenden:

Server hört 8080; Servername modulus_app_url; root / mnt / app / public; index index.html index.php; location / try_files $ uri $ uri / /index.php?$query_string;  location ~ \ .php $ fastcgi_split_path_info ^ (. + \. php) (/.+) $; fastcgi_pass unix: /mnt/home/php-fpm.sock; fastcgi_param SCRIPT_FILENAME $ Dokumentstammverzeichnis $ fastcgi_script_name; fastcgi_index index.php; include fastcgi_params; 

Wir haben die notwendigen Umgebungseinstellungen abgeschlossen, um die Entwicklung fortzusetzen. Gehen wir zum Design-Teil.

Projektdesign von Grund auf

Modell

Wenn Sie zuvor schon einmal ein ORM-Framework verwendet haben, sind Sie mit diesem Thema bestens vertraut. In Laravel-Projekten werden Domänenmodelle in der app / Ordner standardmäßig. In dieser Anwendung führen wir CRUD-Vorgänge für Nachrichten aus Botschaft Modell-. 

Wenn Sie ein Modell erstellen möchten, erstellen Sie einfach eine Klasse, die das Modell erweitert Modell Klasse, eine abstrakte Klasse im Laravel-Kernpaket Illuminate \ Database \ Eloquent. Erstellen Sie eine Datei mit dem Namen Message.php unter dem app / Ordner und fügen Sie den folgenden Inhalt in die Datei ein:

Dieses Modell ermöglicht es uns, mehrere datenbankbezogene Vorgänge auf einfache Weise auszuführen. Wenn Sie beispielsweise die folgende Abfrage ausführen:
Sie erhalten alle Meldungen aus der Datenbank. Wie entscheidet es jedoch für den Tabellennamen, den es im Ergebnis abruft? Es verwendet die $ table Wert in der Modellklasse. Wenn Sie eine neue Nachricht erstellen, wird Ihr Nachrichtenmodell direkt im Ordner gespeichert Mitteilungen Tabelle. Wir werden im Abschnitt Controller ausführlich auf Modelle eingehen.
Regler
Der Controller ist der Ort, an dem Ihr Anwendungsverhalten definiert wird. Wir werden einige nachrichtbezogene Operationen durchführen, wenn ChatController existiert in unserer Anwendung. Wir haben vier Endpunkte für unsere Anwendung:
 
 GET / login: zum Rendern der Anmeldeseite
 
 GET / chatten: zum Rendern der Chat-Seite
 
 GET / Nachrichten: Zum Auflisten der letzten fünf Nachrichten, die beim ersten Öffnen des Benutzers auf der Chat-Seite angezeigt werden
 
 POST / Nachrichten: zum Speichern einer neuen Nachricht
 
Um einen Controller anzulegen, erstellen Sie einfach eine Klasse unter App \ Http \ Controller und lassen Sie diese Klasse eine Laravel-spezifische Klasse erweitern Regler was existiert in App \ Http \ Controller. Wenn Sie das anfordern /Anmeldung oder /Plaudern Endpunkt werden sie ihre eigenen Vorlagen unter darstellen Ressourcen / Ansichten. Sie können dies tun, indem Sie die folgenden Aktionen verwenden.
Klasse ChatController erweitert Controller public function getLogin () return view ("login");  public function getChat () return view ("chat");  public function saveMessage () if (Request :: ajax ()) $ data = Eingabe :: all (); $ message = neue Nachricht; $ message-> author = $ data ["author"]; $ message-> message = $ data ["Nachricht"]; $ message-> save (); Drücker :: Auslöser ('chat', 'message', ['message' => $ message]);  public function listMessages (Nachricht $ message) return response () -> json ($ message-> orderBy ("created_at", "DESC") -> take (5) -> get ()); 
Die erste und zweite Aktion werden bestimmte Seiten darstellen. Die dritte Aktion dient zum Speichern von Nachrichten. In dieser Aktion wird der erste Anforderungstyp geprüft. Wenn es sich um eine AJAX-Anforderung handelt, wird der gesamte Anforderungshauptteil als assoziatives Array abgerufen. Dieses Array wird zum Auffüllen der neu erstellten Modellnachricht verwendet. 
Dann ist die sparen() Die Methode wird direkt am Modell ausgeführt, um die Datenbank zu speichern. Immer wenn eine neue Nachricht in der Datenbank gespeichert wird, wird dieselbe Nachricht durch Auslösen von an Pusher gesendet Botschaft Veranstaltung. Wenn Sie ein Ereignis auslösen, werden alle verbundenen Clients benachrichtigt. Um die Pusher In Ihren Laravel-Projekten können Sie Folgendes tun:
 
Pusher-bezogene Pakete über anfordern Komponist erfordert Vinkla / Pusher.
 
Fügen Sie das Pusher-Paket hinzu Vinkla \ Pusher \ PusherServiceProvider :: Klasse, zum config / app.php.
 
Verwenden Sie Pusher-Klassen in Ihren Controllern, wie Vinkla \ Schieber \ Fassaden \ Schieber;, über der Controller-Klasse.
 
Sie sind in Ordnung mit den Paketen, aber wie sieht es mit der Pusher-Konfiguration aus? Sie müssen Anbieter in Ihren Projekten mit dem folgenden Befehl veröffentlichen:
PHP Handwerker Anbieter: veröffentlichen
Dieser Befehl erstellt eine Konfigurationsdatei config / pusher.php, Sie müssen die erforderlichen Anmeldeinformationen angeben, die Sie in Ihrem Pusher-Dashboard finden können. Die Konfigurationsdatei sieht wie folgt aus:
'connections' => ['main' => ['auth_key' => 'auth_key', 'secret' => 'secret', 'app_id' => 'app_id', 'options' => [], 'host' => null, 'port' => null, 'timeout' => null,], 'alternative' => ['auth_key' => 'your-auth-key', 'secret' => 'your-secret', 'app_id' => 'your-app-id', 'options' => [], 'host' => null, 'port' => null, 'timeout' => null,],]
Der vierte Endpunkt dient zum Auflisten der letzten fünf Nachrichten, die auf der Chat-Seite für neu hinzugefügte Benutzer angezeigt werden sollen. Der magische Code lautet:
public function listMessages (Nachricht $ message) return response () -> json ($ message-> orderBy ("created_at", "DESC") -> take (5) -> get ()); 
In diesem Code wird der Botschaft Das Modell wird in die Aktion eingefügt oder führt datenbankbezogene Operationen durch $ message. Nachrichten erster Ordnung von hergestellt in in absteigender Reihenfolge, und nehmen Sie dann die letzten fünf. Das Ergebnis wird mit JSON im Format zurückgegeben Antwort () -> Json (…). 
Wir haben über Controller und Aktionen gesprochen, aber wie werden diese Aktionen ausgeführt, wenn ein Benutzer eine bestimmte URL aufgerufen hat? Sie können Ihre Routenkonfigurationen zur Datei hinzufügen app / Http / routes.php. Sie können ein Beispiel unten sehen:
In dieser Verwendung werden der Anforderungs-URI und die Anforderungsmethode dem Controller-Namen und dem Aktionsnamen zugeordnet.
Das ist alles mit den Controllern. Wechseln wir zum Ansichtsteil.
Aussicht
In diesem Abschnitt haben wir die Blade-Vorlagen-Engine von Laravel verwendet. In unseren Projekten gibt es eigentlich keine Vorlagen-Engine. Wenn Sie jedoch Werte vom Controller an Ansichten senden möchten, können Sie dieses Projekt direkt verwenden. 
Wir haben zwei Ansichtsseiten: login.blade.php und chat.blade.php. Wie Sie sehen, gibt es ein Blade-Schlüsselwort in den Namen der Ansichtsdatei, um anzugeben, dass dies für die Blade-Vorlagen-Engine verwendet wird. 
Die erste ist nur für den Anmeldevorgang gedacht Plaudern Seite. In dieser Ansichtsdatei befinden sich einige JavaScript-Bibliotheken von Drittanbietern, die von einem CDN wie bereitgestellt werden jQuery, jQuery Cookie, Bootstrap, und Pusher. Wir haben ein Chat-Formular, um Nachrichten zu senden, und Laravel fügt eine Meta-Beschreibung in die Seite ein:
Wir senden jedoch eine Chat-Nachricht über AJAX, und in den AJAX-Request-Headern befinden sich keine Token. Wir bieten eine Lösung mit dem folgenden Code-Snippet:
$ .ajaxSetup (Kopfzeilen: 'X-CSRF-Token': $ ('meta [name = _token]'). attr ('content');
Wenn Sie eine AJAX-Anfrage senden, wird dieses Token in den Header eingefügt. 
Um den Nachrichtenkanal in Echtzeit zu hören, haben wir Folgendes verwendet:
var pusher = neuer Pusher ('app_id'); var channel = pusher.subscribe ('chat'); channel.bind ('message', Funktion (Daten) var message = data.message; $ (". media-list li"). first (). remove (); $ (". media-list"). append ('
'+ message.message +'
'+ message.author +' | '+ message.created_at +'
'); );
Zunächst einmal haben wir eine Pusher Objekt mit einem app_id Konstrukteur. Dann wird ein Kunde für den Kanal abonniert. Wann immer ein neues Ereignis mit dem Namen Botschaft ankommt, wird eine Callback-Funktion innerhalb der ausgeführt binden() Funktion. Der Nachrichtenlistenbereich wird mit den neuen Nachrichten aktualisiert. 
Immer wenn ein neuer Benutzer die Chatseite öffnet, werden die letzten fünf Nachrichten im Nachrichtenlistenbereich durch folgenden Code angezeigt:
$ .get ("/ messages", Funktion (messages) refreshMessages (messages));
Sie können auf den Quellcode zurückgreifen, um den vollständigen Quellcode der Ansichtsseiten zu analysieren.
Einsatz
Wir werden Modulus für das Hosting unserer Anwendung verwenden. 
Modulus ist einer der besten PaaS-Systeme für die Bereitstellung, Skalierung und Überwachung Ihrer Anwendung in der Sprache Ihrer Wahl. Bevor Sie mit der Bereitstellung fortfahren, gehen Sie bitte zu Modulus und erstellen Sie ein Konto.
Voraussetzungen
Die Bereitstellung ist im Modul sehr einfach. Sie müssen lediglich ein Node.js-Modul installieren und einen Befehl ausführen. Sie können Ihr Projekt auch komprimieren und zu Modulus hochladen. Wir bevorzugen die erste Option in diesem Tutorial. 
Ich gehe davon aus, dass Sie Node.js und npm bereits auf Ihrem Computer installiert haben. Öffnen Sie einfach ein Befehlszeilentool und führen Sie es aus npm install -g modulus. Melden Sie sich nach erfolgreicher Installation bei Ihrem Modulus-Konto mit der Modulus-CLI an: modul login. Wenn Sie sich bei GitHub anmelden möchten, können Sie verwenden modul login --github. 
Nachdem Sie sich angemeldet haben, erstellen Sie ein Projekt mit diesem Befehl: Modulprojekt "RealtimeChatLaravel" erstellen. Sie haben eine Anwendung auf der Modulseite erstellt. 
Das letzte, was Sie tun müssen, ist das Erstellen eines Ordners in Ihrem Projektstammordner Sites aktiviert, und fügen Sie die oben erwähnte Nginx-Konfiguration in den Nginx-Abschnitt ein Sites aktiviert Mappe. 
Lassen Sie uns Ihr Projekt in dieser Anwendung für Modulus bereitstellen. Ausführen Modul bereitstellen um mit der Bereitstellung zu beginnen, und fertig! Mit diesem Befehl werden Ihre Projektdateien in Modulus hochgeladen. Außerdem wird der Webserver unter Verwendung der Nginx-Konfiguration konfiguriert, die Sie in das Verzeichnis einfügen Sites aktiviert Mappe. 
Nach erfolgreicher Bereitstellung erhalten Sie eine Nachricht Echtzeit-ChatLaravel läuft unter http://realtimechatlaravel-51055.onmodulus.net/cha. Gehen Sie zu dieser URL, um eine funktionsfähige Demo anzuzeigen. 
Modulus-CLI enthält sehr hilfreiche Befehle, die im Implementierungs- und Laufzeitabschnitt verwendet werden können. Sie können beispielsweise Protokolle Ihres laufenden Projekts mit beenden Modul-Protokoll protokolliert das Ende, Setzen Sie eine Umgebungsvariable mit modul env eingestellt  , usw. Sie können die vollständige Liste der Befehle anzeigen, indem Sie verwenden modul helfen. 
Fazit
Wenn Sie eine PHP-Webanwendung erstellen, müssen Sie zwangsläufig Webserver wie Apache von NGINX einsetzen. Wenn Sie jedoch Modulus verwenden, können Sie sich einfach auf Ihr PHP-Projekt konzentrieren. Mit Modulus können Sie Ihre Webserverkonfiguration so in Ihr Projekt einfügen, dass sie bei der Bereitstellung des Codes wirksam wird. 
In diesem Tutorial konzentrierten wir uns auf die Echtzeit-Chat-Anwendung und stellten fest, dass die anderen Aspekte der Anwendung dank Modulus sehr einfach zu handhaben waren.



		
			
	   
	




Code