How to use Laravel Echo for broadcasting events with ReactJS



Image not found!!

Laravel Echo is a powerful tool that allows you to work with real-time events and broadcasting in Laravel applications. When using ReactJS as your frontend framework, you can integrate Laravel Echo to listen for and react to events broadcasted from the Laravel backend.

Here's a step-by-step guide on how to use Laravel Echo for broadcasting events with ReactJS:

  1. Install Laravel Echo and Pusher: Ensure that you have Laravel Echo and a broadcasting service like Pusher set up in your Laravel application. You can install them using Composer:

    bash
    composer require pusher/pusher-php-server

    Also, configure your .env file with your Pusher credentials:

    env
    BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_APP_CLUSTER=your-app-cluster

  2. Install Echo and Socket.IO for React: You will need to install the necessary packages for Laravel Echo and Socket.IO in your React application:

    bash
    npm install --save laravel-echo socket.io-client

  3. Configure Echo in React: In your React application, set up Laravel Echo by creating an Echo instance in a central location (e.g., src/echo.js):

    jsx
    import Echo from 'laravel-echo';
import io from 'socket.io-client';

const echo = new Echo({
  broadcaster: 'socket.io',
  host: window.location.hostname + ':6001', // Your Laravel Echo server's host
  client: io,
});

export default echo;

  4. Use Echo in React Components: Now, you can use the echo instance in your React components to listen for events. For example, in a React component:

    jsx
    import React, { useEffect } from 'react';
import echo from './echo';

const MyComponent = () => {
  useEffect(() => {
    echo.channel('my-channel')
      .listen('MyEvent', (event) => {
        console.log('Event received:', event);
        // Handle the event data here
      });
  }, []);

  return (
    <div>
      {/* Your component content */}
    </div>
  );
};

export default MyComponent;

  5. Broadcast Events in Laravel: In your Laravel application, whenever you want to broadcast an event, you can use Laravel's broadcasting features. For example, in a controller or other relevant part of your code:

    php
    use Illuminate\Support\Facades\Broadcast;

// ...

public function someAction()
{
    // Your action logic

    $data = ['key' => 'value']; // Data to be sent with the event
    Broadcast::event(new MyEvent($data));

    // ...
}

    Ensure that you have created the event class (MyEvent in this example) that extends ShouldBroadcast.

  6. Run Laravel Echo Server: Start the Laravel Echo server to handle broadcasting. Run the following command in your Laravel project:

    bash
    php artisan websockets:serve

    This assumes you have the beyondcode/laravel-websockets package installed.

  7. Run React Application: Start your React application:

    bash
    npm start

    Ensure that your React application is running on the same domain as your Laravel application to avoid cross-origin issues.

Now, when events are broadcasted from your Laravel backend, your React components should receive and handle them appropriately. Adjust the event names, channels, and data according to your application's needs.

Category List