Najprostszy składnik do tworzenia aplikacji front-end czasu rzeczywistego

Dane w czasie rzeczywistym nie są już miłym dodatkiem, ale koniecznością przy tworzeniu odpowiednich i angażujących doświadczeń użytkowników. Większość branż przyzwyczaiła się dziś do korzystania z natychmiastowych aktualizacji, więc jeśli jesteś programistą front-end, który chce rozpocząć tworzenie aplikacji w czasie rzeczywistym, musisz opanować przepływ danych w czasie rzeczywistym.

Jako rzecznik deweloperów w Redpanda, moim zadaniem jest umożliwienie programistom wykorzystania danych strumieniowych w ich aplikacjach. Częściowo polega to na wprowadzaniu deweloperów w lepsze technologie i prezentowaniu ich w praktycznych i zabawnych przypadkach użycia.

W tym poście pokażę więc, w jaki sposób wykorzystałem trzy nowoczesne technologie – Redpanda Serverless, Pusher, oraz Vercel – aby stworzyć atrakcyjną aplikację frontendową czasu rzeczywistego, która, mam nadzieję, pobudzi Państwa pomysły na wdrożenie tego potężnego trio w swoim świecie.

The Cupcake Conundrum

Proszę wyobrazić sobie prężnie działający biznes babeczkowy w Nowym Jorku. Aby przyciągnąć klientów na tak konkurencyjnym rynku, będą musieli sprawić, by ich lokalizacja była dobrze widoczna dla pobliskich fanów babeczek. Będą również musieli zaangażować swoich klientów poprzez natychmiastową informację zwrotną, aby zbudować zaufanie, poprawić ogólne wrażenia użytkownika oraz zwiększyć powtarzalność transakcji i lojalność klientów.

Jednak tworzenie aplikacji czasu rzeczywistego było tradycyjnie trudne, ponieważ są one zaprojektowane tak, aby reagować na dane wejściowe użytkownika, a nie stale nasłuchiwać i przetwarzać przychodzące strumienie danych. To ostatnie wymaga solidnej i złożonej infrastruktury do zarządzania trwałymi połączeniami i obsługi dużych ilości danych przy minimalnych opóźnieniach.

Dla wzrokowców, poniżej znajdą Państwo krótki film wyjaśniający ten przypadek użycia:

Wybór odpowiednich technologii

Wybrałem Redpanda Serverless jako platforma danych strumieniowych, ponieważ tradycyjne rozwiązania danych strumieniowych, takie jak Apache Kafka®, może być złożone i wymagać dużych zasobów, co stanowi ogromną przeszkodę dla zespołów o ograniczonym czasie i zasobach.

Kilka kwestii do rozważenia podczas korzystania z platformy:

Eliminuje koszty infrastruktury: Zarządza szkieletem danych strumieniowych, pozwalając mi skupić się na logice aplikacji.
Upraszcza skalowalność: Bez wysiłku skaluje się wraz z potrzebami mojej aplikacji, dostosowując się do skoków danych bez ręcznej interwencji.
Skraca czas wprowadzenia produktu na rynek: Dzięki czasowi konfiguracji wynoszącemu kilka sekund, przyspiesza rozwój, umożliwiając szybsze iteracje i informacje zwrotne.
Płać w miarę rozwoju: Dostosowuje się do mojego użytkowania, zapewniając koszty zgodne z moimi rzeczywistymi potrzebami w zakresie przetwarzania danych, co jest idealne dla startupów i małych projektów.

Zajmuje się to złożoną infrastrukturą do obsługi dużych ilości danych i niskimi opóźnieniami, których oczekuje się od aplikacji działających w czasie rzeczywistym.

Teraz muszę ustanowić pojedyncze, długotrwałe połączenie między przeglądarką a serwerem, zwykle za pośrednictwem WebSocket, który ustanawia kanał komunikacyjny full-duplex za pośrednictwem połączenia HTTP. Pozwala to serwerowi przesyłać aktualizacje do klienta przeglądarki bez konieczności okresowych żądań.

Jednak Vercel nie obsługuje WebSocket, więc potrzebowałem alternatywnego rozwiązania. Oto ono Pusher wyskakuje. Pusher pozwala mi tworzyć kanały w czasie rzeczywistym między serwerem a klientem, upraszczając złożoność związaną z bezpośrednim korzystaniem z WebSocket.

Podczas wdrażania aplikacji frontendowych w czasie rzeczywistym Vercel wyróżnia się płynną integracją z repozytorium Git, która ułatwia wdrażanie. Po naciśnięciu przycisku zmiany są automatycznie aktualizowane, a w razie potrzeby mogę uzyskać statystyki witryny i dane z innych rozwiązań (takich jak bazy danych).

Przygotowanie aplikacji

W mojej aplikacji, mapview.js działa jako funkcja bezserwerowa Vercel, która odgrywa najważniejszą rolę, pobierając dane z tematu utworzonego przeze mnie w Redpanda Serverless, a następnie aktualizując stan zapasów.

Przed użyciem Pushera do przekazania tych aktualizacji do front-endu, Serverless mapuje identyfikatory sklepów w store_nyc.csv do ich fizycznych lokalizacji, a następnie dodaje informacje o lokalizacji (szerokość i długość geograficzną), które klient musi wyrenderować.

await consumer.run({
      eachMessage: async ({ topic, partition, message }) => {
        const messageData = JSON.parse(message.value.toString());
        const location = storeLocations[messageData.store];
        const { store, ...rest } = messageData;
        for (let store in inventory) {
            inventory[store].latest = false;
        }

        inventory[messageData.store] = { ...rest, ...location, latest: true };
        try {
          pusher.trigger("my-channel",channelId, JSON.stringify(inventory));
        } catch (error) {
          console.error('Error:', error);
        }

      },
    })

Uwaga: Funkcje bezserwerowe Vercel mają maksymalny limit czasu trwania, który różni się w zależności od planu subskrypcji. Ustawiłem więc wartość MAX_BLOCK_TIME na pięć sekund. Plan Pro pozwala na wykonanie do 300 sekund dla lepszego doświadczenia użytkownika.

await new Promise(resolve => setTimeout(resolve, MAX_BLOCK_TIME) );

Na froncie, index.html prezentuje mapę w czasie rzeczywistym przy użyciu bibliotek LeafletJS i aktualizacji zapasów, zapewniając użytkownikom końcowym dynamiczne i interaktywne wrażenia.

channel.bind('cupcake-inv', function(data) {
   var inventory = data;
   tableBody.innerHTML = '';
   for (var store in inventory) {
    var storeData = inventory[store];
    if (markers[store]) {
       markers[store].setLatLng([storeData.lat, storeData.lng])
                        .setPopupContent(`<b>${storeData.store}</b><br>Blueberry: ${storeData.blueberry}<br>Strawberry: ${storeData.strawberry}`);
    } else {
       markers[store] = L.marker([storeData.lat, storeData.lng]).addTo(map)
                        .bindPopup(`<b>${storeData.store}</b><br>Blueberry: ${storeData.blueberry}<br>Strawberry: ${storeData.strawberry}`);
    }

Generuje również unikalny identyfikator sesji dla każdej sesji w celu utworzenia kanałów w Pusher, dzięki czemu każda sesja będzie miała swój unikalny kanał do otrzymywania aktualizacji.

channel.bind(uniqueChannelId, function(data) {
      var inventory = data;
      for (var store in inventory) {
            var storeData = inventory[store];
……
document.addEventListener('DOMContentLoaded', () => {
            fetch(`/api/mapview?channelId=${encodeURIComponent(uniqueChannelId)}`)

Przepis: Aktualizacje babeczek w czasie rzeczywistym za pomocą Redpanda Serverless, Vercel i Pusher

Czas zacząć gotować! Poniżej znajduje się opis krok po kroku, w jaki sposób urzeczywistniłem tę wizję. Jeśli chcą Państwo przejść dalej, cały kod można znaleźć w sekcji repozytorium GitHub.

Krok 1: Konfiguracja Redpanda Serverless

Proszę się zarejestrować i utworzyć klaster: Po zarejestrowaniu się proszę kliknąć przycisk Create Cluster (Utwórz klaster) i wybrać region bliski Państwa obciążeniu, co zapewni niskie opóźnienia dla Państwa danych.
Proszę utworzyć użytkownika i ustawić uprawnienia: W zakładce Security proszę utworzyć nowego użytkownika i ustawić niezbędne uprawnienia.
Proszę utworzyć temat: Proszę utworzyć temat o nazwie inv-count poświęcony śledzeniu aktualizacji zapasów babeczek.

Krok 2: Integracja Pushera w celu aktualizacji w czasie rzeczywistym

Proszę zarejestrować aplikację: Po utworzeniu aplikacji w usłudze Pusher, proszę skopiować dane uwierzytelniające aplikacji, w tym identyfikator app_id, klucz, klucz tajny i informacje o klastrze, a następnie zapisać je do użytku w aplikacji.

Krok 3: Wdrożenie za pomocą Vercel

Integracja z GitHub: Przesłanie zaktualizowanej bazy kodu do repozytorium GitHub, zapewniając, że zmiany są kontrolowane pod kątem wersji i gotowe do wdrożenia.
Proszę zaimportować i skonfigurować projekt w Vercel: Proszę przejść do Vercel i zaimportować projekt, wybierając repozytorium “cupcakefanatic”. Proszę określić cupcake-pusher jako katalog główny dla wdrożenia.
Proszę skonfigurować środowisko: Proszę wprowadzić zmienne środowiskowe specyficzne dla projektu.

Dzięki temu mogę ustanowić płynne połączenie w czasie rzeczywistym między serwerem a klientami, zwiększając obecność sklepu w Internecie i zaangażowanie użytkowników – bez ciężkiego podnoszenia tradycyjnie związanego z przesyłaniem strumieniowym danych w czasie rzeczywistym.

Poniżej znajduje się zrzut ekranu wynikowych danych w czasie rzeczywistym w naszej aplikacji cupcake.

Dzięki zwycięskiej kombinacji Redpanda Serverless, Pusher i Vercel z łatwością stworzyłem dynamiczną, responsywną aplikację, która informuje klientów i angażuje ich dzięki aktualizacjom zapasów na żywo.

Jeśli mają Państwo pytania, proszę pytać w Społeczność Redpanda na Slacku, jestem tam przez większość czasu 🙂