Création d'une application de chat mobile sur React Native

Ceci est la deuxième partie de l'article (la première ici ) consacrée à la création de chat en utilisant apollo-server-koa et react-native. Il couvrira la création d'une application de chat mobile. Dans la partie précédente, un backend a déjà été créé pour ce chat, pour plus de détails sur la description de ce processus, vous pouvez trouver le lien .

Tout d'abord, en utilisant expo-cli, créez un nouveau projet expo, pour cela nous exécutons la commande dans le terminal:

expo init 

Et suivez toutes les étapes de l'assistant pour créer une application vide.

Après avoir reçu l'application créée, vous devez ajouter les dépendances qui seront utilisées à l'avenir:

fil ajouter apollo / react-hooks apollo-cache-inmemory apollo-client apollo-link-http apollo-link-ws apollo-utilities graphql graphql-tag native-base react-router-native subscriptions-transport-ws

Terminé, l'étape suivante consiste à connecter et configurer le client apollo pour qu'il fonctionne avec notre backend. Pour ce faire, ajoutez le code ci-dessous à App.js. Je note qu'ici, nous allons configurer apollo pour se connecter à notre backend via les protocoles http et websocket, ainsi que créer un cache en mémoire pour apollo, ainsi que créer 2 itinéraires: un pour le formulaire de connexion et le second pour la page de discussion.

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

Je ne décrirai pas en détail la création du formulaire, je pense que vous l'avez déjà vu plusieurs fois, je dirai seulement que le code du formulaire de connexion peut être trouvé ici , pour plus de simplicité j'ai décidé de ne pas ajouter d'autorisation et un champ de mot de passe, cependant, si vous le souhaitez, vous pouvez facilement le faire vous-même .

Je m'attarderai sur un point intéressant:

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

Ici, la mutation consistant à ajouter / recevoir un utilisateur par son nom d'utilisateur, ainsi qu'à enregistrer le résultat dans le cache pour son utilisation ultérieure dans d'autres parties de l'application, est appelée.

Une fois le formulaire de connexion implémenté, l'élément suivant est le chat.

Encore une fois, nous ne nous attarderons pas sur la mise en page, le code entier peut être trouvé ici .

Nous utilisons la fonctionnalité d'abonnement pour recevoir des notifications sur un nouveau message de discussion et traiter uniquement ce thread lorsque le message n'a pas été créé par l'utilisateur actuel, car sinon, le message ira déjà dans le cache apollo:

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

Un autre point intéressant, lorsque vous téléchargez un chat avec des messages existants, le message le plus ancien sera affiché en haut de l'écran, ce qui est inhabituel pour les utilisateurs, nous rendrons le comportement de l'application plus naturel, pour cela nous ajoutons les lignes de code suivantes:

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

Désormais, lors de la réception des données initiales ou lors de l'ajout d'un nouveau message, le chat défile en douceur jusqu'au dernier message.

Le reste du code n'a pas de sens à considérer, car il est similaire à ce qui a déjà été fait, l'implémentation de l'application est stockée dans le référentiel .

Une fois que toutes les fonctionnalités de l'application ont été implémentées, il ne reste plus qu'à tester l'opérabilité de l'application avec le backend de l'article précédent. L'application lancée sur l'émulateur ressemble à ceci: