React Native: Peer-to-Peer con react-native-transfer-big-files

Os traigo la biblioteca para react-native perfecta para la transferencia de archivos o mensajes entre dos dispositivos dentro de una misma red. Con react-native-transfer-big-files podrás encontrar pares dentro de una misma red, enviar mensajes y enviar archivos sin importar su tamaño. Veamos como hacerlo.

¡Empecemos!

Lo primero que debemos hacer evidentemente es instalar la bilbioteca

npm install @arekjaar/react-native-transfer-big-files
//or
yarn add @arekjaar/react-native-transfer-big-files

Descubrir pares

Importamos las funciones discoverPeers, subcribeDiscoverPeers y stopDiscoverPeers.

import { 
  discoverPeers,
  subscribeDiscoverPeer,
  stopDiscoverPeers } from '@arekjaar/react-native-transfer-big-files';

subcribeDiscoverPeers: Se actualizara cada vez que un para se conecte o se desconecte de la red. Informara siempre de los pares conectados.

La información de cada par sera: deviceName, modelName, productName, type y ipAddress.

Type es de tipo numerico correspondiente a esta tabla:

0 -> UNKNOWN

1 -> PHONE

2 -> TABLET

3 -> TV

const discoverPeerSubscription = subscribeDiscoverPeer((peers)=>{
      setPeers(JSON.parse(peers))
    })

discoverPeers: Enviara información del dispositivo a la red para que lo escuche subcribeDiscoverPeers.

discoverPeers()

stopDiscoverPeers: Dejara de poder recivir mensajes y informara al resto de pares que se desconecta.

stopDiscoverPeers()

Preparamos nuestra app para poder recivir mensajes y archivos.

import {
  receiveMessage,
  receiveFile,
  subscribeOnFileCopyEnd,
  subscribeOnProgressUpdates } from 'react-native-transfer-big-files';

receiveMessage: Donde recibiremos el mensaje enviado desde otro dispositivo.

const message:string = await receiveMessage() as string;
    setMessage(message)

receiveFile: Activaremos la recepción de archivos informando la ruta y el nombre del archivo a guardar. Con el ultimo parámetro indicamos si queremos que el archivo se incluya en galería.

receiveFile(`/data/data/com.transferbigfilesexample/cache/`, 'document.pdf', true)

subscribeOnProgressUpdates: Con este método controlaremos el progresso de la transferencia del archivo.

const progressUpdatesSubscription = subscribeOnProgressUpdates(
      setProgress,
    );

subscribeOnFileCopyEnd: Se lanzara cuando el archivo sea recibido y guardado.

const copyFileEndSubscription = subscribeOnFileCopyEnd(
      setCopyFileEnd,
    );

Una vez hayamos descubierto pares podremos enviar mensajes y archivos con los metodos, sendMessageTo y sendFileTo.

import {
  sendMessageTo,
  sendFileTo } from 'react-native-transfer-big-files';

sendMessageTo: Para enviar un mensaje se deberá informar la ip del dispositivo al que queramos enviar y el mensaje.

sendMessageTo('Hello World', ipAddress)

sendFileTo: Con este método se podrá enviar un archivo a otro dispositivo dentro de la red para cual será necesario pasar el path local del archivo y la ip del dispositivo al que se quiere enviar.

sendFileTo('/data/data/com.transferbigfilesexample/cache/document.pdf', ipAddress)

¡Ya lo tenemos!

Ya sabes que si te ha gustado el artículo me puedes invitar a un café ;-)

https://ko-fi.com/arekjaar

Recuerda seguir la siguiente publicación para más artículos sobre React Native con Expo

Ract Native con Expo