Einführung in das PubNub Chat SDK

Das PubNub Chat SDK, das für TypeScript- und JavaScript-Anwendungen verfügbar ist, stellt eine Reihe von APIs zur Verfügung, mit denen Sie Ihrer Anwendung mit minimalem Entwicklungsaufwand leistungsstarke und flexible Chat-Funktionen hinzufügen können. Chat-Optionen wie Zitieren, Erwähnen von Nutzern, Channel-Referenzen, Threads, Lesebestätigungen und Tippindikatoren werden vom SDK nativ unterstützt, so dass Sie schnell eine vollwertige App erstellen können.

Bitte lesen Sie unsere Dokumentation und unsere Beispiel-Chat-App, um mit dem Chat-SDK zu beginnen. Unser Tutorial führt Sie durch die grundlegenden Funktionen des Chat SDK und geht auf einige fortgeschrittene Funktionen ein, während unsere gehostete Demo das Chat SDK in Aktion zeigt.

Diese Anleitung ist Teil einer Serie von Beiträgen, die sich mit einigen der leistungsstärkeren Funktionen des PubNub Chat SDK befassen. Die Serie kann in beliebiger Reihenfolge gelesen werden, aber die Liste der zugehörigen Artikel finden Sie unten:

• Wie man die Mitgliedschaft in Benutzerkanälen mit dem Chat SDK verwaltet
• Hinzufügen von Reaktionen und Emojis zu Nachrichten mit dem Chat SDK
• Erstellen von Threads und Zitaten mit dem Chat SDK
• Erwähnung von Benutzern und Channels mit dem Chat SDK

Verwalten von Benutzerkanalmitgliedschaften

Das Chat SDK definiert mehrere Typen, die für das Verständnis der Channel-Mitgliedschaft wichtig sind:

• Benutzer stellen Einzelpersonen dar, die an einer Unterhaltung teilnehmen.
• Channels stellen eine Konversation zwischen mehreren Benutzern dar. In der Dokumentation wird die Analogie verwendet, dass jeder Kanal einen einzelnen "Chatraum" darstellt. Channels können direkt (d. h. eine 1:1-Konversation zwischen nur zwei Benutzern), als "Gruppe" (d. h. zwischen mehreren namentlich genannten Benutzern) oder "öffentlich" sein.
• Mitgliedschaften stellen eine Beziehung zwischen Benutzern und Kanälen mit optionalen begleitenden Metadaten dar.

In diesem Leitfaden wird beschrieben, wie man diese Channel-Mitgliedschaften erstellt und verwaltet.

Wie Benutzer einem Channel beitreten

Es gibt mehrere Möglichkeiten, wie ein Benutzer Mitglied eines Channels werden kann. Wenn direkte oder Gruppen-Channels erstellt werden, werden die Benutzer in dieser Konversation während der Erstellung als Argumente angegeben.

Im folgenden Beispiel, das der Dokumentation entnommen ist, werden die beiden Benutzer "agent-007" und "agent-008" zu Mitgliedern des Channels "group-chat-1".

// reference both agents you want to talk to
const user1 = await chat.getUser("agent-007")
const user2 = await chat.getUser("agent-008")

// add the channel ID, name, and topic
const { channel, hostMembership, inviteeMembership } = await chat.createGroupConversation(
  {
    users: 
    [
      user1,
      user2
    ],
    channelId: "group-chat-1"
    …
  }
)

Sie können auf verschiedene Weise abfragen, ob ein Benutzer Mitglied eines Channels ist, und Sie finden alle Einzelheiten in der Dokumentation zur Channel-Mitgliedschaft. Zum Beispiel, um die Mitglieder des Channels, den wir gerade erstellt haben, zu erhalten:

// reference the "channel" object
const channel = await chat.getChannel("group-chat-1")
const members = await channel.getMembers()
//  members contains both users, so members.total === 2

Wenn Benutzer bei der Erstellung eines Channels nicht diesem zugewiesen werden, können sie später mit den entsprechenden join()- und leave() -Methoden beitreten oder ihn verlassen, wodurch dynamische Channels möglich sind. Benutzer können auch eingeladen werden, Mitglied eines Channels zu werden.

