Wie man eine Angular-Chat-App erstellt

Einführung

In diesem Tutorial wird erläutert, wie Sie mit Angular eine Chat-App erstellen. Am Ende dieses Tutorials haben Sie Ihre eigene Chat-App erstellt, mit der Sie Nachrichten senden und empfangen können.

Wir beginnen mit einigen Voraussetzungen und erstellen ein Projekt in Stackblitz. Anschließend besprechen wir, wie der Angular-Dienst erstellt wird. Anschließend erstellen wir eine Vorlage in HTML und codieren dann die Komponenten.

Für dieses Tutorial verwenden wir die Stackblitz IDE. Wir empfehlen Ihnen dringend, sich den endgültigen Code anzusehen. Natürlich können Sie mit angular-cli ein reguläres Angular-Projekt erstellen und es mit einer beliebigen IDE Ihrer Wahl codieren. Wir werden es aus Gründen der Geschwindigkeit und Einfachheit online halten.

Lass uns anfangen! 💻

Voraussetzungen

Um dieses Tutorial optimal nutzen zu können, sollten Sie über grundlegende Kenntnisse der folgenden Punkte verfügen:

• HTML
• JavaScript
• Typoskript

Schritt 1: Ein leeres Projekt erstellen

Beginnen Sie mit der Erstellung eines neuen Projekts. Stackblitz bietet eine große Auswahl an Frameworks und Bibliotheken, mit denen Sie arbeiten können. Als neuen Projekttyp wählen wir Angular mit TypeScript-Unterstützung.

Sobald das Projekt erstellt ist, müssen Sie Sendbird als Abhängigkeit einschließen.

Dieses Tutorial funktioniert mit Sendbird SDK Version 3.

Schritt 2: Den Angular-Service erstellen

Um den Code organisiert zu halten, schreiben wir alle Sendbird-Funktionen in einen Angular-Dienst.

Erstellen wir hierfür zunächst einen neuen Ordner.

2.1: Erstellen Sie eine neue TypeScript-Datei

Angular funktioniert mit TypeScript. Wir erstellen eine neue leere Datei und nennen sie chat.service.ts.

Sie können einen beliebigen Namen verwenden.

2.2: Sendbird importieren

Öffnen Sie die soeben erstellte Datei und fügen Sie den folgenden Code hinzu.

Die erste Zeile wird vom Dienst verwendet.

Die zweite Zeile importiert den gesamten Sendbird SDK-Code in unseren Dienst.

2.3: Initialisieren Sie Sendbird mit Ihrer Anwendungs-ID

Um das SDK zu initialisieren, müssen Sie eine Anwendungs-ID definieren (APP_ID). Sie können diesen Wert über das Sendbird-Dashboard erhalten. Wir bieten kostenlose Testversionen und dauerhaft kostenlose Entwicklerkonten für kleinere Projekte und Testzwecke. Um auf Ihr Dashboard zuzugreifen, erstellen Sie Ihr Konto.

2.4: Fügen Sie eine Funktion hinzu, um Ihren Benutzer mit dem Chat zu verbinden

Nach der Initialisierung müssen Sie einen Benutzer mit dem WebSocket-Server von Sendbird verbinden, um Nachrichten zu senden und zu empfangen. Sendbird WebSocket führt weitere Funktionen aus, wie das Erstellen von Kanälen und den Empfang aller Arten von Ereignissen.

Beachten Sie, dass das Sendbird SDK auch im Offline-Modus funktioniert. Das bedeutet, dass Sie Ihre Anwendung ohne Verbindung starten und alle automatisch auf dem Gerät zwischengespeicherten Informationen anzeigen können. Weitere Informationen zum lokalen Caching finden Sie in unseren Dokumenten.

Jetzt fügen wir die Funktion Verbinden hinzu:

Die Funktion connect akzeptiert die folgenden Parameter:

• userId: Dies ist ein alphanumerischer Wert ohne Leerzeichen. Nach der Erstellung werden Benutzer in einer Liste im Sendbird-Dashboard angezeigt.
• Zugriffstoken: Sobald Sie die Sicherheit für Ihre Anmeldung aktiviert haben, müssen Sie ein Sitzungstoken für diesen Benutzer generieren. Lesen Sie alles darüber hier.

Wenn die Verbindung erfolgreich ist, ist der Fehler-Wert null und das Objekt Benutzer enthält alle Informationen über Ihren angemeldeten Benutzer.

2.5: Nützliche Funktionen

Das Sendbird SDK bietet alle nützlichen Funktionen, die Sie für Ihre Anwendung benötigen. Wir werden hier zwei davon hinzufügen: isConnected() und getConnectedUser().

Diese beiden prüfen, ob ein verbundener Benutzer vorhanden ist, und geben jederzeit die Informationen des verbundenen Benutzers zurück.

2.6: Event-Handler

In einer Chat-Konversation passieren mehrere Ereignisse. Einige von ihnen sind:

• Wir sind zu Gesprächen eingeladen (Gruppenkanäle)
• Andere Benutzer werden zu denselben Kanälen eingeladen, denen wir angehören
• Wir empfangen Nachrichten im Kanal
• Ein oder mehrere Mitglieder eines Kanals geben gerade eine Nachricht ein
• Ein Benutzer verlässt einen Kanal

Bei jedem dieser Chat-Ereignisse benachrichtigt uns das Sendbird SDK, damit wir entsprechend reagieren können. Im Folgenden finden Sie eine Liste der verfügbaren Funktionen:

It’s up to you to apply your own logic to some or all these functions.

In diesem Tutorial werden wir nur eine davon implementieren: onMessageReceived.

Diese Funktion wird automatisch aufgerufen, wenn ein Mitglied eines unserer Gruppenkanäle eine Nachricht sendet. Die Parameter, die wir erhalten, sind:

• Kanal: Der Kanal, an den die Nachricht gesendet wurde
• Nachricht: Die Details der an den Kanal gesendeten Nachricht

Was wir tun müssen, ist, die Funktion Rückruf mit den Informationen aufzurufen, die wir an unsere Anwendung senden möchten.

2.7: Gruppenkanäle erstellen

Die Funktion createGroupChannel verwendet das Sendbird SDK, um einen Gruppenkanal zu erstellen. Ein Kanal ist der Ort, an dem ein Gespräch stattfindet. Sendbird unterstützt viele verschiedene Kanaltypen; Lesen Sie alles darüber in den Dokumenten.

Alle verfügbaren Parameter werden hier erklärt. Weitere Informationen zum Sendbird Chat SDK für Javascript finden Sie in unseren Dokumenten.

2.8: Meine Gruppenkanäle abrufen

In unserem Dienst benötigen wir außerdem eine Funktion zum Abrufen der von uns erstellten Gruppenkanäle und derjenigen, zu denen wir eingeladen werden.

Lesen Sie hier mehr über den Erhalt von Gruppenkanälen mit dem Sendbird Chat SDK.

2.9: Nachrichten von einem Kanal abrufen

Gespräche finden innerhalb eines Kanals statt; Es ist wichtig, diese Nachrichten zu erhalten und sie unseren Benutzern anzuzeigen, wenn ein Kanal ausgewählt wird.

Sendbird bietet mehrere Filter und Sortieroptionen zum Auflisten Ihrer Nachrichten. Lesen Sie alles darüber hier.

2.10: Eine Nachricht senden

Die letzte Funktion in unserem Dienst wird verwendet, um Nachrichten an einen Kanal zu senden. Sobald wir eine Nachricht an einen Kanal senden, können alle Mitglieder sie lesen.

Sendbird verfügt über drei Arten von Nachrichten:

• Benutzernachrichten
• Dateinachrichten
• Admin-Nachrichten

Lesen Sie mehr über Nachrichtentypen in den Dokumenten.

Eine Nachricht besteht nicht nur aus Text; Sendbird stellt mehrere Attribute für das Nachrichtenobjekt bereit, denen Sie zusätzliche Informationen hinzufügen können (einige davon sind: DATA, META ARRAY und CUSTOM TYPE).

Mithilfe dieser Metadaten können Sie ein komplexes Kommunikationssystem zwischen zwei oder mehr Benutzern implementieren. Sie können über den rein textbasierten Chat hinausdenken!

Lesen Sie hier alles über das Versenden von Nachrichten.

Unser Service ist bereit!

Jetzt haben wir die Grundfunktionalität für die Verwaltung von Kanälen und Nachrichten erstellt. Der nächste Schritt besteht darin, zu unserer Komponente zu wechseln und einen Bildschirm zu erstellen, um unseren Benutzern die Informationen anzuzeigen.

Schritt 3: Das Template

Angular verwendet Komponenten, um alle Informationen auf dem Bildschirm anzuzeigen. Komponenten bestehen aus einer Vorlage (geschrieben in einer HTML-Datei) und einer Klasse (geschrieben in TypeScript). Beginnen wir mit der Vorlage.

3.1: Zum Chat verbinden

Fügen Sie eine Schaltfläche hinzu, die die Funktion connect() aus unserer Klassenkomponente heraus aufruft. Tippen oder klicken Sie auf diese Schaltfläche, um eine Verbindung zum Chat herzustellen.

Beachten Sie, dass diese Funktion connect() noch nicht erstellt wurde. In Schritt 4.2 erklären wir, wie die Funktion connect() codiert wird. Konzentrieren wir uns zunächst auf die Erstellung der Vorlage.

Ihre Vorlage sollte nun so aussehen:

Führen Sie die Anwendung aus, um die Schaltfläche live zu sehen.

3.2: Beginnen Sie ein Gespräch

Sobald die Verbindung hergestellt ist, können Sie Konversationen (oder Kanäle) erstellen. Fügen wir eine weitere Schaltfläche hinzu, um unseren ersten Gruppenkanal mit dem Namen „angular-tutorial“ zu erstellen.

So sollte es aussehen, wenn Sie es ausführen.

Wir werden in Kürze die Funktionen programmieren, die auf diese neuen Schaltflächen reagieren. Fügen wir zunächst weiteren HTML-Code hinzu, der es Ihnen ermöglicht, Ihre Kanäle (oder Konversationen) anzuzeigen.

*ngFor ist eine Angular-Direktive, die verwendet wird, um das Array conversations zu durchlaufen und jedes davon anzuzeigen Kanalnamen.

Sobald Sie Kanäle erstellt haben, werden diese in der Vorlage folgendermaßen angezeigt. Über die Schaltfläche Nachrichten abrufen werden die Nachrichten des Kanals angezeigt.

Lassen Sie uns nun verstehen, wie Sie Gruppenkanäle erstellen und in dieser Liste anzeigen.

3.3: An den Kanal gesendete Nachrichten auflisten

Nachrichten leben innerhalb eines Gruppenkanals (android-tutorial für dieses Beispiel). Wir werden die Direktive *ngFor erneut verwenden, aber dieses Mal werden wir die Nachrichten in einer Schleife durchlaufen Objekt.

3.4: Eine neue Nachricht senden

Der folgende Code zeigt ein Eingabefeld zur Eingabe eines Textes. Außerdem fügen wir an der Seite eine Schaltfläche hinzu, um die Funktion zum Senden der Nachricht auszuführen.

So werden schließlich alle Komponenten auf dem Bildschirm angezeigt:

Schritt 4: Programmierung der Komponente – Klassenvariablen

Sobald die Vorlage fertig ist, müssen wir die Komponentenklasse mit TypeScript codieren.

Beginnen wir mit den Klassenvariablen. Hier ist eine Übersicht mit allen Variablen, die Sie benötigen.

Nachfolgend finden Sie eine Erläuterung der einzelnen Variablen. Wenn Sie die Erklärungen nicht durchgehen möchten, können Sie gerne mit dem nächsten Abschnitt fortfahren.

connected = false;

connected ist ein boolesches Objekt, das es der gesamten Komponente ermöglicht, zu definieren, ob das SDK verbunden ist oder nicht.

startConversationResult: string;

Diese Zeichenfolge zeigt alle Fehler an, wenn versucht wird, einen Gruppenkanal zu erstellen.

conversations: Array<SendBird.GroupChannel> | null;

listConversationsResult: string | null;

Gespräche enthält eine Liste unserer Gruppenkanäle.

listConversationsResult zeigt jede Fehlermeldung an, wenn versucht wird, die Liste der Gruppenkanäle abzurufen.

selectedChannel: SendBird.GroupChannel | null;

selectedChannel wird ausgefüllt, wenn ein Benutzer auf einen Kanal klickt, um dessen Nachrichten anzuzeigen.

messages: Array<

   SendBird.UserMessage | SendBird.FileMessage | SendBird.AdminMessage

> | null;

messages ist ein Array von Nachrichten innerhalb des ausgewählten Kanals.

textMessage: any;

Wir verwenden textMessage, um den Text zu speichern, der an den Kanal gesendet werden soll.

4.1: OnInit implementieren

Das Hinzufügen der Angular-Schnittstelle OnInit ermöglicht es uns, Code auszuführen, wenn die Komponente initialisiert wird.

Wir werden es verwenden, um unseren Dienst aufzurufen und das Sendbird SDK zu initialisieren.

4.2: Mit Sendbird verbinden

Sobald das SDK initialisiert ist, können wir einen Benutzer verbinden. Der Wert in userId wird gesendet (zusammen mit einem optionalen Sitzungs- oder Zugriffstoken). Wenn Sie mehr über Benutzer und Verbindungen erfahren möchten, lesen Sie bitte unsere Dokumente.

Die für diese Demo ausgewählte Benutzer-ID ist sendbird. Sie können jede beliebige ID verwenden.

Wir senden einen Null-Wert als Sitzungs-/Zugriffstoken, da für diese Demo keine Sicherheit angewendet wird.

Der dritte Parameter ist unser Callback, der uns über einen Fehler oder eine erfolgreiche Anmeldung informiert.

Sobald die Verbindung hergestellt ist, rufen wir zwei Funktionen auf: registerEventHandlers() und getMyConversations(). Lesen Sie weiter, um mehr darüber zu erfahren.

Zuletzt setzen wir die boolesche Variable connected auf true damit die gesamte Komponente über den neuesten Stand informiert ist.

4.3: Event-Handler registrieren

Das Sendbird SDK informiert unsere Anwendung über verschiedene Ereignisse, die stattfinden, während wir mit dem Websocket verbunden sind.

Ereignishandler erhalten außerdem eine Benachrichtigung, wenn eine Aktivität von der Plattform-API ausgeführt wird.

Jedes Mal, wenn das SDK ein Ereignis empfängt, gibt es es an uns weiter. Das einzige Ereignis, das wir in dieser Demo analysieren, ist onMessageReceived, da wir die Nachricht zur Liste der bereits auf dem Bildschirm angezeigten Nachrichten hinzufügen.

Wir fügen der Liste eine neue Nachricht hinzu, die nur dann eintrifft, wenn alle der folgenden Bedingungen zutreffen:

• Wenn ein ausgewählter Kanal vorhanden ist
• Ob das Ereignis das richtige ist (wir prüfen die Zeichenfolge ‘onMessageReceived’)
• Wenn die ausgewählte Kanal-URL (die eindeutige ID für einen Kanal ist) mit der Kanal-URL des empfangenen Ereignisses übereinstimmt

4.4: Beginnen Sie ein Gespräch

Diese Funktion erstellt einen neuen Gruppenkanal zum Senden und Empfangen von Nachrichten zwischen zwei oder mehr Benutzern.

In diesem Beispiel nennen wir den Kanal android-tutorial.

Das Sendbird SDK definiert automatisch eine Kanal-URL (dies ist die eindeutige ID für jeden Kanal).

Es ist in Ordnung, viele Kanäle mit demselben Namen zu erstellen, da es sich hierbei nicht um eine eindeutige ID handelt.

Für dieses Beispiel laden wir eine Benutzer-ID namens myTestUserId ein. Wir können mehrere Benutzer zum Kanal einladen, wenn wir ihn erstellen. Wir können Mitglieder auch später hinzufügen.

Wenn beim Erstellen eines Kanals ein Fehler auftritt, zeigt die Variable startConversationResult den Fehler auf dem Bildschirm an.

4.5: Holen Sie sich eine Liste der Kanäle

Sobald wir Gruppenkanäle erstellt haben, müssen wir eine Liste der Gruppenkanäle erhalten.

Ein Gruppenkanal enthält mehrere Eigenschaften. Sie können sie hier im Detail sehen.

Wenn ein Fehler auftritt, zeigen wir ihn mithilfe des listConversationsResult-Objekts auf dem Bildschirm an. Wenn die Anfrage korrekt ist, speichern wir die Informationen im Objekt conversations.

4.6: Nachrichten in einem Kanal auflisten

Sobald ein Kanal ausgewählt ist, können Sie eine Liste aller seiner Nachrichten erhalten.

Um die Eigenschaften einer Nachricht anzuzeigen, lesen Sie unsere Dokumentation.

Das Array Nachrichten enthält die Liste der Nachrichten im ausgewählten Kanal.

Auf dem Bildschirm zeigen wir die Eigenschaft Nachricht, aber Sie haben noch andere, mit denen Sie arbeiten können:

• Zeitnachricht wurde erstellt
• Absender der Nachricht
• Metadaten (DATEN, SORTIERTES META-ARRAY und BENUTZERDEFINIERTER TYP)
• Erwähnte Benutzer
• Öffnen Sie grafische Metadaten, wenn eine URL als Teil des Textes geschrieben wurde
• ID der übergeordneten Nachricht
• und viele mehr!

4.7: Eine Nachricht senden

Jetzt wissen wir, wie man Nachrichten empfängt. Wir müssen lernen, wie wir neue Nachrichten an den Kanal senden, damit andere Mitglieder sie sehen können.

Das Senden dieser Nachricht löst ein Ereignis für die anderen verbundenen Mitglieder des Kanals aus.

Dank des Ereignishandlers können sie sehen, dass die neue Nachricht zur Liste hinzugefügt wird.

Schlussfolgerung

Und das ist es! Sie wissen jetzt, wie Sie eine Angular-Chat-App zum Senden und Empfangen von Nachrichten erstellen. Wir haben besprochen, wie man den Angular-Dienst erstellt, die Vorlage erstellt und die Komponenten codiert. Den vollständigen Code für dieses Tutorial finden Sie auf Stackblitz. Wenn Sie Hilfe benötigen, posten Sie wie immer in der Sendbird-Community oder kontaktieren Sie uns direkt. Wir helfen Ihnen gerne weiter!

Fügen Sie jetzt einfach Ihre Sendbird-Anwendungs-ID hinzu und beginnen Sie mit der Erstellung!

Viel Spaß beim Chataufbau! ✌️