Conectar una Aplicación React Native a un WebSocket

Tiempo de lectura: < 1 minuto

Hoy aprenderemos cómo podemos conectar nuestra aplicación desarrollada en React Native con un WebSocket usando la librería https://www.npmjs.com/package/react-native-websocket

Configuración de la Aplicación React Native

1. Crear un Nuevo Proyecto React Native:
   Crea un nuevo proyecto React Native utilizando react-native-cli:

   npx react-native init MyReactNativeApp
   cd MyReactNativeApp

2. Instalar Dependencias de WebSocket:
   Instala la biblioteca react-native-websocket para manejar conexiones WebSocket en React Native:

   npm install --save react-native-websocket

3. Implementar Componente WebSocket en React Native:
   Reemplaza el contenido de App.js con el siguiente código:

   import React, { useState } from 'react';
   import { View, Text, TextInput, Button } from 'react-native';
   import { WebSocketProvider, useWebSocket } from 'react-native-websocket';

   function App() {
     const [message, setMessage] = useState('');
     const { sendMessage } = useWebSocket('ws://localhost:8000/ws/1');

     const handleMessageChange = (text) => {
       setMessage(text);
     };

     const handleSendMessage = () => {
       sendMessage({ message });
     };

     return (
       <View>
         <Text>WebSocket React Native</Text>
         <TextInput
           value={message}
           onChangeText={handleMessageChange}
           placeholder="Escribe un mensaje"
         />
         <Button onPress={handleSendMessage} title="Enviar Mensaje" />
       </View>
     );
   }

   function AppWithWebSocket() {
     return (
       <WebSocketProvider url="ws://localhost:8000/ws/1">
         <App />
       </WebSocketProvider>
     );
   }

   export default AppWithWebSocket;

Asegúrate de reemplazar ws://localhost:8000/ws/1 con la URL de tu servidor FastAPI.

4. Ejecutar la Aplicación React Native:
   Ejecuta la aplicación React Native:

   npx react-native run-android

o

   npx react-native run-ios

Visita http://localhost:3000 en tu navegador y verás la aplicación React Native. Puedes escribir mensajes, enviarlos y ver las respuestas del servidor FastAPI a través del WebSocket.