Technik

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

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

Gebäude
Chat
ist ein komplexes Unterfangen. Ob Sie nun für
Gesundheitswesen
,
Spiele
,
Dienste auf Abruf
Wie in jeder anderen Branche auch, ist der Aufbau eines funktionsreichen Chats mit viel Aufwand verbunden. Es ist auch wichtig, den richtigen Tech-Stack zu wählen; in diesem Tutorial werden wir untersuchen, wie man einen Chat mit Vue.jsein beliebtes Front-End-JavaScript-Web-Framework zur Erstellung von Benutzeroberflächen und kleinen Anwendungen. Sie werden auch lernen, wie Sie Sendbirds
UIKit
ein funktionsreicher Satz von
Chat-UI
Komponenten, innerhalb Ihrer Vue-Chat-App.

Es kann vorkommen, dass Sie Komponenten, die in einem anderen Frontend-Framework geschrieben wurden, in Ihrer Anwendung rendern möchten, z. B. 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. Für diese Fälle gibt es eine Reihe von Überbrückungsbibliotheken. Es ist zum Beispiel möglich, Folgendes zu rendern Eckig Komponenten in Reagieren Sie Anwendungen mit angular2react oder Vue Komponenten in einem Gertenschlank Projekt mit svelte-adapter. Für dieses Tutorial werden wir Folgendes verwenden
Veuary
um die Welten von React und Vue zu verbinden.

Voraussetzungen

Um mit der Erstellung Ihrer Vue-Chat-App zu beginnen, benötigen Sie
node.js
installiert und eine Sendbird-Anwendungs-ID. Wenn Sie es noch nicht getan haben, können Sie
ein Sendbird-Konto einrichten
und erstellen Sie eine Anwendung im
Dashboard
.

Sie können Ihre Anwendungs-ID im Sendbird-Dashboard finden.

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

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

Unser Projekt wird mit Vue 3 erstellt und die App wird eine voll funktionsfähige Version von Sendbirds
React UIKit
innerhalb der Haupt-Chat-App von Vue. Die Vue-App wird Konfigurationen an das UIKit weitergeben und das UIKit wird auch Benutzerinformationen an Vue zurückgeben. Diese Zwei-Wege-Kommunikation ermöglicht es uns, den Namen eines Sendbird-Benutzers und die Anzahl der ungelesenen Nachrichten in der oberen Kopfzeile unserer Vue-App anzuzeigen. Das Ergebnis sieht dann so aus.

Einrichten der Vue-Chat-App

Vue hat ein praktisches Kommandozeilen-Tool, um Anwendungen schnell zu erstellen. Führen Sie einfach folgendes aus, wo immer Sie Ihr Projekt unterbringen möchten.

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

Um die Anwendung im Dev-Modus zu starten, führen Sie die folgenden Befehle aus.

Sie sollten nun eine glänzende neue Landing Page sehen, wenn Sie die Seite
http://localhost:5173
. So sollte es aussehen:

Veaury installieren und konfigurieren

Veaury ist eine Bibliothek, die das Rendern von React-Komponenten innerhalb von Vue-Anwendungen ermöglicht. Es ist erwähnenswert, dass Vue-Komponenten in React-Apps ebenfalls unterstützt werden, aber in diesem Tutorial nicht berücksichtigt werden. Veaury funktioniert sowohl mit Vue 3 als auch mit Vue 2, und die Bibliothek kann von npm mit dem folgenden Befehl 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 beliebige React-Komponenten in ein 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

Zunächst müssen Sie eine neue React-Komponente in react_app erstellen. Diese Komponente ist für den Import, die Konfiguration und das Rendern von UIKit zuständig.

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

  1. Importiert Sendbird UIKit-Abhängigkeiten
  2. Initialisiert UIKit mit einer App-ID und einer Benutzer-ID
  3. Verwendet withSendbird HOC für den Zugriff auf das Sendbird SDK. Dadurch erhalten wir Zugang zu den Benutzerinformationen, die an die Vue-App zurückgegeben werden müssen

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

UIKit zu der Seite hinzufügen

Als nächstes fügen Sie 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 in eine Vue-Komponente unter Verwendung der applyPureReactInVue-Funktion von Veaury
  3. In der Setup-Funktion legen Sie die Daten und Rückrufe fest, die als Requisiten an unsere React-Komponente übergeben werden sollen
  4. Definieren Sie unser HTML, um eine Kopfzeile zu erstellen. Die Kopfzeile enthält den Benutzernamen und die Anzahl der ungelesenen Nachrichten. Diese Daten werden in einem späteren Schritt des Tutorials von UIKit zurückgegeben
  5. Rendering der React Chat-Komponente im HTML-Code, wobei die Daten und Rückrufe, die zuvor als Attribute für das Chat-Element definiert wurden, übergeben werden
  6. Zum Schluss fügen Sie noch etwas Styling hinzu, damit alles schön aussieht

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

Übergabe von Benutzerinformationen an Vue

Schließlich werden die Benutzerinformationen und die Anzahl der ungelesenen Nachrichten an die Vue-Chat-App zurückgegeben, damit diese Informationen in der oberen Kopfzeile der Anwendung angezeigt werden können. Der Zugriff auf diese Informationen erfolgt über das Sendbird SDK. Um auf das SDK von UIKit aus 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 die benötigten Informationen zu erhalten (Anzahl der ungelesenen Nachrichten und Benutzerinformationen) und diese Informationen über die als Requisiten übergebenen Callbacks (setUnreadMessageCount und setSbUserInfo) an Vue zurückgeben.

In der oberen Leiste der App werden jetzt der Benutzername und die Anzahl der Nachrichten angezeigt. Beachten Sie den Benutzernamen „Bob“ und die Anzahl der ungelesenen Nachrichten von 1 im folgenden Screenshot.

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben nun Sendbird UIKit in Ihrer Vue-App laufen. In diesem Tutorial haben wir darüber gesprochen, wie man eine Vue-Chat-App mit Hilfe der funktionsreichen, vorgefertigten Design-Komponenten des Sendbird UIKit erstellen kann. Jetzt können Sie fröhlich Gruppen erstellen und mit dem Chatten beginnen!

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

Wenn Sie Hilfe benötigen mit
Sendbird-Chat
oder dem
UIKit
benötigen, lesen Sie bitte unsere
Dokumentationen für Chat
und
Dokumentationen für UIKit
! Hier finden Sie eine Anleitung, wie Sie den Chat in Ihrer Anwendung mit umfangreichen vorgefertigten UI-Komponenten zum Laufen bringen. Antworten finden Sie auch in der
Sendbird Gemeinschaft
, ein Forum, in dem Sie Fragen zu allen Themen rund um Sendbird stellen und beantworten können
Sendbird
. Bitte zögern Sie nicht Kontaktieren Sie uns wenn Sie Hilfe benötigen – unsere Experten helfen Ihnen gerne weiter. Viel Spaß beim Chatten! 💻

Categories: Technik