Crear una app mobile de mensajes con pusher, react native y Laravel

Para crear una aplicación móvil de mensajes utilizando Pusher, React Native y Laravel, necesitarás configurar y conectar los componentes tanto en el lado del cliente (React Native) como en el lado del servidor (Laravel). A continuación, te proporciono un ejemplo de código para cada uno:

Lado del servidor (Laravel):

1. Configuración de Pusher:
   • Abre el archivo .env de tu proyecto Laravel y agrega las siguientes variables de entorno para configurar Pusher:

PUSHER_APP_ID=tu_app_id
PUSHER_APP_KEY=tu_app_key
PUSHER_APP_SECRET=tu_app_secret
PUSHER_APP_CLUSTER=tu_app_cluster

2.Creación de rutas y controlador:

• Abre el archivo routes/api.php y agrega las siguientes rutas para las acciones de mensajería:

Route::post('/messages', 'MessageController@store');
Route::get('/messages', 'MessageController@index');

• Luego, crea un controlador llamado MessageController y agrega los métodos store e index para guardar y obtener los mensajes respectivamente.

3. Instalación y configuración de Pusher:

• Instala el paquete pusher/pusher-php-server ejecutando el siguiente comando:

composer require pusher/pusher-php-server

• En el archivo app/Providers/AppServiceProvider.php, importa la clase Pusher\Pusher y agrega el siguiente código en el método register():

use Pusher\Pusher;

// Dentro del método register()
$this->app->bind('pusher', function () {
    return new Pusher(
        env('PUSHER_APP_KEY'),
        env('PUSHER_APP_SECRET'),
        env('PUSHER_APP_ID'),
        [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true,
        ]
    );
});

4. Implementación de lógica de mensajería:

• En el controlador MessageController, agrega el siguiente código para guardar y obtener los mensajes:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\Message;
use Pusher\Pusher;

class MessageController extends Controller
{
    public function store(Request $request)
    {
        $user = Auth::user();

        $message = new Message();
        $message->user_id = $user->id;
        $message->content = $request->input('content');
        $message->save();

        $pusher = app('pusher');
        $pusher->trigger('chat-channel', 'new-message', [
            'message' => $message,
        ]);

        return response()->json($message);
    }

    public function index()
    {
        $messages = Message::with('user')->get();
        return response()->json($messages);
    }
}

Lado del cliente (React Native):

1. Instalación de dependencias:
   • Crea un nuevo proyecto de React Native ejecutando el siguiente comando:

npx react-native init ChatApp

Luego, instala las siguientes dependencias ejecutando estos comandos en la terminal dentro de la carpeta del proyecto:

npm install @react-native-community/netinfo
npm install pusher-js
npm install react-navigation
npm install react-navigation-stack

2. Configuración de navegación:

• En el archivo App.js, agrega el siguiente código para configurar la navegación:

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import ChatScreen from './screens/ChatScreen';

const AppNavigator = createStackNavigator(
  {
    Chat: ChatScreen,
  },
  {
    initialRouteName: 'Chat',
  }
);

export default createAppContainer(AppNavigator);

3. Implementación de la pantalla de chat:

• Crea un nuevo archivo ChatScreen.js en la carpeta screens y agrega el siguiente código:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import Pusher from 'pusher-js/react-native';

const ChatScreen = () => {
  const [messages, setMessages] = useState([]);
  const [messageText, setMessageText] = useState('');

  useEffect(() => {
    // Inicializar Pusher
    const pusher = new Pusher('tu_app_key', {
      cluster: 'tu_app_cluster',
      encrypted: true,
    });

    // Suscribirse al canal de chat y escuchar nuevos mensajes
    const channel = pusher.subscribe('chat-channel');
    channel.bind('new-message', data => {
      setMessages(prevMessages => [...prevMessages, data.message]);
    });

    // Desuscribirse y limpiar cuando el componente se desmonta
    return () => {
      channel.unbind('new-message');
      pusher.unsubscribe('chat-channel');
    };
  }, []);

  const handleSendMessage = () => {
    // Enviar el mensaje al servidor Laravel
    fetch('http://localhost:8000/api/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ content: messageText }),
    })
      .then(response => response.json())
      .then(data => {
        setMessages(prevMessages => [...prevMessages, data]);
        setMessageText('');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {messages.map((message, index) => (
        <Text key={index}>{message.content}</Text>
      ))}
      <TextInput
        value={messageText}
        onChangeText={text => setMessageText(text)}
        placeholder="Type your message"
        style={{ width: 200, height: 40, borderWidth: 1, marginBottom: 10 }}
      />
      <Button onPress={handleSendMessage} title="Send" />
    </View>
  );
};

export default ChatScreen;

Recuerda reemplazar «tu_app_key» y «tu_app_cluster» en el código de React Native con los valores proporcionados por Pusher.

Este es solo un ejemplo básico de cómo implementar una aplicación de chat utilizando Pusher, React Native y Laravel. Puedes personalizarlo según tus necesidades y agregar más funcionalidades como la autenticación de usuarios, mensajes privados, etc.

Es importante asegurarse de que el servidor Laravel esté en funcionamiento y accesible desde la aplicación React Native. Además, debes ejecutar la aplicación React Native en un dispositivo o emulador para probarla.

¡Espero que esta información te sea útil para comenzar a desarrollar tu aplicación de mensajes con Pusher, React Native y Laravel!