Sie können dieses Verhalten in der kurzen Demo unten sehen. Da es sich um eine funktionierende Live-Demo handelt, bleibt die Channel-Mitgliedschaft auch nach dem Aktualisieren der Seite erhalten.

Interaktive Demo

Wenn der eingebettete Inhalt auf dieser Seite nicht verfügbar ist, kann er auch unter https://chat-sdk-how-to-membership.netlify.app/ angesehen werden.

Der Code, der diese Demo steuert, ist auf GitHub verfügbar, aber die wichtigsten Punkte sind:

Stellen Sie sicher, dass Sie eine Instanz des Chat-Objekts in Ihrer Anwendung instanziiert haben.

const chat = await Chat.init({
  publishKey: "YOUR_PUBLISH_KEY",
  subscribeKey: "YOUR_SUBSCRIBE_KEY",
  userId: "YOUR_USER_ID",
})

Es gibt viele mögliche Parameter, die Sie an das Chat-SDK übergeben können, aber für die Channel-Mitgliedschaft benötigen Sie nicht mehr als die Standardschlüssel für die Veröffentlichung, die Anmeldung und die Benutzer-ID. Wenn das alles neu für Sie ist und Sie nicht wissen, wo Sie anfangen sollen, sehen Sie sich bitte den Abschnitt über die Erstkonfiguration in unserer Dokumentation an.

Einem Kanal beitreten. Dieser Code registriert sich auch, um Mitglieder-Updates zu erhalten, was im nächsten Abschnitt besprochen wird.

