PubNub Developer RelationsW dzisiejszym szybko zmieniającym się świecie, gdy nasza zbiorowa uwaga kurczy się, zapotrzebowanie na płynną interaktywność wciąż rośnie. Opóźnienia powodowane przez uruchamianie serwerów lub ładowanie obrazów utrudniają prawdziwie rzeczywiste wrażenia użytkownika, z czym można sobie poradzić za pomocą architektur bezserwerowych. W naszym coraz bardziej pochłaniającym media społeczeństwie oczekiwanie na załadowanie strony internetowej lub urządzenia IoT wydaje się archaiczne. Myśli takie jak "Mam teraz łączność 5G, dlaczego miałbym być zmuszony do radzenia sobie z zależnościami?" często pojawiają się w umysłach użytkowników.
Celem tego bloga jest prognozowanie przyszłości aplikacji z mojej perspektywy i zilustrowanie prostoty dostosowywania aplikacji do obecnych standardów szybkości i bezpieczeństwa. Staje się to szczególnie istotne dla profesjonalistów rozważających wybór języka, frameworka, a nawet czegoś tak prostego jak pakiety npm do realizacji projektu. Era czasu rzeczywistego szybko się zbliża, a systemy, które nie ewoluują, aby dopasować się do tej prędkości, prawdopodobnie zostaną pominięte.
Eskalacja środowiska czasu rzeczywistego zrewolucjonizowała ekosystem technologiczny. Każdy nowy postęp technologiczny przybliża nas o krok do osiągnięcia szybszych wyników, płynnie integrując nasze cyfrowe doświadczenia. Dla laika przekłada się to na świadomość lokalizacji kierowcy Ubera w czasie rzeczywistym za pośrednictwem obsługi zdarzeń i powiadomień push. Dla deweloperów otwiera to drzwi do szybkich i płynnych połączonych doświadczeń, łącząc urządzenia na całym świecie za pomocą modelu pub/sub.
Trendy React Native w czasie rzeczywistym
Pojawienie się współczesnych konsumentów wymagających natychmiastowych danych, w połączeniu z możliwościami Node.js, przeniosło nas poza dni, w których oczekiwanie na otrzymanie wiadomości było akceptowalne. Jeśli usługa nie jest natychmiastowa, użytkownicy szybko szukają alternatyw.
W miarę jak nowe prędkości połączeń stają się dostępne na całym świecie, liczba osób uczestniczących w tym interaktywnym świecie w czasie rzeczywistym rośnie. Wraz z rozwojem usług współdzielenia przejazdów i dostaw jedzenia w Stanach Zjednoczonych, te same branże przeżywają boom w Azji Południowo-Wschodniej i Indiach. Usługi dostawy jedzenia, takie jak Swiggy i Zomato, popularne w Indiach, realizują ponad 500 000 dostaw dziennie. Zarówno te firmy, jak i ich konsumenci, w dużym stopniu polegają na strumieniach danych json w czasie rzeczywistym zasilanych przez Python. Oczywiste jest, że świadczenie tych usług przestaje być eksperymentalnym przedsięwzięciem, a staje się integralną częścią codziennego życia na całym świecie.
Wraz z rosnącym przyjęciem 5G i postępem w aplikacjach internetowych i mobilnych, niezwykle ważne jest, aby nasze oprogramowanie poprawiło szybkość przesyłania danych, aby zapobiec potencjalnym wąskim gardłom. Aplikacje mogą teraz aktualizować się w czasie rzeczywistym, katalizując łączność ludzi. React Native, ze swoją responsywnością w czasie rzeczywistym, jest idealnym rozwiązaniem, aby zaspokoić naszą rosnącą zależność od technologii.
Czym jest React Native dla czasu rzeczywistego?
W odpowiedzi na potrzebę szybkości, programiści Facebooka uruchomili framework JavaScript znany jako React i późniejsze wykorzystanie pliku JS. React umożliwia tworzenie szybkich i lekkich stron internetowych przy użyciu JavaScript i rozszerzenia składni JavaScript (JSX). JSX ułatwia projektowanie interfejsów użytkownika w formacie podobnym do XML, zachowując jednocześnie możliwości JavaScript. Co więcej, React umożliwia ukierunkowane aktualizacje na stronach internetowych, eliminując potrzebę całkowitego przeładowania strony w celu wprowadzenia modyfikacji, a tym samym przyspieszając działanie witryn i wzbogacając doświadczenia użytkowników.
Po stworzeniu Reacta, zaprojektowanego specjalnie dla stron internetowych, jego struktura komponentów została rozszerzona na React Native. Technologia ta umożliwia tworzenie aplikacji mobilnych przy użyciu podobnych zasad jak React. Przetwarza JavaScript i uruchamia go bezpośrednio na urządzeniu mobilnym, łącząc każdy komponent za pomocą mostu z natywnym komponentem iOS lub Android. Mosty ułatwiają JavaScriptowi przekazywanie informacji do natywnych komponentów.
React Native wykorzystuje strukturę komponentów, w której komponenty mogą zawierać inne komponenty. Jeśli dane związane z konkretnym komponentem ulegną zmianie, tylko ten komponent zostanie ponownie wyrenderowany. To selektywne ponowne renderowanie sprawia, że aplikacje i strony internetowe są szybsze, płynniejsze i bardziej wydajne. Dzięki temu systemowi React i React Native są doskonałymi zasobami do tworzenia aplikacji działających w czasie rzeczywistym.
Jednakże, podczas gdy React Native jest idealną podstawą dla aplikacji do czatu w czasie rzeczywistym, nie zapewnia wymaganych usług połączeń. W tym miejscu PubNub wypełnia lukę, oferując użytkownikom płynne i bezpieczne połączenie za pomocą kluczy API i bezpiecznych mechanizmów uwierzytelniania.
Dlaczego warto używać PubNub jako usługi czasu rzeczywistego?
Zaczynając od React Native jako naszej aplikacji bazowej, potrzebujemy jakiegoś mechanizmu do ustanowienia połączenia między naszymi urządzeniami lub użytkownikami. To właśnie tutaj PubNub jest odpowiednim rozwiązaniem. Nie tylko łączy użytkowników, ale robi to szybko. Globalna sieć punktów obecności PubNub (lub PoP, które są strategicznie rozmieszczonymi centrami danych na całym świecie, które poprawiają lokalizację danych i zmniejszają opóźnienia) umożliwia dostarczanie prawdziwie globalnej usługi. W połączeniu z React Native możemy połączyć użytkowników we wspólnym, współdzielonym doświadczeniu.
PubNub jest jednym z wiodących dostawców sieci czasu rzeczywistego z Pub/Sub (publikuj/subskrybuj) i wieloma innymi łatwo dostępnymi funkcjami. PubNub oferuje do 1 000 000 wiadomości za darmo miesięcznie! Oprócz tego hojnego bezpłatnego poziomu, PubNub jest łatwy w użyciu, umożliwiając upuszczenie kodu startowego do projektu, połączenie się i rozpoczęcie przesyłania wiadomości pub / sub przy minimalnym wysiłku.
Nie musisz już martwić się konfigurowaniem serwerów lub obsługą wielu połączeń. PubNub odpowiada za backend, informując klientów o ważnych dla nich informacjach. Zapewnia solidną infrastrukturę Pub/Sub, na której można budować. Wystarczy wysłać dane, a PubNub zapewni, że dotrą one do każdego użytkownika. W tym kontekście zbadamy funkcje PubSub, historii i obecności PubNub.
W kolejnych sekcjach omówimy proces uruchamiania i zagłębimy się w niektóre fragmenty kodu, które są korzystne dla typowych przypadków użycia React Native.
Podstawy React Native w czasie rzeczywistym
Dokonamy przeglądu niektórych funkcji PubNub, które umożliwią tworzenie typowych funkcji dla aplikacji działających w czasie rzeczywistym. W każdym przykładzie podamy fragmenty kodu i linki do dalszych informacji.
Łączenie PubNub z React Native
Wprowadź poniższy kod w terminalu, aby zainstalować PubNub w projekcie React Native. Spowoduje to również natywną instalację zależności.
npm install pubnub
Poniżej znajduje się przykład tego, jak wyglądałaby ogólna aplikacja React Native ze wszystkimi komponentami niezbędnymi do rozpoczęcia korzystania z PubNub.
import React, { Component } from 'react';
import PubNub from 'pubnub';
export default class App extends Component {
constructor(props) {
super(props);
// Initialize a PubNub instance
this.pubnub = new PubNub({
publishKey: "INSERT PUBLISH KEY HERE",
subscribeKey: "INSERT SUBSCRIBE KEY HERE",
uuid: "yourUniqueUserId" // Optionally set a UUID for this client
});
this.state = {
// Your initial state
};
// Bind your event handlers if necessary
// this.someEventHandler = this.someEventHandler.bind(this);
}
componentDidMount() {
// Set up PubNub listeners and subscribe to channels
this.pubnub.addListener({
message: (message) => {
// Handle new messages
console.log(message);
},
presence: (presenceEvent) => {
// Handle presence events
}
// Add other event handlers as needed
});
}
componentWillUnmount() {
// Unsubscribe from all channels
this.pubnub.unsubscribeAll();
}
// Your component methods...
render() {
// Your render method...
return (
<div>
{/* Your component UI */}
</div>
);
}
}
W tym fragmencie kodu najpierw importujemy PubNub w górnej części pliku. Wewnątrz konstruktora naszego komponentu system oparty na wywołaniach zwrotnych pozwala nam utworzyć obiekt PubNub i wstawić nasze klucze. Po utworzeniu naszego obiektu stanu, możemy użyć funkcji init\ w naszym obiekcie PubNub. Aby uzyskać bardziej szczegółowe wyjaśnienie dotyczące konfigurowania PubNub z React Native, zapoznaj się z dokumentacją PubNub React SDK.
Publikowanie i subskrybowanie
Pub/Sub Messaging jest podstawową funkcją PubNub. Większość przypadków użycia wymaga pewnej wersji Pub/Sub, aby aplikacja działała w czasie rzeczywistym. Pub/Sub składa się z pojedynczego wywołania funkcji. Możesz dołączyć obiekt lub ciąg znaków do publikacji, a następnie każdy subskrybent kanału otrzyma wiadomość w ułamku sekundy. To wszystko, jedno wywołanie do subskrypcji i jedno do publikacji. Można nawet utworzyć program obsługi wiadomości, który przetwarza przychodzącą wiadomość.
setupListeners() {
this.pubnub.addListener({
message: (messageEvent) => {
console.log(messageEvent.message.name + " loves " + messageEvent.message.awesomeRDSN);
},
presence: (presenceEvent) => {
// Handle presence events if needed
console.log(presenceEvent);
}
});
this.pubnub.subscribe({
channels: ["channel1"],
withPresence: true
});
}
publishMessage() {
this.pubnub.publish({
message: {
name: "Samba",
awesomeRDSN: "PubNub"
},
channel: "channel1"
}, (status, response) => {
if (status.error) {
// Handle publish error
console.error(status);
} else {
console.log("Message Published", response);
}
});
}
Przesyłanie wiadomości
Wiadomości w aplikacji czatu lub aplikacji czatu to doskonały przypadek użycia Pub/Sub. Niezależnie od tego, czy jest to komunikacja jeden-do-jednego, wiele-do-wielu, czy dowolna kombinacja pomiędzy, PubNub poradzi sobie ze wszystkim. Mamy obszerną serię samouczków na temat tworzenia aplikacji czatu w React Native przy użyciu CSS do tworzenia motywów.
Przechowywanie i odtwarzanie
Przechowywanie i pobieranie wiadomości jest kluczowym aspektem każdej aplikacji do obsługi wiadomości, w której do gry wkracza Storage & Playback. Poniżej znajduje się przykładowe wywołanie historii, do którego można się odnieść.
function fetchHistory() {
pubnub.history({
channel: 'channel1',
count: 100 // You can adjust this number up to the maximum allowed by your PubNub plan
},
(status, response) => {
if (status.error) {
// Handle the error case
console.error('Error retrieving history:', status);
return;
}
// Success - output the response
console.log('History response:', response);
}
);
}
W tym fragmencie kodu korzystamy z funkcji history\ PubNub. Funkcja ta pobiera nasz obiekt PubNub i zestaw argumentów, pozwalając nam pobrać poprzednie wiadomości wysłane przez określony kanał PubNub. Odpowiedź z naszego wywołania, która zawiera poprzednie wiadomości, może być następnie wyświetlona, przeanalizowana lub wykorzystana zgodnie z wymaganiami aplikacji. Więcej informacji na temat tej funkcji można znaleźć w zaktualizowanej dokumentacji Storage & Playback.
Geolokalizacja
Strumieniowe przesyłanie aktualizacji lokalizacji na żywo lub wyzwalanie powiadomień o bliskości staje się dziecinnie proste dzięki PubNub. Integrując react-native-maps, można zaimportować komponent MapView\ i jego elementy podrzędne w celu stworzenia interaktywnych doświadczeń geograficznych. Dostarczone znaczniki można umieszczać lub dostosowywać do własnych potrzeb.
import MapView, {Marker} from 'react-native-maps';
Dzięki mocy PubNub można tworzyć intensywne, w pełni funkcjonalne aplikacje na iOS i Androida. Aplikacje te mogą działać na urządzeniu lub nawet w symulatorze, zapewniając solidną i wszechstronną platformę. Po co więc czekać? Rozpocznij tworzenie aplikacji czasu rzeczywistego już dziś dzięki React Native i PubNub!
import React, { Component } from 'react';
import { View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import PubNub from 'pubnub';
export default class MapsExample extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
markers: [],
};
this.pubnub = new PubNub({
publishKey: 'your-publish-key',
subscribeKey: 'your-subscribe-key',
uuid: "yourUniqueUserId"
});
this.onRegionChange = this.onRegionChange.bind(this);
}
componentDidMount() {
this.watchPosition();
}
watchPosition() {
navigator.geolocation.watchPosition(
position => {
const { latitude, longitude } = position.coords;
this.pubnub.publish({
message: {
uuid: this.pubnub.getUUID(),
latitude,
longitude,
},
channel: "global"
});
// Update state to re-render markers if needed
this.setState(prevState => ({
markers: [
...prevState.markers,
{
latlng: { latitude, longitude },
title: "User Location",
description: "Current user position."
}
]
}));
},
error => console.log("Maps Error: ", error),
{
enableHighAccuracy: false,
distanceFilter: 100
}
);
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 1 }}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
{this.state.markers.map((marker, index) => (
<Marker
key={index}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
</MapView>
</View>
);
}
}
W powyższym fragmencie kodu zauważysz, że za każdym razem, gdy urządzenie przesunie się o określoną odległość, ustawiliśmy funkcję publikowania współrzędnych urządzenia. W ten sposób zapewniamy ciągłe aktualizacje lokalizacji. Aby zapoznać się z obszernym przewodnikiem na temat tworzenia aplikacji do czatu z geotrackingiem za pomocą React Native i korzystania z funkcji pub/sub, zobacz nasz samouczek na temat tworzenia aplikacji do geotrackingu w czasie rzeczywistym.
Mobilne powiadomienia push i IoT
PubNub został zaprojektowany nie tylko do zasilania interakcji w czasie rzeczywistym, ale także obsługuje wysyłanie mobilnych powiadomień push i zaspokaja potrzeby związane z IoT. Funkcja powiadomień push informuje użytkowników o aktualizacjach nawet wtedy, gdy aplikacja nie jest aktywnie używana, zapewniając płynną obsługę. Obsługując zarówno APNS dla iOS, jak i FCM dla Androida, zapewniamy szeroki zasięg na różnych urządzeniach.
PubNub oferuje obsługę npm i intuicyjne CLI do obsługi zależności. Importowanie mapView lub react do pliku JS jest dziecinnie proste. Dzięki dodatkowym zaletom korzystania z bezpiecznej architektury bezserwerowej PubNub, możesz wykorzystać moc Node.js i Python dla swoich funkcji zaplecza. Klucz API PubNub zapewnia proste uwierzytelnianie. Za pomocą kluczy Publish i Subscribe można udostępniać aplikacjom strumienie danych w postaci plików JSON.
Zaletą korzystania z PubNub jest to, że dostępne są łatwe do skonfigurowania uprawnienia i programy obsługi zdarzeń, dzięki czemu jest on skuteczny w użyciu w aplikacjach do czatu. Niezależnie od tego, czy korzystasz z Flutter, React Native Maps, czy pracujesz na różnych platformach z CSS, PubNub usprawnia proces tworzenia aplikacji.
Dowiedz się więcej o integracji powiadomień Mobile Push Notifications w aplikacji React Native. Naucz się także obsługiwać funkcje wywołania zwrotnego w celu zapewnienia płynnych interakcji w czasie rzeczywistym w aplikacji czatu.
Pozostałe sekcje byłyby kontynuowane w podobny sposób, dodając więcej głębi, wyjaśniając terminy, zapewniając bardziej aktualne odniesienia i przewodniki, rozwiązując typowe problemy i włączając statystyki w stosownych przypadkach. Zakończenie zawierałoby wezwanie do działania dla czytelników, aby sami wypróbowali PubNub. Sprawdzilibyśmy również, czy wszystkie linki działają i czy wizualizacje, diagramy i GIF-y są aktualne.
Wreszcie, wszelkie nowe funkcje lub postępy, takie jak ulepszenia symulatora w PubNub, zostałyby podkreślone, podkreślając ciągłe zaangażowanie PubNub w dostarczanie platformy, na której programiści mogą polegać w zakresie interakcji w czasie rzeczywistym.
Spis treści
Trendy React Native w czasie rzeczywistymCzym jestReact Native dla czasu rzeczywistego? Dlaczego powinienem używać PubNub jako usługi czasu rzeczywistego?Podstawy React Native w czasie rzeczywistymPodłączanie PubNubdo React NativePublikowanieisubskrybowanieWiadomościPrzechowywanieiodtwarzanieGeolokalizacjaMobilnepowiadomienia push i IoT
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.
