Wie man mit dem PubNub Chat SDK Threads und Zitatnachrichten erstellt

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 bereit, 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

Erstellen von Threads und Zitatnachrichten

Einer der Gründe, warum wir das PubNub Chat SDK eingeführt haben, war das Feedback, das wir von Chat-Entwicklern erhalten haben, die unsere traditionellen SDKs verwenden. Obwohl jedes unserer PubNub SDKs den Austausch von Echtzeit-Nachrichten zwischen Benutzern vereinfacht, haben wir festgestellt, dass viele Entwickler die gleichen Chat-Funktionen implementieren müssen, die die Benutzer erwarten, wie z. B. das Organisieren von Nachrichten in Threads, das Zitieren einer vorherigen Nachricht oder das Markieren anderer Benutzer. Mit dem PubNub Chat SDK haben wir diese Standard-Chat-Funktionen aufgegriffen und APIs zur Verfügung gestellt, die es Ihnen erleichtern, sie in Ihre eigene Anwendung zu implementieren.

Voraussetzungen

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 Threads und Zitate benötigen Sie nicht mehr als den Standardveröffentlichungsschlüssel, den Abonnementschlüssel 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.

Nachrichten-Threads

Die Dokumentation für Message-Threads befindet sich unter der Message-Dokumentation und erklärt einige der Implementierungsdetails; im Wesentlichen benötigt jeder Message-Thread seinen eigenen PubNub-Kanal, um die Kommunikation abzuwickeln, aber diese Implementierung ist für Sie verborgen, wenn Sie das Chat-SDK verwenden.

Ausgehend von einer bestehenden Stammnachricht können Sie mit der createThread()-API einen Thread aus dieser Nachricht erstellen. Da man nur einen einzigen Thread für eine Nachricht haben kann, ist es am besten zu prüfen, ob bereits ein Thread existiert, bevor man einen neuen mit der hasThread() API erstellt

if (!rootMessage.hasThread)
{
  threadChannel = await rootMessage.createThread()
}

createThread() gibt ein ThreadChannel-Objekt mit ähnlichen Methoden wie Channel zurück. Wenn Sie zum Beispiel den gesamten Verlauf einer Konversation mit Threads lesen wollen, könnte der Pseudocode wie folgt aussehen:

FOREACH message in Channel
  message.getHistory()
  IF (message.hasThread() THEN
    threadChannel = message.getThread()
    threadChannel.getHistory()
  END IF
END FOREACH

Mit der sendText()-API können Sie Textnachrichten in einem Thread-Channel auf die gleiche Weise senden wie in einem Standard-Channel

const threadChannel = rootMessage.getThread()
threadChannel.sendText(“hello”)

Nachrichten zitieren

Das Zitieren einer Nachricht ist ein Beispiel für eine unserer Chat-SDK-Funktionen, die einen gewissen Kontext über die gesendete Nachricht liefert, den der Empfänger interpretieren kann. Die Möglichkeit, sendText() wie im vorherigen Beispiel zu verwenden, ist sehr gut, aber was ist, wenn Sie Ihrer Nachricht eine Datei beifügen möchten? Was ist, wenn Sie Benutzer oder Kanäle in Ihrer Nachricht markieren wollen? Oder, was für diesen Leitfaden am wichtigsten ist, was ist, wenn Sie eine vorherige Nachricht in der aktuellen Nachricht zitieren wollen? All diese Szenarien werden mit einem MessageDraft gehandhabt.

Ein MessageDraft ist ein grundlegender Typ im Chat SDK und wird von den meisten Chat-Implementierungen verwendet, um Ihren Benutzern ein funktionsreiches Erlebnis zu bieten. Sie müssen jedes Mal, wenn eine neue Chat-Nachricht verfasst wird, ein neues MessageDraft-Objekt erstellen und können dann die addQuote()-API aufrufen, um auf eine vorherige Nachricht zu verweisen.

Der MessageDraft wird in der Anleitung zur Erwähnung von Benutzern und Kanälen ausführlicher behandelt, aber in der Zusammenfassung würden Sie:

Deklarieren Sie eine Variable, die den Nachrichtenentwurf enthält.

 const [newMessageDraft, setNewMessageDraft] = useState<MessageDraft>()

Als Teil der Chat-Initialisierung und nach dem Versenden einer Nachricht einen neuen MessageDraft initialisieren

setNewMessageDraft(threadChannel.createMessageDraft())

Wann immer sich Ihr Eingabetext ändert (z. B. wenn der Benutzer etwas eingibt), benachrichtigen Sie den Nachrichtenentwurf.

//  Note: Within the onChange() handler for the input field 
const response = await newMessageDraft.onChange(event.currentTarget.value)

Fügen Sie als Antwort auf eine Benutzeraktion eine frühere Nachricht als Zitat ein

newMessageDraft.addQuote(message)

Senden Sie die Nachricht bei Bedarf

newMessageDraft.send()

Dies ist leichter zu verstehen, wenn Sie es in einer funktionierenden Demo sehen...

Das Ganze zusammenfügen

Ein sehr einfaches Beispiel für Nachrichten-Threads und das Zitieren von Nachrichten sehen Sie in der kurzen Demo unten:

Dies ist eine echte, live funktionierende Demo, also können Sie die Demo in mehreren Tabs starten, um zu sehen, wie Nachrichten in Echtzeit empfangen werden. Da es sich um eine gemeinsam genutzte Anwendung handelt, können Sie mit der Funktion "App-Status zurücksetzen" eine leere Tafel zum Spielen verwenden.

Interaktive Demo

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

Der Code, der diese Demo steuert, ist auf GitHub verfügbar, aber hier sind einige Auszüge aus dem entsprechenden Code in der App, die zeigen, wie er zusammenpasst:

//  Input field onChange handler
async function handleInput(event: React.FormEvent<HTMLInputElement>)
{
  //  No special rendering for Message Draft with this app
  if (!newMessageDraft) return
  const response = await newMessageDraft.onChange(event.currentTarget.value)
}

Die Logik zum Absenden einer Nachricht. Diese Demo ist so programmiert, dass sie immer auf den Thread-Kanal antwortet

async function handleSend(event: React.SyntheticEvent) {
  newMessageDraft.send()
  setNewMessageDraft(threadChannel.createMessageDraft())
  setQuotedMessagePreview("")
  setText("")
}

Der Benutzer drückt die Schaltfläche "Nachricht zitieren".

async function handleQuoteMessage(message: Message)
{
  if (!newMessageDraft) return;
  setQuotedMessagePreview(message.text)
  newMessageDraft.addQuote(message)
}

Denken Sie daran, dass Sie eine Nachricht aus einem anderen Kanal nicht zitieren können, daher erlaubt die Demo nur das Zitieren von Nachrichten aus demselben Thread.

Demo: Erstellen von Threads und Zitieren von Nachrichten mit unserer React Native Demo auf Mobile

Sie können diese Funktionen mit unserer Chat-SDK-Demo für Mobilgeräte ausprobieren, die als gehostete Demo mit vollständigem Quellcode auf GitHub verfügbar ist. Sie sollten die Demo auch in einem iFrame unten in diesem Abschnitt gerendert sehen.

Folgen Sie diesen Schritten, um einen Thread zu erstellen und eine Nachricht in unserer Demo zu zitieren:

1. Melden Sie sich bei der Anwendung an und wählen Sie eine zufällige Benutzer-ID für jedes Gerät.
2. Starten Sie eine Unterhaltung vom zweiten Gerät aus, indem Sie den am ersten Gerät angemeldeten Benutzer auswählen.
3. Fügen Sie einige Nachrichten zu der Unterhaltung hinzu
4. Drücken Sie lange auf eine der Nachrichten.
5. Wählen Sie "Im Thread antworten" und senden Sie eine Antwort
6. Drücken Sie lange auf eine der Nachrichten (es könnte auch die Antwort sein, die Sie gerade gesendet haben)
7. Wählen Sie "Nachricht zitieren".
8. Senden Sie eine Nachricht mit diesem zitierten Text
9. 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