async function join(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      const channelMembership = await channel?.join(() => null)
      channelMembership?.membership.streamUpdates(async (membership) => {
        //  Stream updates on the channel as follows
        console.log(membership)
      })

      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

Wie in den Code-Kommentaren oben erwähnt, kann der Aufruf von user.getMemberships() paginierte Daten enthalten, wenn es zu viele Channels gibt.

Der Code für die Schaltflächen zum Verlassen des Channels in der Demo sieht folgendermaßen aus:

async function leave(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      await channel?.leave();
      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

Um die Demo einfach zu halten, gibt es nur einen einzigen Benutzer, und es wird nur die eigene Mitgliedschaft des Benutzers berücksichtigt. In einer realen Anwendung werden Sie mehrere Benutzer haben, jeder mit seiner eigenen Channel-Mitgliedschaft. Eine realistischere Demo ist für unser Chat SDK verfügbar und wird am Ende dieses Leitfadens beschrieben.

Metadaten zur Channel-Mitgliedschaft

Mit dem Membership-Objekt können Sie benutzerdefinierte Metadaten angeben, die sich auf die Assoziation zwischen dem Kanal und dem Benutzer beziehen; wenn es sich beispielsweise um einen Chat im Zusammenhang mit einer Supportanfrage handelt, könnten Sie die Rolle des Benutzers als {Rolle: 'Supporttechniker'} speichern.

Metadaten können bei der Erstellung der Mitgliedschaft deklariert oder zu jedem beliebigen Zeitpunkt vom einzelnen Benutzer aktualisiert werden.

Um zu verfolgen, wann die Metadaten der Mitgliedschaft aktualisiert werden, bietet das Chat SDK die Methoden streamUpdates() und streamUpdatesOn() für das Membership-Objekt.

Wie in der früheren Demo gezeigt, können Sie Änderungen an den Mitgliedschafts-Metadaten wie folgt verfolgen:

channelMembership?.membership.streamUpdates(async (membership) => {
  //  Stream updates on the channel as follows
  console.log(membership)
})

Warum sollten Benutzer einem Kanal beitreten?

Man könnte annehmen, dass Benutzer einem Kanal beitreten müssen, um Nachrichten in diesem Kanal zu empfangen, aber das ist nicht der Fall. Um Nachrichten in einem Kanal zu empfangen, kann man die connect() -Methode aufrufen, in der man einen Callback bereitstellen kann, der aufgerufen wird, wenn eine Nachricht empfangen wird. Wenn Sie bei der Erstellung eines Channels nicht Mitglied dieses Channels waren, müssen Sie connect() separat aufrufen, aber der Aufruf von join() ruft connect() automatisch für Sie auf.

Wenn Sie mit PubNub vertraut sind, ist dieser connect() -Aufruf analog zu subscribe() und addListener().

Warum sollte man also einem Channel beitreten? Das Beitreten eines Channels und die damit verbundenen Channel-Mitgliedschaften sind grundlegend dafür, wie das Chat SDK Benutzerbeziehungen versteht. Daher ist es erforderlich, um viele leistungsfähigere SDK-Funktionen zu nutzen, wie z.B. Lesebestätigungen, Erwähnung von Benutzern, Anzahl ungelesener Nachrichten, Moderation und den Tippindikator.

Zusammenfassung der Mitgliedschaft

• Was ist das? Eine Beziehung zwischen einem Benutzer und einem Channel, mit anpassbaren Metadaten.
• Wie wird eine Mitgliedschaft erstellt? Nutzer können bei der Erstellung eines Channels mit diesem verknüpft werden, oder sie können selbst einem Channel beitreten oder von anderen in einen Channel eingeladen werden, nachdem dieser erstellt worden ist.
• Wie wird eine Mitgliedschaft zerstört? Nutzer können einen Channel jederzeit verlassen.
• Wie wird eine Mitgliedschaft nachverfolgt? Die Mitglieder eines Channels können mit Getter-Funktionen abgefragt werden, und Sie können über Änderungen informiert werden, indem Sie sich für Aktualisierungen registrieren.
• Häufige Fallstricke: Die Mitgliedschaft bedeutet nicht immer, dass Sie Nachrichten in einem Kanal erhalten; lesen Sie die Dokumentation sorgfältig durch, wenn Sie connect() separat aufrufen müssen.
• Gibt es weitere Einschränkungen? Obwohl Sie "öffentlichen" Channels beitreten können, werden einige Funktionen, wie Lesebestätigungen oder der Tippindikator, für diese Art von Channel nicht unterstützt.
• Welche Funktionen sind für das PubNub Keyset erforderlich? Stellen Sie sicher, dass Sie App Context auf Ihrem Keyset aktivieren.

Demo: Benutzerkanal-Mitgliedschaft in Aktion

Unsere Chat-SDK-Demo für Mobile, die als gehostete Demo mit vollständigem Quellcode auf GitHub verfügbar ist, verwendet die Mitgliedschaft zur Verwaltung von Benutzerunterhaltungen. Sie sollten die Demo auch in einem iFrame unten in diesem Abschnitt sehen.

Folgen Sie diesen Schritten, um die in unserer Demo verwendeten Mitgliedschaften zu sehen:

1. Melden Sie sich bei der Anwendung an und wählen Sie eine zufällige Benutzerkennung für jedes der beiden Geräte.
2. Erstellen Sie eine Gruppe, indem Sie auf das Symbol "Neuer Chat" klicken und dann "Gruppenchat erstellen" auswählen.
3. Wählen Sie die beiden Benutzerkennungen, mit denen Sie sich gerade angemeldet haben, und vergeben Sie einen Namen für die Gruppe.
4. Hinter den Kulissen hat die Anwendung eine Mitgliedschaft erstellt, um jeden der beiden Benutzer mit der neu erstellten Gruppe zu verknüpfen.
5. Rufen Sie die Gruppenkonversation auf, indem Sie auf die Entität klicken, die unter dem Abschnitt "Gruppen" erstellt wurde.
6. Tippen Sie auf den Namen der Gruppe am oberen Rand des Bildschirms, um die Chat-Einstellungen Ihres Benutzers zu sehen (wie in der linken Abbildung oben dargestellt)
7. Beachten Sie, dass der Name dieses Benutzers ein "Mitglied" des Chats ist.
8. Beachten Sie, dass die Reaktionen erhalten bleiben und aus dem Nachrichtenverlauf gelesen werden, wenn Sie die Konversation verlassen oder sich sogar aus der App aus- und wieder einloggen.

Wenn der eingebettete Inhalt auf dieser Seite nicht verfügbar ist, kann er auch unter https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/ eingesehen werden.

Wie kann PubNub Ihnen helfen?

Dieser Artikel wurde ursprünglich auf PubNub.com veröffentlicht.

Unsere Plattform hilft Entwicklern bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben

Sehen Sie sich die Live Tour an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten

Melden Sie sich für einen PubNub-Account an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie

Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK