Aufbau einer Vue-Chat-Anwendung: Verwendung von Sendbirds UIKit in einer Vue.js-Anwendung

Der Aufbau eines Chats ist ein komplexes Unterfangen. Ganz gleich, ob Sie für das Gesundheitswesen , Spiele , On-Demand-Dienste oder eine andere Branche entwickeln, das Erstellen eines funktionsreichen Chats erfordert Mühe. Es ist auch wichtig, den richtigen Tech-Stack zu wählen; In diesem Tutorial erfahren Sie, wie Sie Chats mit Vue.js erstellen , einem beliebten Front-End-JavaScript-Webframework zum Erstellen von Benutzeroberflächen und kleinen Anwendungen. Sie erfahren auch, wie Sie das UIKit von Sendbird , eine funktionsreiche Reihe von Chat-UI - Komponenten, in Ihrer Vue-Chat-App verwenden.

Es kann vorkommen, dass Sie Komponenten, die in einem anderen Front-End-Framework geschrieben wurden, für Ihre App rendern möchten. zum Beispiel, wenn Sie ein Projekt zwischen Frontend-Frameworks migrieren oder eine Bibliothek eines Drittanbieters (z. B. vuetify) verwenden, die nicht auf das Framework Ihrer Wahl portiert wurde. In diesen Fällen steht eine Reihe von Brückenbibliotheken zur Verfügung. Beispielsweise ist es möglich, Angular - Komponenten in React - Apps mit angle2react oder Vue - Komponenten in einem Svelte - Projekt mit svelte-adapter zu rendern . Für dieses Tutorial werden wir Veuary verwenden , um die Welten von React und Vue zu überbrücken.

Wir empfehlen, sich dieses Video-Tutorial darüber anzusehen, wie man eine Vue-Chat-App mit dem UIKit von Sendbird erstellt.

Voraussetzungen

Um Ihre Vue-Chat-App zu erstellen, benötigen Sie node.js und eine Sendbird-Anwendungs-ID. Falls noch nicht geschehen, können Sie im Dashboard ein Sendbird-Konto einrichten und eine Bewerbung erstellen .

Sie finden Ihre Anwendungs-ID im Sendbird-Dashboard.

Was wir bauen werden: Wie Ihre Vue-Chat-App aussehen soll

In diesem Tutorial erstellen wir eine Vue-Chat-App mit einer ähnlichen UX wie WhatsApp für den Desktop. Der endgültige Projektcode ist auf GitHub verfügbar, und wir empfehlen Ihnen auch, sich die Live-Demo anzusehen .

Unser Projekt wird mit Vue 3 erstellt und die App wird eine voll funktionsfähige Version von Sendbirds React UIKit in der Haupt-Chat-App von Vue rendern. Die Vue-App übergibt Konfigurationen an das UIKit und UIKit leitet auch Benutzerinformationen an Vue zurück. Diese bidirektionale Kommunikation ermöglicht es uns, den Namen eines Sendbird-Benutzers und die Anzahl der ungelesenen Nachrichten in der Kopfzeile unserer Vue-App anzuzeigen. Das Ergebnis wird so aussehen.

Einrichten Ihrer Vue-Chat-App

Vue verfügt über ein praktisches Befehlszeilentool zum schnellen Erstellen von Gerüsten für Anwendungen. Führen Sie einfach das Folgende aus, wo immer Sie Ihr Projekt haben möchten.

Dieser Befehl führt Sie durch die Optionen beim Erstellen eines neuen Projekts. Die für dieses Tutorial verwendeten Einstellungen sind unten aufgeführt.

Führen Sie die folgenden Befehle aus, um die App im Entwicklermodus zu starten.

Sie sollten jetzt eine glänzende neue Zielseite sehen, wenn Sie http://localhost:5173 aufrufen und besuchen . So sollte es aussehen:

Installieren und konfigurieren Sie Veaury

Veaury ist eine Bibliothek, die das Rendern von React-Komponenten in Vue-Apps ermöglicht. Es ist erwähnenswert, dass Vue-Komponenten in React-Apps ebenfalls unterstützt werden, aber nicht Gegenstand dieses Tutorials sind. Veaury funktioniert sowohl mit Vue 3 als auch mit Vue 2, und die Bibliothek kann mit dem folgenden Befehl von npm installiert werden:

Damit unsere neu erstellte Vue-Chat-App React-Komponenten importieren und rendern kann, müssen Sie eine kleine Änderung an der Build-Konfiguration vornehmen. Daher müssen wir die Datei vite.config.js in unserem Projekt aktualisieren, um das Veaury-Plugin zu verwenden.

Nach dieser Konfigurationsänderung können Sie alle gewünschten React-Komponenten zu einem Verzeichnis namens „react_app“ hinzufügen. Diese React-Komponenten können dann in .vue-Dateien importiert und in Standard-Vue-Komponenten gerendert werden.

Erstellen einer React-Komponente in unserem Vue-Projekt

Zuerst müssen Sie eine neue React-Komponente in „react_app“ erstellen. Diese Komponente ist für das Importieren, Konfigurieren und Rendern von UIKit verantwortlich.

Sie müssen an dieser React-Komponente nichts Besonderes tun, damit sie gut mit Vue zusammenspielt. Der Code hier macht Folgendes:

1. Importiert Sendbird UIKit-Abhängigkeiten
2. Initialisiert UIKit mit einer App-ID und einer Benutzer-ID
3. Verwendet mit Sendbird HOC für den Zugriff auf das Sendbird SDK. Dadurch erhalten wir Zugriff auf die Benutzerinformationen, die für die Rückgabe an die Vue-App erforderlich sind

Es ist erwähnenswert, dass die Requisiten, die an ChatReactComponent übergeben werden, von einer übergeordneten Vue-Komponente übergeben werden. Das Übergeben von Requisiten hier ist der Weg, um die React-Seite der Dinge dazu zu bringen, mit Vue zu kommunizieren. Wie Sie diese Eigenschaften definieren und übergeben, erfahren Sie im nächsten Abschnitt.

UIKit zur Seite hinzufügen

Fügen Sie als Nächstes die ChatReactComponent zu Ihrer Vue-Chat-App hinzu. Die Seite, die aktualisiert werden muss, ist views/HomeView.vue. Entfernen Sie den gesamten Code, der sich derzeit in views/HomeView.vue befindet, und fügen Sie den folgenden Code ein.

Dieser Code bewirkt Folgendes:

1. Importiert Veaury und unsere neue React-Chat-Komponente
2. Konvertiert unsere React-Komponente mithilfe der Funktion applyPureReactInVue von Veaury in eine Vue-Komponente
3. Stellen Sie in der Setup-Funktion die Daten und Rückrufe so ein, dass sie als Requisiten an unsere React-Komponente übergeben werden
4. Definieren Sie unser HTML, um einen Top-Header zu rendern. Der Header enthält den Benutzernamen und die Anzahl der ungelesenen Nachrichten. Diese Daten werden in einem späteren Schritt dieses Tutorials von UIKit zurückgegeben
5. Rendern Sie die React-Chat-Komponente im HTML-Code und übergeben Sie die zuvor definierten Daten und Rückrufe als Attribute für das Chat-Element
6. Fügen Sie schließlich etwas Styling hinzu, damit alles schön aussieht

Sie sehen jetzt das UIKit-Rendering im Browser, wenn Sie http://localhost:5173 besuchen . So sollte es aussehen:

Übergeben Sie Benutzerinformationen an Vue

Schließlich werden die Benutzerinformationen und die Anzahl der ungelesenen Nachrichten an Ihre Vue-Chat-App zurückgegeben, damit diese diese Informationen in der oberen Kopfleiste der Anwendung anzeigen kann. Auf diese Informationen wird über das Sendbird SDK zugegriffen. Um über UIKit auf das SDK zuzugreifen, können Sie eine hilfreiche Funktion namens getSdk verwenden. Wenn Sie diese Funktion wie unten gezeigt aufrufen, erhalten Sie das zugrunde liegende SDK. Sie können dann auf die relevanten Methoden zugreifen, um das zu erhalten, was benötigt wird (Anzahl ungelesener Nachrichten und Benutzerinformationen), und diese Informationen mithilfe der als Requisiten übergebenen Rückrufe (setUnreadMessageCount und setSbUserInfo) an Vue zurückgeben.

Die obere Leiste der App zeigt jetzt einen sichtbaren Benutzernamen und die Anzahl der Nachrichten an. Beachten Sie den Benutzernamen „Bob“ und die Anzahl der ungelesenen Nachrichten von 1 im folgenden Screenshot.

Fazit

Glückwünsche! Sie haben jetzt Sendbird UIKit in Ihrer Vue-App ausgeführt. In diesem Tutorial haben wir darüber gesprochen, wie Sie eine Vue-Chat-App mit den funktionsreichen, vorgefertigten Designkomponenten von Sendbird UIKit erstellen können. Jetzt können Sie problemlos Gruppen erstellen und mit dem Chatten beginnen!

Denken Sie daran, dass Daten zwischen dem Vue- und dem React-Code in beide Richtungen fließen; Ein vernünftiger nächster Schritt wäre, zu versuchen, verschiedene Arten von Eigenschaften an die Chat-Reaktionskomponente zu übergeben und diese Eigenschaften zu verwenden, um UIKit auf alternative Weise zu konfigurieren, z. B. durch Festlegen der UIKit-Designfarben.

Wenn Sie Hilfe mit Sendbird Chat oder dem UIKit benötigen, lesen Sie bitte unsere Dokumentation für Chat und Dokumentation für UIKit ! Sie finden Anleitungen zum Einrichten und Ausführen von Chats in Ihrer App mit umfangreichen vorgefertigten UI-Komponenten. Antworten finden Sie auch in der Sendbird Community , einem Forum, in dem Sie Fragen rund um Sendbird stellen und beantworten können . Bitte zögern Sie nicht, uns zu kontaktieren, wenn Sie Hilfe benötigen – unsere Experten helfen Ihnen gerne weiter. Fröhliches Chat-Gebäude! 💻