React Native in Echtzeit: Pub/Sub, Geolokalisierung, Anwesenheit

In der heutigen schnelllebigen Welt, in der unsere kollektive Aufmerksamkeitsspanne immer kürzer wird, steigt die Nachfrage nach nahtloser Interaktivität weiter an. Die Verzögerung, die durch das Hochfahren von Servern oder das Laden von Bildern verursacht wird, behindert ein echtes Echtzeit-Nutzererlebnis - eine Hürde, die mit Hilfe von serverlosen Architekturen überwunden werden kann. In unserer zunehmend medienkonsumierenden Gesellschaft fühlt sich das Warten auf das Laden einer Website oder eines IoT-Geräts archaisch an. Gedanken wie "Ich habe jetzt 5G-Konnektivität, warum sollte ich mich mit Abhängigkeiten herumschlagen müssen?" kommen den Nutzern häufig in den Sinn.

In diesem Blog möchte ich einen Ausblick auf die Zukunft von Anwendungen geben und aufzeigen, wie einfach es ist, Apps an die aktuellen Standards für Geschwindigkeit und Sicherheit anzupassen. Dies ist besonders für Fachleute relevant, die über die Wahl einer Sprache, eines Frameworks oder sogar etwas so Einfaches wie npm-Pakete für die Projektausführung nachdenken. Die Ära der Echtzeit rückt immer näher, und Systeme, die sich nicht mit dieser Geschwindigkeit weiterentwickeln, werden wahrscheinlich auf der Strecke bleiben.

Die Eskalation dieser Echtzeitumgebung hat das Technologie-Ökosystem revolutioniert. Jeder neue technologische Fortschritt bringt uns einen Schritt näher an die Erzielung schnellerer Ergebnisse und die nahtlose Integration unserer digitalen Erfahrungen. Für den Laien bedeutet dies, dass der Standort eines Uber-Fahrers durch Event-Handler und Push-Benachrichtigungen in Echtzeit bekannt ist. Für Entwickler öffnet es die Tür zu einem schnellen und reibungslosen vernetzten Erlebnis, das Geräte weltweit über ein Pub/Sub-Modell verbindet.

React Native-Echtzeit-Trends

Das Aufkommen moderner Verbraucher, die sofortige Daten verlangen, hat zusammen mit den Möglichkeiten von Node.js die Zeiten hinter sich gelassen, in denen es akzeptabel war, tagelang auf Nachrichten zu warten. Wenn ein Dienst nicht sofort verfügbar ist, suchen die Nutzer schnell nach Alternativen.

Da weltweit neue Verbindungsgeschwindigkeiten zur Verfügung stehen, nimmt die Zahl der Menschen, die an dieser interaktiven Echtzeitwelt teilnehmen, ständig zu. Neben dem Wachstum von Ridesharing- und Essenslieferdiensten in den USA erleben diese Branchen auch in Südostasien und Indien einen Boom. Lebensmittel-Lieferdienste wie Swiggy und Zomato, die in Indien sehr beliebt sind, führen täglich über 500.000 Lieferungen aus. Sowohl diese Unternehmen als auch ihre Kunden verlassen sich in hohem Maße auf Echtzeit-Json-Datenströme, die von Python unterstützt werden. Es ist klar, dass sich die Bereitstellung dieser Dienste von einem experimentellen Projekt zu einem integralen Bestandteil des täglichen Lebens auf der ganzen Welt entwickelt.

Mit der zunehmenden Verbreitung von 5G und den Fortschritten bei Web- und Mobilanwendungen ist es von größter Bedeutung, dass die Datenübertragungsgeschwindigkeiten unserer Software verbessert werden, um mögliche Engpässe zu vermeiden. Anwendungen können jetzt in Echtzeit aktualisiert werden und so die Konnektivität der Menschen fördern. React Native ist mit seiner Reaktionsfähigkeit in Echtzeit eine ideale Lösung, um unserer zunehmenden Abhängigkeit von der Technologie gerecht zu werden.

Was ist React Native for Real Time?

