WebSockets en React Native para apps en tiempo real

Tiempo real en apps móviles

Apps de chat, tracking de delivery, dashboards en tiempo real, juegos multijugador — todas requieren comunicación bidireccional instantánea. La solución: WebSockets, que mantienen una conexión abierta entre el cliente y el servidor. En Deepyze implementamos tiempo real con Socket.io.

WebSocket nativo vs Socket.io

React Native soporta la API WebSocket nativa. Socket.io es una librería sobre WebSockets que agrega: reconexión automática, rooms y namespaces, fallback a polling HTTP si WebSockets no está disponible, y mejor manejo de eventos.

Setup con Socket.io

npm install socket.io-client

Hook de conexión

import { useEffect, useRef, useState } from 'react';
import { io } from 'socket.io-client';

export function useSocket(url) {
  const socketRef = useRef(null);
  const [conectado, setConectado] = useState(false);

  useEffect(() => {
    socketRef.current = io(url, {
      transports: ['websocket'],
      auth: { token: getAuthToken() },
    });

    socketRef.current.on('connect', () => setConectado(true));
    socketRef.current.on('disconnect', () => setConectado(false));

    return () => socketRef.current?.disconnect();
  }, [url]);

  return { socket: socketRef.current, conectado };
}

Chat básico

function Chat({ roomId }) {
  const { socket } = useSocket('https://tu-servidor.com');
  const [mensajes, setMensajes] = useState([]);

  useEffect(() => {
    socket?.emit('join', roomId);
    socket?.on('mensaje', (msg) => {
      setMensajes(prev => [...prev, msg]);
    });
    return () => socket?.off('mensaje');
  }, [socket, roomId]);

  const enviar = (texto) => {
    socket?.emit('mensaje', { roomId, texto, timestamp: Date.now() });
  };
}

Manejo de reconexión

Los móviles pierden conectividad frecuentemente. Socket.io maneja la reconexión automáticamente, pero necesitás re-sincronizar el estado al reconectar: pedir los mensajes perdidos desde el último timestamp recibido.

¿Necesitás tiempo real en tu app? Hablá con Deepyze.