Jak tworzyć wątki i cytować wiadomości za pomocą PubNub Chat SDK
Tags: chatsdk, typescriptsdk, chatjavascript
Published: 2023-12-21 10:10:21

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](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes), [wzmianki o użytkownikach](https://www.pubnub.com/docs/chat/chat-sdk/build/features/users/mentions), [odniesienia do kanałów](https://www.pubnub.com/docs/chat/chat-sdk/build/features/channels/references), [wątki](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads), [potwierdzenia odczytu](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/read-receipts) i [wskaźniki pisania](https://www.pubnub.com/docs/chat/chat-sdk/build/features/typing-indicator) są natywnie obsługiwane przez SDK, co pozwala szybko zbudować pełnoprawną aplikację.

Zapoznaj się z naszą [dokumentacją](https://www.pubnub.com/docs/chat/chat-sdk/overview) i [przykładową aplikacją czatu](https://www.pubnub.com/docs/chat/chat-sdk/build/sample-chat), aby rozpocząć korzystanie z Chat SDK. Nasz [samouczek](https://www.pubnub.com/tutorials/chat-sdk/) przeprowadzi Cię przez podstawową funkcjonalność Chat SDK i dotknie niektórych bardziej zaawansowanych funkcji, podczas gdy nasze [hostowane demo](https://www.pubnub.com/demos/chat-sdk-mobile/) 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](https://pubnub.com/how-to/chat-sdk-manage-user-channel-membership/)
-   [Jak dodawać reakcje i emotikony do wiadomości za pomocą zestawu Chat SDK](https://pubnub.com/how-to/chat-sdk-add-reactions-to-messages/)
-   [Jak tworzyć wątki i cytować wiadomości za pomocą Chat SDK](https://pubnub.com/how-to/chat-sdk-create-threads-and-quote-messges/)
-   [Jak wspominać użytkowników i kanały za pomocą Chat SDK](https://pubnub.com/how-to/chat-sdk-mention-users/)

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](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/chat) w swojej aplikacji

```js
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](https://www.pubnub.com/docs/chat/chat-sdk/build/configuration) w naszej dokumentacji.

### Wątki wiadomości

[Dokumentacja wątków wiadomości](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads) 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](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message) główny, można utworzyć wątek z tego komunikatu za pomocą interfejsu API [createThread()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#create-thread). 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()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#utility-getter-function)

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

createThread() zwróci obiekt [ThreadChannel](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/thread-channel) z metodami podobnymi do [Channel](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/channel). Na przykład, jeśli chcesz odczytać całą [historię](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#get-historical-thread-message) konwersacji z wątkami, pseudokod może wyglądać następująco:

```js
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()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#send-thread-message).

```js
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( [)](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/threads#send-thread-message), 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](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message-draft).

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()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes#quote-message), aby odwołać się do poprzedniej [wiadomości](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message).

[MessageDraft](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message-draft) jest omówiony bardziej szczegółowo w przewodniku opisującym [, jak wspominać o użytkownikach i kanałach](https://pubnub.com/how-to/chat-sdk-mention-users/), ale w skrócie, należy:

Zadeklarować zmienną do przechowywania wersji roboczej wiadomości

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

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

```js
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.

```js
//  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

```js
newMessageDraft.addQuote(message)
```

Wyślij wiadomość, gdy jest to wymagane

```js
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/](https://chat-sdk-how-to-threads-quotes.netlify.app/).

Kod, który napędza to demo, jest dostępny na [GitHub](https://github.com/PubNubDevelopers/Chat-SDK-How-Tos/tree/main/threads-quotes), ale oto kilka fragmentów odpowiedniego kodu w aplikacji pokazujących, jak to do siebie pasuje:

```js
//  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

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

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

```js
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](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/quotes#quote-message), 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](https://www.pubnub.com/demos/chat-sdk-mobile/) z pełnym kodem źródłowym na [GitHub](https://github.com/pubnub/js-chat/tree/master/samples/react-native-group-chat). **Powinieneś także zobaczyć demo renderowane w iFrame na dole tej sekcji**.

![Two smartphones displaying message thread with user interactions in a chat application.](https://images.ctfassets.net/3prze68gbwl1/6Z3UrVL7MjylWg9sPQ3bir/f53ef78f4b17272bb70f5431757c98d4/threads-quotes.png)

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/](https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/).

Jak PubNub może ci pomóc?
=========================

Ten artykuł został pierwotnie opublikowany na [PubNub.com](https://pubnub.com/how-to/chat-sdk-create-threads-and-quote-messges/)

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](https://www.pubnub.com/tour/introduction/), aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację
-----------------------

Załóż [konto](https://admin.pubnub.com/signup/) PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs).