How to implement Laravel Echo with Laravel Echo Server for broadcasting events



Image not found!!

Laravel Echo is a JavaScript library that makes it easy to work with WebSockets and broadcasting events in a Laravel application. Laravel Echo Server is a Node.js server that can be used to broadcast events to the Laravel Echo library. Here's a step-by-step guide on how to implement Laravel Echo with Laravel Echo Server:

1. Install Laravel Echo and Laravel Echo Server

bash
# Install Laravel Echo
npm install --save laravel-echo pusher-js

# Install Laravel Echo Server globally
npm install -g laravel-echo-server

2. Configure Laravel for Broadcasting

In your Laravel application, open the .env file and set the broadcasting driver to pusher:

env
BROADCAST_DRIVER=pusher

Next, configure the Pusher credentials in the same file:

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

3. Configure Laravel Echo

In your Laravel application, create a new file resources/js/bootstrap.js (if it doesn't exist) and add the following:

javascript
import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
});

4. Include Laravel Echo in Your Layout

Include the Laravel Echo and Bootstrap.js file in your layout or view:

html
<script src="{{ asset('js/bootstrap.js') }}" defer></script>

5. Start Laravel Echo Server

In your terminal, run the following command to start Laravel Echo Server:

bash
laravel-echo-server start

Make sure to configure Laravel Echo Server by following the prompts. You'll need to set your Pusher credentials, app key, secret, cluster, etc.

6. Broadcasting Events

In your Laravel application, you can broadcast events using Laravel's event system. For example, you might broadcast an event when a new message is created:

php
// In your controller or wherever you want to broadcast the event
broadcast(new NewMessage($message));

7. Listening for Events in JavaScript

In your JavaScript, you can listen for events and react accordingly:

javascript
Echo.channel('chat-room')
    .listen('NewMessage', (event) => {
        console.log('New Message:', event.message);
    });

Replace chat-room with the channel you want to listen to and NewMessage with the name of the event you're broadcasting.

Additional Links:

  1. 1. Laravel Echo Documentation
  2. 2. Laravel Echo Server Documentation
  3. 3. Pusher Channels Documentation
  4. 4. Laravel Broadcasting Events

Make sure to check the documentation for any updates or changes specific to the versions you are using.




=== Happy Coding :)

Category List