Using Laravel Echo | Real Time Events

Introduction

Laravel Echo is a JavaScript library that makes it easy to work with WebSockets in Laravel applications. It provides a simple API to subscribe to channels and listen for events broadcasted from your server. This tutorial will guide you through the process of setting up and using Laravel Echo in your Laravel application.

Prerequisites

Before you get started with Laravel Echo, ensure you have the following:

A Laravel application set up (preferably Laravel 5.7 or higher).
Node.js and npm installed on your development machine.
A broadcasting driver configured (like Pusher, Redis, or Laravel WebSockets).

Installing Laravel Echo

To install Laravel Echo, you can use npm. Run the following command in your terminal:

npm install --save laravel-echo pusher-js

This command will install Laravel Echo along with the Pusher JavaScript library, which is used for broadcasting WebSocket events.

Configuring Laravel Echo

Next, you need to set up Laravel Echo. In your resources/js/bootstrap.js file, add the following code to configure Echo:

// Import Echo and Pusher import Echo from "laravel-echo"; window.Pusher = require("pusher-js"); // Create an instance of Echo window.Echo = new Echo({ broadcaster: 'pusher', key: 'your-pusher-key', cluster: 'your-pusher-cluster', encrypted: true });

Replace your-pusher-key and your-pusher-cluster with your actual Pusher credentials.

Broadcasting Events

To broadcast events, you first need to create an event class. Run the following command:

php artisan make:event MessageSent

Next, open the newly created event class located in app/Events/MessageSent.php and implement the ShouldBroadcast interface:

namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\WithEvents; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Queue\SerializesModels; class MessageSent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $message; public function __construct($message) { $this->message = $message; } public function broadcastOn() { return new Channel('chat'); } }

This code sets up a new event that broadcasts a message to the chat channel.

Listening for Events

To listen for the broadcasted events, you can use the following code in your JavaScript files:

window.Echo.channel('chat') .listen('MessageSent', (e) => { console.log(e.message); });

This will listen for the MessageSent event on the chat channel and log the message to the console.

Triggering Events

To trigger the event, you can use the following code in your controller:

use App\Events\MessageSent; // Trigger the event event(new MessageSent('Hello, World!'));

This code will broadcast the message "Hello, World!" to all clients subscribed to the chat channel.

Conclusion

Laravel Echo simplifies the process of handling real-time events in your Laravel applications. By following the steps outlined in this tutorial, you can easily set up broadcasting and listening for events using Echo. Make sure to explore the official Laravel documentation for more advanced usage and configurations.