Als Reaktion auf den Bedarf an Geschwindigkeit haben die Facebook-Entwickler ein JavaScript-Framework namens React und die anschließende Verwendung einer JS-Datei eingeführt. React ermöglicht die Erstellung schneller und leichtgewichtiger Webseiten mithilfe von JavaScript und der JavaScript Syntax Extension (JSX). JSX erleichtert die Gestaltung von Benutzeroberflächen in einem XML-ähnlichen Format unter Beibehaltung der Fähigkeiten von JavaScript. Darüber hinaus ermöglicht React gezielte Aktualisierungen von Webseiten, so dass die Seite bei Änderungen nicht mehr komplett neu geladen werden muss, was die Geschwindigkeit von Webseiten erhöht und das Nutzererlebnis verbessert.

Nach der Entwicklung von React, das speziell für Webseiten entwickelt wurde, wurde seine Komponentenstruktur auf React Native erweitert. Diese Technologie ermöglicht die Erstellung mobiler Anwendungen nach ähnlichen Prinzipien wie React. Sie verarbeitet JavaScript und führt es direkt auf dem mobilen Gerät aus, wobei jede Komponente über eine Bridge mit einer nativen iOS- oder Android-Komponente verbunden wird. Bridges erleichtern es dem laufenden JavaScript, Informationen an native Komponenten weiterzugeben.

React Native nutzt eine Komponentenstruktur, in der Komponenten andere Komponenten enthalten können. Wenn sich die Daten einer bestimmten Komponente ändern, wird nur diese Komponente neu gerendert. Dieses selektive Re-Rendering macht Anwendungen und Webseiten schneller, flüssiger und effizienter. Dank dieses Systems sind React und React Native hervorragende Ressourcen für die Erstellung von Echtzeitanwendungen.

React Native ist zwar eine ideale Grundlage für eine Echtzeit-Chat-Anwendung, bietet jedoch nicht die erforderlichen Verbindungsdienste. Hier schließt PubNub die Lücke, indem es den Benutzern ein nahtloses und sicheres Verbindungserlebnis bietet, das durch API-Schlüssel und sichere Authentifizierungsmechanismen ermöglicht wird.

Warum sollte ich PubNub als Echtzeitdienst verwenden?

Ausgehend von React Native als Basis-App benötigen wir einen Mechanismus, um eine Verbindung zwischen unseren Geräten oder Benutzern herzustellen. Hier kommt PubNub als passende Lösung ins Spiel. Es verbindet nicht nur Benutzer, sondern auch schnell. PubNubs globales Netzwerk von Points of Presence (oder PoPs, d.h. strategisch platzierte Rechenzentren auf der ganzen Welt, die die Datenlokalisierung verbessern und die Latenzzeit reduzieren) ermöglicht es, einen wirklich globalen Service zu liefern. In Verbindung mit React Native können wir die Nutzer in einem gemeinsamen Erlebnis verbinden.

PubNub gehört zu den führenden Anbietern von Echtzeit-Netzwerken mit Pub/Sub (publish/subscribe) und vielen anderen Funktionen. PubNub bietet bis zu 1.000.000 kostenlose Nachrichten pro Monat! Abgesehen von diesem großzügigen kostenlosen Angebot ist PubNub einfach zu benutzen und ermöglicht es Ihnen, etwas Startcode in Ihr Projekt einzubauen, eine Verbindung herzustellen und Pub/Sub-Nachrichten mit minimalem Aufwand zu versenden.

Sie müssen sich nicht mehr um die Einrichtung von Servern oder den Umgang mit mehreren Verbindungen kümmern. PubNub übernimmt die Verantwortung für Ihr Backend und informiert Ihre Kunden über die Informationen, die für sie wichtig sind. Es bietet eine solide Pub/Sub-Infrastruktur, auf die Sie aufbauen können. Senden Sie einfach Ihre Daten, und PubNub sorgt dafür, dass sie jeden Benutzer erreichen. In diesem Zusammenhang werden wir die Pub-Sub-, History- und Presence-Funktionen von PubNub untersuchen.

In den folgenden Abschnitten werden wir den Startup-Prozess besprechen und uns mit einigen Code-Snippets beschäftigen, die für gängige React Native-Anwendungsfälle nützlich sind.

React Native-Grundlagen in Echtzeit

Wir werden einige Funktionen von PubNub besprechen, die Sie in die Lage versetzen, allgemeine Funktionen für Echtzeit-Apps zu erstellen. In jedem Beispiel werden wir Code-Schnipsel und Links zu weiteren Informationen bereitstellen.

Verbinden von PubNub mit React Native

Geben Sie den folgenden Code in Ihr Terminal ein, um PubNub in Ihrem React Native-Projekt zu installieren. Dadurch werden auch die Abhängigkeiten nativ installiert.

npm install pubnub

Das folgende Beispiel zeigt, wie eine allgemeine React Native App mit allen notwendigen Komponenten aussehen würde, um PubNub zu nutzen.

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>
    );
  }
}

In diesem Codeschnipsel importieren wir zunächst PubNub am Anfang der Datei. Innerhalb des Konstruktors unserer Komponente erlaubt uns ein Callback-basiertes System, das PubNub-Objekt zu erstellen und unsere Schlüssel einzufügen. Nachdem wir unser Statusobjekt erstellt haben, können wir die Funktion init\ in unserem PubNub-Objekt verwenden. Eine detailliertere Erklärung zur Einrichtung von PubNub mit React Native finden Sie in der PubNub React SDK Dokumentation.

Veröffentlichen und Abonnieren

Pub/Sub Messaging ist eine Kernfunktion von PubNub. Die meisten Anwendungsfälle erfordern eine Version von Pub/Sub, um eine App in Echtzeit zu betreiben. Pub/Sub besteht aus einem einzigen Funktionsaufruf. Sie können ein Objekt oder eine Zeichenkette in die Veröffentlichung einbeziehen, und jeder, der den Kanal abonniert hat, erhält die Nachricht in einem Bruchteil einer Sekunde. Das war's, ein Aufruf zum Abonnieren und einer zum Veröffentlichen. Sie können sogar einen Message-Handler erstellen, der die eingehende Nachricht verarbeitet.

 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);
      }
    });
  }

Nachrichtenübermittlung

Die Nachrichtenübermittlung in einer Chat-App oder Chat-Anwendung ist ein ausgezeichneter Anwendungsfall für Pub/Sub. Ob eins-zu-eins, viele-zu-viele oder eine beliebige Kombination dazwischen, PubNub kann alles verarbeiten. Wir haben eine umfassende Tutorial-Serie zur Erstellung einer Chat-App in React Native mit CSS für das Theming.

Speicherung & Wiedergabe

Das Speichern und Abrufen von Nachrichten ist ein wichtiger Aspekt jeder Messaging-App. Nachfolgend finden Sie ein Beispiel für einen History-Aufruf, auf den Sie sich beziehen können.

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);
    }
  );
}

In diesem Codeschnipsel nutzen wir die Funktion "history" von PubNub. Diese Funktion nimmt unser PubNub-Objekt und eine Reihe von Argumenten auf und ermöglicht es uns, frühere Nachrichten abzurufen, die über einen bestimmten PubNub-Kanal gesendet wurden. Die Antwort unseres Aufrufs, die die vergangenen Nachrichten enthält, kann dann angezeigt, geparst oder verwendet werden, wie es Ihre Anwendung erfordert. Weitere Informationen zu dieser Funktion finden Sie in der aktualisierten Dokumentation zu Storage & Playback.

Geolokalisierung

Mit PubNub wird das Streaming von Live-Standort-Updates oder das Auslösen von Annäherungsbenachrichtigungen ein Kinderspiel. Durch die Integration von react-native-maps können Sie die Komponente MapView\ und ihre Kinder importieren, um interaktive geografische Erfahrungen zu schaffen. Die bereitgestellten Marker können je nach Anwendungsfall platziert oder angepasst werden.

import MapView, {Marker} from 'react-native-maps';

Mit der Leistung von PubNub können Sie intensive, voll funktionsfähige iOS- und Android-Anwendungen erstellen. Diese Anwendungen können auf Ihrem Gerät oder sogar in einem Simulator ausgeführt werden und bieten eine robuste und vielseitige Plattform. Warum also warten? Beginnen Sie noch heute mit der Erstellung Ihrer Echtzeitanwendung mit React Native und 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>
    );
  }
}

Im obigen Codeschnipsel sehen Sie, dass wir jedes Mal, wenn sich das Gerät um eine bestimmte Strecke bewegt, eine Funktion zur Veröffentlichung der Gerätekoordinaten eingerichtet haben. Auf diese Weise stellen wir eine kontinuierliche Aktualisierung des Standorts sicher. Eine umfassende Anleitung zur Erstellung einer Geotracking-Chat-App mit React Native und der Verwendung der Pub/Sub-Funktion finden Sie in unserem Tutorial zum Erstellen von Echtzeit-Geotracking-Apps.

Mobile Push-Benachrichtigungen und IoT

PubNub wurde nicht nur für Echtzeit-Interaktionen entwickelt, sondern unterstützt auch das Versenden von mobilen Push-Benachrichtigungen und erfüllt IoT-bezogene Anforderungen. Die Push-Benachrichtigungsfunktion hält Ihre Benutzer über Updates auf dem Laufenden, auch wenn Ihre App nicht aktiv genutzt wird, und bietet so eine nahtlose Benutzererfahrung. Durch die Unterstützung sowohl von APNS für iOS als auch von FCM für Android stellen wir eine breite Abdeckung über alle Geräte hinweg sicher.

PubNub bietet npm-Unterstützung und eine intuitive CLI für den Umgang mit Abhängigkeiten. Der Import von mapView oder react in Ihre JS-Datei ist ein Kinderspiel. Mit den zusätzlichen Vorteilen der sicheren serverlosen Architektur von PubNub können Sie die Leistungsfähigkeit von Node.js und Python für Ihre Backend-Funktionalitäten nutzen. Der PubNub-API-Schlüssel ermöglicht eine einfache Authentifizierung. Verwenden Sie die Schlüssel Publish und Subscribe, um Datenströme in Form von JSON-Dateien mit Ihren Anwendungen zu teilen.

Ein Vorteil der Verwendung von PubNub ist, dass es einfach zu konfigurierende Berechtigungen und Event-Handler gibt, was es für den Einsatz in Ihren Chat-Anwendungen effektiv macht. Ganz gleich, ob Sie Flutter, React Native Maps verwenden oder plattformübergreifend mit CSS arbeiten, PubNub macht den Prozess der App-Entwicklung effizient.

Erfahren Sie mehr über die Integration von Mobile Push Notifications in Ihre React Native Anwendung. Lernen Sie außerdem den Umgang mit Callback-Funktionen für reibungslose Echtzeit-Interaktionen in Ihrer Chat-Anwendung.

Die verbleibenden Abschnitte werden in ähnlicher Weise fortgesetzt, wobei sie mehr Tiefe bieten, Begriffe klären, aktuellere Referenzen und Anleitungen bereitstellen, häufige Probleme beheben und gegebenenfalls Statistiken einbeziehen. Der Schluss würde eine Aufforderung an die Leser enthalten, PubNub selbst auszuprobieren. Wir würden auch überprüfen, ob alle Links funktionieren und ob die Grafiken, Diagramme und GIFs aktuell sind.

Schließlich werden neue Funktionen oder Fortschritte wie Verbesserungen des Simulators in PubNub hervorgehoben, um das kontinuierliche Engagement von PubNub für die Bereitstellung einer Plattform zu unterstreichen, auf die sich Entwickler für ihre Echtzeit-Interaktionen verlassen können.

Inhalt

React Native Echtzeit-TrendsWasist React Native für Echtzeit?Warum sollte ich PubNub als Echtzeit-Service nutzen?Grundlagen von React Native in EchtzeitVerbinden vonPubNub mit React NativeVeröffentlichenundAbonnierenNachrichtenSpeichern&WiedergebenGeolocationMobilePush-Benachrichtigungen und IoT

Wie kann PubNub Ihnen helfen?

Dieser Artikel wurde ursprünglich auf PubNub.com veröffentlicht.

Unsere Plattform unterstützt Entwickler bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben

Sehen Sie sich die Live Tour an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten

Melden Sie sich für einen PubNub-Account an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie

Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK