Jak dodawać reakcje i emotikony do wiadomości za pomocą PubNub Chat SDK
Tags: chatsdk, typescriptsdk, chatjavascript
Published: 2023-12-20 08:12:51

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

Dodawanie reakcji i emotikonów do wiadomości
--------------------------------------------

Możliwość zareagowania na wiadomość jest podstawową częścią wielu implementacji czatu, na przykład dając wiadomości kciuk w górę lub emotikonę buźki. Możesz zobaczyć terminologię "reakcje wiadomości" i "emoji" używaną zamiennie, ale zrozum, że opisują one to samo - **nie jest to wysyłanie** emoji jako części 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 do reakcji na wiadomości nie potrzeba nic 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.

### Reakcje na wiadomości

Aby wyrazić reakcję na wiadomość, należy wywołać API [message.toggleReaction()](https://pubnub.com/docs/chat/chat-sdk/build/features/messages/emojis#add--delete).

```js
// add the "thumb up" emoji to that message
const newMsg = await message.toggleReaction("👍")
```

[Wiadomość](https://pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message) jest podstawowym typem w Chat SDK i najprawdopodobniej renderujesz swoje wiadomości na liście, ale sposób, w jaki użytkownik wybiera reakcję, zależy od Twojego UX.

Nie ma metod setReaction(...) ani deleteReaction(...); jedynym sposobem na zastosowanie lub usunięcie reakcji do wiadomości jest użycie interfejsu API [toggleReaction()](https://pubnub.com/docs/chat/chat-sdk/build/features/messages/emojis#add--delete). ToggleReaction() zwróci nową kopię wiadomości, która powinna zastąpić istniejące wiadomości na liście użytkownika.

Aby pobrać reakcje, Chat SDK może albo powiadomić Cię za pomocą wywołania zwrotnego, albo możesz zapytać o konkretną wiadomość, aby zapytać, jakie reakcje zostały zastosowane.

### Sprawdzanie reakcji wiadomości

Aby zapytać o reakcje zastosowane do pojedynczej wiadomości, użyj interfejsu API [message.reactions](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/reactions#get-reactions-for-one-message):

```js
message.reactions["👍"]
```

Pamiętaj, że wiadomość może mieć wiele reakcji emoji (🙂🥰🥳), a każdy emoji mógł zostać zastosowany przez wielu użytkowników. Wartością zwrotną z "message.reactions" jest zatem obiekt JSON, w którym każdy klucz jest innym emoji. Wartością powiązaną z każdym kluczem jest tablica zawierająca wszystkie identyfikatory użytkowników, którzy zastosowali emoji, wraz z czasem zastosowania reakcji.

```js
{
  "🥳": [
      {
        "uuid": "user-1",
        "actionTimetoken": "16983289196082900"
      }
    ],
  "🙂": [
      {
        "uuid": "user-1",
        "actionTimetoken": "16983290238341020"
      },
      {
        "uuid": "user-2",
        "actionTimetoken": "16983290238341020"
      }
    ]
}
```

### Otrzymywanie powiadomień o aktualizacji reakcji wiadomości

Aby otrzymywać powiadomienia o zmianie reakcji wiadomości, zestaw Chat SDK udostępnia metody streamUpdates( [) i streamUpdatesOn()](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/updates#get-message-updates). StreamUpdates() można wywołać na pojedynczym obiekcie wiadomości, aby zarejestrować wywołanie zwrotne wywoływane, gdy zmienią się tylko reakcje tej wiadomości. Jednak częściej zdarza się, że chcesz być powiadamiany, gdy dowolny komunikat w konwersacji lub wątku otrzyma reakcję, a dla tego bardziej rozpowszechnionego przypadku użycia powinieneś użyć streamUpdatesOn().

StreamUpdatesOn() jest statyczną metodą klasy [Message](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/message), dziedziczoną również w klasie [ThreadMessage](https://www.pubnub.com/docs/chat/chat-sdk/learn/chat-entities/thread-message). Często zdarza się, że konwersacja w jednym kanale jest wyświetlana w jednym widoku, ale jeśli rozwiniesz wątek wiadomości, wątek ten jest wyświetlany w osobnym widoku. W tym przykładzie można użyć Message.streamUpdatesOn() dla widoku głównego i ThreadMessage.streamUpdatesOn() dla widoku wątku.

```js
Message.streamUpdatesOn(messages, (messages) => {
  console.log("Updated messages: ", messages)
})
```

Wartością zwracaną w wywołaniu zwrotnym streamUpdates()/streamUpdatesOn() jest zaktualizowana instancja wiadomości/komunikatów, więc należy odpowiednio zaktualizować interfejs użytkownika aplikacji.

### Łączenie wszystkiego w całość

Jedną z możliwych implementacji byłoby przechowywanie bieżących komunikatów konwersacji w stanie aplikacji, który jest aktualizowany za pomocą funkcji streamMessages(). Bieżące wiadomości wyświetlane użytkownikowi są renderowane z tego stanu aplikacji, a jako część tej funkcji renderowania, [message.](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/reactions#get-reactions-for-one-message) reactions określi, które emoji powinny być wyświetlane obok każdej wiadomości. Jeśli użytkownik wejdzie w interakcję z wiadomością, aby dodać do niej reakcję, użyj [toggleReaction](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/reactions#add--delete), aby powiadomić Chat SDK i zaktualizować stan aplikacji

Możesz zobaczyć to zachowanie w krótkim demo poniżej. Jest to prawdziwe, działające na żywo demo, więc zachęcamy do uruchomienia go w wielu kartach, aby zobaczyć reakcje w czasie rzeczywistym udostępniane między uczestnikami:

Interaktywne demo
-----------------

  
**Jeśli osadzona zawartość nie jest dostępna** na tej stronie, można ją również obejrzeć pod adresem [https://chat-sdk-how-to-reactions.netlify.app/](https://chat-sdk-how-to-reactions.netlify.app/).

Kod napędzający to demo jest dostępny na [GitHub](https://github.com/PubNubDevelopers/Chat-SDK-How-Tos/tree/main/reactions), ale kluczowe punkty to:

Obsługa kliknięcia, gdy użytkownik kliknie wiadomość lewym lub prawym przyciskiem myszy:

```js
async function handleClick(message: Message, reaction: string)
{
  await message.toggleReaction(reaction)
}
```

Gdy otrzymamy wywołanie zwrotne, że wiadomości uległy zmianie, zaktualizuj nasz UX

```js
useEffect(() => {
  if (!messages.length) return
    return Message.streamUpdatesOn(messages, setMessages)
}, [messages])
```

Wyświetlenie reakcji na wiadomość. Należy pamiętać, że celowo prosta implementacja w tym udostępnionym demo jest w rzeczywistości współdzieloną reakcją, w której każdy użytkownik może ją dodać lub usunąć. Twoja implementacja prawdopodobnie wyświetli liczbę obok każdego emoji, aby wskazać, ile osób zareagowało:

```js
{message.reactions["🙂"] && message.reactions["🙂"].length !== 0 ? "🙂":""}
{message.reactions["🥳"] && message.reactions["🥳"].length !== 0 ? "🥳":""}
```

### Reakcje historyczne

Jeśli w zestawie kluczy PubNub włączona jest funkcja trwałości, wiadomości będą przechowywane przez PubNub i można je odzyskać za pomocą [Historii wiadomości](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/history).

Chat SDK automatycznie zachowa reakcje na wiadomości w historii, umożliwiając dostęp do historycznych reakcji bez żadnych dodatkowych czynności. Jeśli wcześniej korzystałeś z naszych tradycyjnych zestawów SDK PubNub, możesz być świadomy, że aby pobrać historyczne reakcje na wiadomości, musisz określić "includeMessageActions" podczas wykonywania połączenia, ale Chat SDK upraszcza sprawę.

Ilustruje to poniższa próbka kodu zaczerpnięta [bezpośrednio z dokumentacji](https://www.pubnub.com/docs/chat/chat-sdk/build/features/messages/reactions#basic-usage-1)

```js
// reference the "support" channel with the message you want to check
const channel = await chat.getChannel("support")

// reference the last message on that "support" channel
const message = await channel.getHistory({count: 1}).messages[0]

// list all thumbs-up reactions to the message
console.log(message.reactions["👍"])
```

Demo: Dodaj reakcje za pomocą naszego demo React Native na urządzeniach mobilnych
---------------------------------------------------------------------------------

Możesz pobawić się tą funkcją korzystając z naszego Chat SDK Demo for Mobile, dostępnego jako [hostowane demo](https://www.pubnub.com/demos/chat-sdk-mobile/) z pełnym kodem źródłowym dostępnym 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 with messaging app interface showing a conversation between users test-user-917 and test-user-322.](https://images.ctfassets.net/3prze68gbwl1/BaJuGMntJAVtNc2kUNO2t/bfa86180be1bb4e73ef10d81158466f0/reactions-demo.png)

Wykonaj następujące kroki, aby użyć reakcji na wiadomości w naszym demo:

1.  Zaloguj się do aplikacji, wybierając losowy identyfikator użytkownika dla każdego z dwóch urządzeń.
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 emoji, aby zareagować.
6.  Powtórz, aby dodać kilka innych emoji
7.  Zauważ, że jeśli wycofasz się z konwersacji 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-add-reactions-to-messages/)

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).