Erstellen einer mobilen Chat-Anwendung in React Native

Dies ist der zweite Teil des Artikels (der erste hier ), der sich mit dem Erstellen von Chats mit Apollo-Server-Koa und React-Native befasst. Es wird die Erstellung einer mobilen Chat-Anwendung behandelt. Im vorherigen Teil wurde bereits ein Backend für diesen Chat erstellt. Weitere Informationen zur Beschreibung dieses Vorgangs finden Sie unter dem Link .

Erstellen Sie zunächst mit expo-cli ein neues expo-Projekt. Dazu führen wir den Befehl im Terminal aus:

expo init 

Befolgen Sie alle Schritte des Assistenten, um eine leere Anwendung zu erstellen.

Nachdem wir die erstellte Anwendung erhalten haben, müssen Sie die Abhängigkeiten hinzufügen, die in Zukunft verwendet werden:

Garn hinzufügen Apollo / React-Hooks Apollo-Cache-Speicher Apollo-Client Apollo-Link-http Apollo-Link-Ws Apollo-Dienstprogramme Graphql Graphql-Tag native Basis React-Router-native Abonnements-Transport-ws

Der nächste Schritt besteht darin, eine Verbindung herzustellen und den Apollo-Client für die Arbeit mit unserem Backend zu konfigurieren. Fügen Sie dazu den folgenden Code zu App.js hinzu. Ich stelle fest, dass wir hier Apollo so konfigurieren, dass es über http- und Websocket-Protokolle eine Verbindung zu unserem Backend herstellt, einen In-Memory-Cache für Apollo erstellt und zwei Routen erstellt: eine für das Anmeldeformular und die zweite für die Chat-Seite.

 get link() { const BACKEND_URL = Platform.OS === 'ios' ? 'localhost:3000' : '10.0.2.2:3000'; const httpLink = new HttpLink({ uri: `http://${BACKEND_URL}/graphql` }); const wsLink = new WebSocketLink({ uri: `ws://${BACKEND_URL}/graphql`, options: { reconnect: true } }); return split( // split based on operation type ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); } async componentDidMount() { const cache = new InMemoryCache(); this.client = new ApolloClient({ link: this.link, cache }); …. } render() { return ( ... <ApolloProvider client={this.client}> <NativeRouter> <Route exact path="/" component={UsernameForm}/> <Route path="/chat" component={Chat}/> </NativeRouter> </ApolloProvider> ) } 

Ich werde die Erstellung des Formulars nicht im Detail beschreiben. Ich denke, Sie haben dies bereits mehrmals gesehen. Ich werde nur sagen, dass der Code des Anmeldeformulars hier zu finden ist . Der Einfachheit halber habe ich beschlossen, keine Autorisierung und kein Kennwortfeld hinzuzufügen. Wenn Sie möchten, können Sie dies jedoch problemlos selbst tun .

Ich werde auf einen interessanten Punkt eingehen:

 const [ findOrCreateUser ] = useMutation(FIND_OR_CREATE_USER, { update(cache, { data: { findOrCreateUser: { id, username } } }) { cache.writeQuery({ query: GET_CURRENT_USER, data: { id, username }, }); } }); 

Hier wird die Mutation zum Hinzufügen / Empfangen eines Benutzers anhand seines Benutzernamens sowie zum Aufzeichnen des Ergebnisses im Cache für die weitere Verwendung in anderen Teilen der Anwendung aufgerufen.

Nachdem das Anmeldeformular implementiert wurde, ist der nächste Punkt der Chat.

Auch hier werden wir uns nicht mit dem Layout befassen, den gesamten Code finden Sie hier .

Wir verwenden die Abonnementfunktion, um Benachrichtigungen über eine neue Chat-Nachricht zu erhalten und nur diesen Thread zu verarbeiten, wenn die Nachricht nicht vom aktuellen Benutzer erstellt wurde. Andernfalls wird die Nachricht bereits in den Apollo-Cache verschoben:

 useSubscription(MESSAGE_CREATED, { onSubscriptionData: ({ client, subscriptionData: { data: { messageCreated } } }) => { const { getLast100Messages } = client.readQuery({ query: GET_LAST_100_MESSAGES }); if (messageCreated.user.id !== id) { client.writeQuery({ query: GET_LAST_100_MESSAGES, data: { getLast100Messages: [ ...getLast100Messages, messageCreated ] } }); } } }); 

Ein weiterer interessanter Punkt: Wenn Sie einen Chat mit vorhandenen Nachrichten herunterladen, wird die älteste Nachricht oben auf dem Bildschirm angezeigt. Dies ist für Benutzer ungewöhnlich. Wir werden das Anwendungsverhalten natürlicher gestalten. Dazu fügen wir die folgenden Codezeilen hinzu:

 const scrollEl = useRef(null); … <Content ref={scrollEl} onContentSizeChange={() => { scrollEl.current.wrappedInstance.scrollToEnd({ animated: true }); }} > 

Wenn Sie nun die ersten Daten empfangen oder eine neue Nachricht hinzufügen, wird der Chat reibungslos zur allerletzten Nachricht gescrollt.

Der Rest des Codes ist nicht sinnvoll zu berücksichtigen, da die Anwendungsimplementierung ähnlich wie die bereits durchgeführten im Repository gespeichert ist.

Nachdem alle Funktionen der Anwendung implementiert wurden, müssen nur noch die Funktionsfähigkeit der Anwendung zusammen mit dem Backend aus dem vorherigen Artikel getestet werden. Die auf dem Emulator gestartete Anwendung sieht folgendermaßen aus: