Zbuduj aplikację do czatu w JavaScript w 10 liniach kodu

pubnubdevrel

PubNub Developer Relations

Posted on January 26, 2024

Zbuduj aplikację do czatu w JavaScript w 10 liniach kodu

PubNub Chatoferuje 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życiuPubNub JavaScript SDK.

Wypróbuj wersję demonstracyjną czatu

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

  1. Naszeinteraktywne demo 10 czatówprzeprowadzi 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 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

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ę doAdmin Portal.

  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.

https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.min.js
Enter fullscreen mode Exit fullscreen mode

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

// 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 = '')
  });
});
Enter fullscreen mode Exit fullscreen mode

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 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 SDKw tym dedykowany Chat SDK 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:

Zaawansowane funkcje czatu

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

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 jakFunkcjei Mobilne powiadomienia pushktó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 w implementacji konkretnych przypadków użycia dla aplikacji czatu.

  • Rozwijać aplikację czatu w aplikacji przy użyciu PubNub JavaScript SDK.

  • Dowiedz się 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.

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.

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

💖 💪 🙅 🚩
pubnubdevrel
PubNub Developer Relations

Posted on January 26, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related