Zbuduj aplikację do czatu w JavaScript w 10 liniach kodu
Published: 2024-01-26 18:13:33

[PubNub Chat](https://www.pubnub.com/solutions/chat/)oferuje solidną sieć czasu rzeczywistego i interfejsy API do wysyłania i odbierania danych w dowolnej aplikacji. Skorzystaj z naszych usług, aby szybko zbudować czat z bezpieczeństwem, skalowalnością i niezawodnością klasy korporacyjnej. PubNub eliminuje czas potrzebny na konfigurację i zarządzanie infrastrukturą, dzięki czemu możesz skupić się na rozwiązywaniu problemów biznesowych swoich klientów.

Postępuj zgodnie z tym samouczkiem, aby dowiedzieć się, jak utworzyć aplikację czatu na żywo za pomocą zaledwie dziesięciu wierszy kodu przy użyciu[PubNub JavaScript SDK](https://www.pubnub.com/docs/sdks/javascript/).

**Wypróbuj wersję demonstracyjną czatu**
----------------------------------------

Dostępne są dwie metody wypróbowania tej wersji demonstracyjnej:

1.  Nasze[interaktywne demo 10 czatów](https://www.pubnub.com/demos/10-line-chat/)przeprowadzi Cię krok po kroku przez tę mini-aplikację czatu. To demo to ten sam kod, który można skopiować poniżej wraz z interaktywnym przewodnikiem.
    
2.  Sklonuj repozytorium [repozytorium GitHub](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) aby zobaczyć, jak aplikacja działa za kulisami i zbudować własne funkcje.
    

Otwórz demo w dwóch kartach, aby rozmawiać między oknami!

![Chat in 10 lines of JavaScript](/cdn/3prze68gbwl1/1BrNYTZ7F0JKsuywM46pTz/01b9c8c3eeaa484e37b7729f2e40edaa/10-chat-screenshot.png)

**Jak stworzyć własną aplikację do czatu w czasie rzeczywistym?**
-----------------------------------------------------------------

Aby uruchomić aplikację do czatowania w czasie rzeczywistym, należy uzyskać klucze API niezbędne do połączenia się z platformą PubNub: klucze publikowania i subskrypcji. Możesz uzyskać własny zestaw bezpłatnych kluczy API, wykonując następujące kroki:

1.  Zaloguj się do[Admin Portal](https://admin.pubnub.com/).
    
2.  Kliknij zakładkę Apps po lewej stronie.
    
3.  Kliknij przycisk "Utwórz nową aplikację", aby utworzyć nową aplikację. Nadaj aplikacji nazwę i kliknij przycisk "Utwórz".
    
4.  Kliknij nowo utworzoną aplikację. Zostaniesz przeniesiony na stronę zestawów kluczy dla tej aplikacji. Pamiętaj, że każda utworzona aplikacja automatycznie generuje nowy zestaw kluczy, ale będziesz tworzyć nowy zestaw kluczy, aby włączyć określone funkcje.
    
5.  Kliknij przycisk "Utwórz nowy zestaw kluczy" w prawym górnym rogu portalu.
    
6.  Pojawi się wyskakujące okienko. Nadaj zestawowi kluczy nazwę i kliknij przycisk "Utwórz".
    
7.  Kliknij nowo utworzony zestaw kluczy.
    
8.  Skopiuj klucze publikowania i subskrybowania, klikając ikony kopiowania obok każdego pola klucza.
    

Po uzyskaniu kluczy API utwórz plik **index** .html i zapisz go. W pliku **index**.html zintegruj zestaw PubNub SDK z projektem przy użyciu sieci dostarczania treści.

```js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.min.js
```

Następnie skonfiguruj PubNub, dodając następujący kod do pliku aplikacji.

```js
// Open 2 tabs to chat between windows
        
// Get your PubNub keys from admin.pubnub.com
var pubnub = new PubNub(
  {publishKey: 'PUBNUB_PUBLISH_KEY', subscribeKey: 'PUBNUB_SUBSCRIBE_KEY', 
   userId: 'user1'});
var channel = '10chat';

// Add a listener to a channel and subscribe to it
pubnub.addListener({
  message: function (m) {
    box.innerHTML += newRow(m.message, 
     m.publisher);
  }
});
pubnub.subscribe({channels: [channel]}); 
// Publish new message when enter is pressed. 
input.addEventListener('keypress', function (e) {
  (e.keyCode || e.charCode) === 13 && 
   pubnub.publish({ 
    channel: channel, message: input.value, 
     x: (input.value = '')
  });
});
```

Pamiętaj, aby zastąpić `PUBNUB_PUBLISH_KEY` i `PUBNUB_SUBSCRIBE_KEY` odpowiednimi kluczami publikowania i subskrypcji uzyskanymi z portalu administracyjnego PubNub.

Możesz ukończyć swoją aplikację czatu, dodając pola wprowadzania wiadomości, przyciski wysyłania czatu i niestandardowy CSS do stylizacji tych elementów. Sprawdź [Simple Chat GitHub](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) aby uzyskać więcej informacji i pełny kod źródłowy.

Jakie narzędzia mogą mi pomóc w tworzeniu czatu?
------------------------------------------------

[PubNub oferuje wiele zestawów SDK](https://www.pubnub.com/docs/sdks)w tym dedykowany [Chat SDK](https://www.pubnub.com/docs/chat/chat-sdk/overview) dostosowany specjalnie do przypadków użycia czatu, oferujący łatwe w użyciu metody, które pozwalają robić dokładnie to, co chcesz.

Te zestawy SDK ułatwiają dodawanie czatu do aplikacji. Możesz skupić się na tworzeniu najlepszego doświadczenia użytkownika po stronie klienta, podczas gdy PubNub zajmie się stroną serwerową aplikacji.

Twórz prywatne pokoje rozmów 1:1, czaty grupowe, a nawet mega czaty na potrzeby wydarzeń na dużą skalę. Oto kilka przykładów:

-   [Wirtualne wydarzenia](https://www.pubnub.com/solutions/sports-media/): Czat strumieniowy w wydarzeniach na żywo
    
-   [Telemedycyna](https://www.pubnub.com/solutions/digital-health/): Prywatny czat między lekarzami i pacjentami
    
-   [Gaming](https://www.pubnub.com/solutions/gaming/): Czat na żywo dla graczy online
    
-   [Wsparcie](https://www.pubnub.com/solutions/communications/): Czat między agentami i klientami
    
-   [Marketplaces](https://www.pubnub.com/solutions/ecommerce/): Czat między kupującymi i sprzedającymi
    
-   [Współpraca](https://www.pubnub.com/solutions/multiuser-collaboration/): Czat do komunikacji zespołowej w miejscu pracy
    

Zaawansowane funkcje czatu
--------------------------

Po wysłaniu i odebraniu wiadomości możesz użyć PubNub Chat, aby wbudować w czat funkcje takie jak te:

-   [Wskaźniki pisania](https://www.pubnub.com/docs/chat/sdks/messages/typing): Wskazywanie, czy użytkownicy wpisują wiadomości w kanale.
    
-   [Potwierdzenia odczytu](https://www.pubnub.com/docs/chat/sdks/messages/message-receipts): Umożliwia użytkownikom śledzenie dostarczania wiadomości w kanale.
    
-   [Wysyłanie i odbieranie plików](https://www.pubnub.com/docs/chat/sdks/messages/files): Przesyłanie i udostępnianie plików innym użytkownikom w aplikacji.
    
-   [Trwałość wiadomości](https://www.pubnub.com/docs/chat/sdks/messages/message-history): Przechowywanie i pobieranie wiadomości wysyłanych przez sieć.
    
-   [Wskaźniki obecności online/offline](https://www.pubnub.com/docs/chat/sdks/users/presence): Śledzenie statusu online i offline użytkowników i urządzeń w czasie rzeczywistym oraz przechowywanie niestandardowych informacji o stanie.
    
-   [Liczba nieprzeczytanych wiadomości](https://www.pubnub.com/docs/chat/sdks/messages/unread-counts): Uzyskaj liczbę wiadomości w kanałach, które zostały opublikowane po określonym czasie.
    

Co jeszcze mogę zrobić z PubNub?
--------------------------------

PubNub utrzymuje ponad 15 zsynchronizowanych globalnych punktów obecności, które mogą dostarczać wiadomości do dowolnego urządzenia w czasie poniżej 100 milisekund. PubNub posiada takie funkcje jak[Funkcje](https://www.pubnub.com/products/functions/)i [Mobilne powiadomienia push](https://www.pubnub.com/docs/chat/sdks/push-notifications)które można wykorzystać w swoim produkcie.

Korzystając z PubNub SDK, programiści mogą szybko tworzyć czaty i inne funkcje czasu rzeczywistego bez poświęcania znacznej ilości czasu na naukę, tworzenie i zarządzanie mechaniką wysyłania wiadomości czatu lub innych danych w czasie rzeczywistym. Cała infrastruktura i skalowanie są obsługiwane za Ciebie. Dzięki PubNub możesz skupić się na pierwszej stronie swojej gry, nie martwiąc się o infrastrukturę, która za nią stoi.

Sprawdź więcej zasobów dotyczących czatu, aby zacząć już dziś:

-   [Poradniki](https://www.pubnub.com/how-to/?sortBy=Most%20recent&categories=Chat) w implementacji konkretnych przypadków użycia dla aplikacji czatu.
    
-   [Rozwijać](https://www.pubnub.com/tutorials/javascript-sdk-chat-app/) aplikację czatu w aplikacji przy użyciu PubNub JavaScript SDK.
    
-   [Dowiedz się](https://www.pubnub.com/tutorials/chat-sdk/) jak skonfigurować i używać PubNub Chat SDK do tworzenia elastycznych aplikacji czatu.
    

Masz pytania lub wątpliwości? Skontaktuj się z naszym zespołem pod adresem [devrel@pubnub.com](devrel@pubnub.com).

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

Ten artykuł został pierwotnie opublikowany na [PubNub.com](https://www.pubnub.com/blog/realtime-live-chat-application-javascript-pubnub-10-lines-of-code/)

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

Podstawą naszej platformy jest największa w branży i najbardziej skalowalna sieć komunikacyjna 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).