Crear una aplicación de chat móvil en React Native

Esta es la segunda parte del artículo (la primera aquí ) dedicada a crear chat usando apollo-server-koa y react-native. Cubrirá la creación de una aplicación de chat móvil. En la parte anterior, ya se creó un back-end para este chat, para obtener más detalles sobre la descripción de este proceso, puede encontrar el enlace .

En primer lugar, usando expo-cli, cree un nuevo proyecto de expo, para esto ejecutamos el comando en la terminal:

expo init 

Y siga todos los pasos del asistente para crear una aplicación vacía.

Después de recibir la aplicación creada, debe agregar las dependencias que se utilizarán en el futuro:

yarn add 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

Hecho, el siguiente paso es conectar y configurar el cliente apollo para que funcione con nuestro backend. Para hacer esto, agregue el siguiente código a App.js. Noto que aquí configuraremos apollo para conectarse a nuestro backend a través de protocolos http y websocket, así como también crearemos un caché en memoria para apollo, así como crearemos 2 rutas: una para el formulario de inicio de sesión y la segunda para la página de chat.

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

No describiré la creación del formulario en detalle, creo que ya lo ha visto varias veces, solo diré que el código del formulario de inicio de sesión se puede encontrar aquí , por simplicidad decidí no agregar autorización y un campo de contraseña, pero puede hacerlo fácilmente usted mismo .

Me detendré en un punto interesante:

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

Aquí, se llama la mutación de agregar / recibir un usuario por su nombre de usuario, así como la grabación del resultado en el caché para su uso posterior en otras partes de la aplicación.

Después de implementar el formulario de inicio de sesión, el siguiente elemento es el chat.

Nuevamente, no nos detendremos en el diseño, el código completo se puede encontrar aquí .

Utilizamos la funcionalidad de suscripción para recibir notificaciones sobre un nuevo mensaje en el chat y procesamos solo ese hilo cuando el mensaje no fue creado por el usuario actual, porque de lo contrario, el mensaje ya irá al caché de 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 ] } }); } } }); 

Otro punto interesante, al descargar un chat con mensajes existentes, el mensaje más antiguo se mostrará en la parte superior de la pantalla, esto es inusual para los usuarios, haremos que el comportamiento de la aplicación sea más natural, para esto agregamos las siguientes líneas de código:

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

Ahora, al recibir los datos iniciales o al agregar un nuevo mensaje, el chat se desplazará sin problemas hasta el último mensaje.

El resto del código no tiene sentido considerarlo, ya que es similar a lo que ya se ha hecho, la implementación de la aplicación se almacena en el repositorio .

Después de que se haya implementado toda la funcionalidad de la aplicación, solo queda probar la operatividad de la aplicación junto con el backend del artículo anterior. La aplicación lanzada en el emulador se ve así: