Jak tworzyć wątki i cytować wiadomości za pomocą PubNub Chat SDK

Wprowadzenie do PubNub Chat SDK

PubNub Chat SDK, dostępny dla aplikacji TypeScript i JavaScript, udostępnia zestaw interfejsów API zaprojektowanych w celu ułatwienia dodawania potężnych i elastycznych funkcji czatu do aplikacji przy minimalnym rozwoju. Opcje czatu, takie jak cytowanie, wzmianki o użytkownikach, odniesienia do kanałów, wątki, potwierdzenia odczytu i wskaźniki pisania są natywnie obsługiwane przez SDK, co pozwala szybko zbudować pełnoprawną aplikację.

Zapoznaj się z naszą dokumentacją i przykładową aplikacją czatu, aby rozpocząć korzystanie z Chat SDK. Nasz samouczek przeprowadzi Cię przez podstawową funkcjonalność Chat SDK i dotknie niektórych bardziej zaawansowanych funkcji, podczas gdy nasze hostowane demo pokaże Chat SDK w akcji.

Ten poradnik jest częścią serii postów poświęconych niektórym z bardziej zaawansowanych funkcji PubNub Chat SDK. Serię można czytać w dowolnej kolejności, ale lista powiązanych artykułów znajduje się poniżej:

• Jak zarządzać członkostwem w kanałach użytkowników za pomocą Chat SDK
• Jak dodawać reakcje i emotikony do wiadomości za pomocą zestawu Chat SDK
• Jak tworzyć wątki i cytować wiadomości za pomocą Chat SDK
• Jak wspominać użytkowników i kanały za pomocą Chat SDK

Tworzenie wątków i cytowanie wiadomości

Jednym z powodów, dla których wprowadziliśmy PubNub Chat SDK, była reakcja na opinie, które otrzymaliśmy od deweloperów czatów korzystających z naszych tradycyjnych zestawów SDK. Chociaż każdy z naszych pakietów SDK PubNub umożliwia banalną wymianę wiadomości w czasie rzeczywistym między użytkownikami, zauważyliśmy, że wielu programistów potrzebuje zaimplementować te same funkcje czatu, których oczekują użytkownicy, takie jak organizowanie wiadomości w wątki, cytowanie poprzedniej wiadomości lub oznaczanie innych użytkowników. Dzięki PubNub Chat SDK wykorzystaliśmy te standardowe funkcje czatu i udostępniliśmy interfejsy API, aby ułatwić ich implementację we własnej aplikacji; ten przewodnik przeprowadzi Cię przez proces implementacji dwóch pierwszych przykładów, tworzenia wątku wiadomości i cytowania poprzedniej wiadomości.

Wymagania wstępne

Upewnij się, że masz instancję obiektu Chat w swojej aplikacji

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

Istnieje wiele możliwych parametrów, które można przekazać do Chat SDK, ale w przypadku wątków i cytatów nie potrzeba niczego więcej niż standardowy klucz publikowania, klucz subskrypcji i identyfikator użytkownika. Jeśli wszystko to jest dla ciebie nowe i nie wiesz, od czego zacząć, zapoznaj się z sekcją wstępnej konfiguracji w naszej dokumentacji.

Wątki wiadomości

Dokumentacja wątków wiadomości znajduje się w dokumentacji wiadomości i wyjaśnia niektóre szczegóły implementacji; zasadniczo każdy wątek wiadomości wymaga własnego kanału PubNub do obsługi komunikacji, ale ta implementacja jest ukryta przed tobą, jeśli używasz Chat SDK.

Biorąc pod uwagę istniejący komunikat główny, można utworzyć wątek z tego komunikatu za pomocą interfejsu API createThread(). Ponieważ można mieć tylko jeden wątek dla dowolnej wiadomości, najlepszą praktyką jest sprawdzenie, czy wątek już istnieje przed utworzeniem nowego za pomocą interfejsu API hasThread()

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

createThread() zwróci obiekt ThreadChannel z metodami podobnymi do Channel. Na przykład, jeśli chcesz odczytać całą historię konwersacji z wątkami, pseudokod może wyglądać następująco:

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

Możesz wysyłać wiadomości tekstowe na kanale wątku w ten sam sposób, w jaki wysyłasz wiadomości na standardowym kanale, za pomocą interfejsu API sendText().

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

Cytowanie wiadomości

Cytowanie wiadomości jest przykładem jednej z naszych funkcji Chat SDK, która zapewnia pewien kontekst wysyłanej wiadomości, który odbiorca może zinterpretować. Możliwość wysyłania funkcji sendText( ), jak w poprzednim przykładzie, jest bardzo dobra, ale co jeśli chcesz dołączyć plik do wiadomości? Co jeśli chcesz oznaczyć użytkowników lub kanały w swojej wiadomości? Lub, co najbardziej istotne dla tego przewodnika, co jeśli chcesz zacytować poprzednią wiadomość w bieżącej wiadomości? Wszystkie te scenariusze są obsługiwane za pomocą MessageDraft.

MessageDraft jest podstawowym typem w Chat SDK i będzie używany przez większość implementacji czatu, aby zapewnić użytkownikom bogate w funkcje doświadczenie. Konieczne będzie utworzenie nowego obiektu MessageDraft za każdym razem, gdy tworzona jest nowa wiadomość czatu, a następnie można wywołać interfejs API addQuote(), aby odwołać się do poprzedniej wiadomości.

MessageDraft jest omówiony bardziej szczegółowo w przewodniku opisującym , jak wspominać o użytkownikach i kanałach, ale w skrócie, należy:

Zadeklarować zmienną do przechowywania wersji roboczej wiadomości

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

W ramach inicjalizacji czatu i po wysłaniu dowolnej wiadomości, zainicjować nowy MessageDraft.

setNewMessageDraft(threadChannel.createMessageDraft())

Za każdym razem, gdy tekst wejściowy ulegnie zmianie (np. użytkownik coś wpisze), powiadamiać o tym wersję roboczą wiadomości.

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

Dodaj poprzednią wiadomość jako cytat w odpowiedzi na akcję użytkownika

newMessageDraft.addQuote(message)

Wyślij wiadomość, gdy jest to wymagane

newMessageDraft.send()

Łatwiej będzie to zrozumieć, jeśli zobaczysz to w działającym demo...

Łączenie wszystkiego w całość

Możesz zobaczyć bardzo prosty przykład wątków wiadomości i cytowania wiadomości w krótkim demo poniżej:

Jest to prawdziwe, działające na żywo demo, więc nie krępuj się uruchomić demo w wielu kartach, aby zobaczyć odbierane wiadomości w czasie rzeczywistym. Ponieważ jest to aplikacja współdzielona, opcja "Reset App State" da ci puste pole do zabawy.

Interaktywne demo

Jeśli osadzona zawartość nie jest dostępna na tej stronie, można ją również wyświetlić pod adresem https://chat-sdk-how-to-threads-quotes.netlify.app/.

Kod, który napędza to demo, jest dostępny na GitHub, ale oto kilka fragmentów odpowiedniego kodu w aplikacji pokazujących, jak to do siebie pasuje:

//  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)
}

Logika przesyłania wiadomości. To demo jest zakodowane na stałe, aby zawsze odpowiadać na kanał wątku

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

Użytkownik naciska przycisk "Cytuj wiadomość".

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

Pamiętaj, że nie możesz cytować wiadomości z innego kanału, więc demo pozwala tylko na cytowanie wiadomości z tego samego wątku.

Demo: Tworzenie wątków i cytowanie wiadomości za pomocą naszego demo React Native na urządzenia mobilne

Możesz grać z tymi funkcjami za pomocą naszego Demo Chat SDK dla urządzeń mobilnych, dostępnego jako hostowane demo z pełnym kodem źródłowym na GitHub. Powinieneś także zobaczyć demo renderowane w iFrame na dole tej sekcji.

Wykonaj następujące kroki, aby utworzyć wątek i zacytować wiadomość w naszym demo:

1. Zaloguj się do aplikacji, wybierając losowy identyfikator użytkownika dla każdego urządzenia.
2. Rozpocznij konwersację z drugiego urządzenia, wybierając użytkownika zalogowanego na pierwszym urządzeniu.
3. Dodaj kilka wiadomości do konwersacji
4. Naciśnij i przytrzymaj jedną z wiadomości.
5. Wybierz opcję "Odpowiedz w wątku" i wyślij odpowiedź.
6. Naciśnij i przytrzymaj jedną z wiadomości (może to być również właśnie wysłana odpowiedź).
7. Wybierz opcję "Cytuj wiadomość
8. Wyślij wiadomość zawierającą cytowany tekst
9. Zauważ, że jeśli wycofasz się z rozmowy lub nawet wylogujesz się i wrócisz do aplikacji, reakcje zostaną zachowane i odczytane z historii wiadomości.

Jeśli osadzona zawartość nie jest dostępna na tej stronie, można ją również wyświetlić pod adresem https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/.

Jak PubNub może ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Fundamentem naszej platformy jest największa w branży i najbardziej skalowalna sieć przesyłania wiadomości w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub

Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację

Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij

Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.