Zbuduj aplikację do czatu w JavaScript w 10 liniach kodu
PubNub Developer Relations
Posted on January 26, 2024
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:
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.
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!
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:
Zaloguj się doAdmin Portal.
Kliknij zakładkę Apps po lewej stronie.
Kliknij przycisk "Utwórz nową aplikację", aby utworzyć nową aplikację. Nadaj aplikacji nazwę i kliknij przycisk "Utwórz".
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.
Kliknij przycisk "Utwórz nowy zestaw kluczy" w prawym górnym rogu portalu.
Pojawi się wyskakujące okienko. Nadaj zestawowi kluczy nazwę i kliknij przycisk "Utwórz".
Kliknij nowo utworzony zestaw kluczy.
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
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 = '')
});
});
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:
Wirtualne wydarzenia: Czat strumieniowy w wydarzeniach na żywo
Telemedycyna: Prywatny czat między lekarzami i pacjentami
Gaming: Czat na żywo dla graczy online
Wsparcie: Czat między agentami i klientami
Marketplaces: Czat między kupującymi i sprzedającymi
Współpraca: 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: Wskazywanie, czy użytkownicy wpisują wiadomości w kanale.
Potwierdzenia odczytu: Umożliwia użytkownikom śledzenie dostarczania wiadomości w kanale.
Wysyłanie i odbieranie plików: Przesyłanie i udostępnianie plików innym użytkownikom w aplikacji.
Trwałość wiadomości: Przechowywanie i pobieranie wiadomości wysyłanych przez sieć.
Wskaźniki obecności online/offline: Śledzenie statusu online i offline użytkowników i urządzeń w czasie rzeczywistym oraz przechowywanie niestandardowych informacji o stanie.
Liczba nieprzeczytanych wiadomości: 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 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.
Posted on January 26, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.