In this tutorial, we will explore how to create real-time applications using Laravel and WebSockets. We’ll integrate Laravel Echo and Laravel WebSockets to enable real-time communication between the server and clients. Throughout this tutorial, we’ll demonstrate essential features like broadcasting events, presence channels, and private messaging. By the end, you’ll have the knowledge and tools to build powerful and interactive real-time applications with Laravel.
Prerequisites: To follow along with this tutorial, you should have a basic understanding of PHP, Laravel, and JavaScript. Ensure that you have Laravel and its dependencies installed on your system.
Setting up the Project: To begin, create a new Laravel project. Open your terminal and run the following command:
composer create-project --prefer-dist laravel/laravel realtime-app-tutorial
This command will create a new Laravel project named “realtime-app-tutorial.”
Installing Laravel WebSockets: Laravel WebSockets provides the infrastructure needed to build real-time applications. Install Laravel WebSockets by running the following commands in your terminal:
composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate
Configuring Laravel WebSockets: Configure Laravel WebSockets by opening the config/websockets.php file. Update the apps array to include your application’s URL and any additional app configurations.
Broadcasting Events: Laravel WebSockets enables broadcasting events to the connected clients. Let’s create an example event and broadcast it. Run the following command in your terminal:
php artisan make:event NewMessage
Open the generated NewMessage event file and modify the broadcastOn method as follows:
public function broadcastOn()
{
return new Channel('messages');
}
In this example, the event is broadcasted on the messages channel.
Broadcasting Event Listeners: Create an event listener to handle the broadcasted events. Run the following command in your terminal:
php artisan make:listener NewMessageListener --event=NewMessage
Open the generated NewMessageListener file and modify the handle method as follows:
public function handle(NewMessage $event)
{
broadcast(new NewMessageNotification($event->message))->toOthers();
}
In this example, the NewMessageListener broadcasts a NewMessageNotification to other connected clients.
Creating a Presence Channel: Presence channels allow you to track connected users and their presence status. Modify the routes/channels.php file as follows:
use App\Models\User;
Broadcast::channel('messages', function ($user) {
return ['id' => $user->id, 'name' => $user->name];
});
In this example, we define a presence channel named messages and provide user information for each connected user.
Implementing Private Messaging: Private messaging allows users to communicate privately. Let’s create a private messaging feature. Run the following command in your terminal:
php artisan make:channel PrivateChat
Open the generated PrivateChat channel file and modify the broadcastOn method as follows:
public function broadcastOn()
{
return new PrivateChannel('private-chat.'.$this->receiverId);
}
In this example, the private messages are broadcasted on a channel specific to the receiver.
Broadcasting Private Messages: To broadcast private messages, modify the NewMessageListener as follows:
public function handle(NewMessage $event)
{
$receiverId = $event->receiverId;
$message = $event->message;
broadcast(new NewPrivateMessageNotification($message))->toOthers();
broadcast(new NewPrivateMessageNotification($message))->toOthersOn("private-chat.{$receiverId}");
}
In this example, the NewMessageListener broadcasts a NewPrivateMessageNotification to other connected clients and the specific receiver.
Frontend Implementation: To consume the real-time functionality on the frontend, install the Laravel Echo and Socket.IO libraries. Run the following command in your terminal:
npm install laravel-echo socket.io-client
Configure Laravel Echo by creating a new file named resources/js/bootstrap.js and adding the following code:
import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001',
});
Include the bootstrap.js file in your application by adding the following line to the resources/js/app.js file:
require('./bootstrap');
Consuming Real-Time Events: In your JavaScript file, subscribe to the event channels and listen for real-time events. For example:
window.Echo.channel('messages')
.listen('NewMessageNotification', (event) => {
console.log('New message:', event.message);
});
window.Echo.private('private-chat.' + receiverId)
.listen('NewPrivateMessageNotification', (event) => {
console.log('New private message:', event.message);
});
In this example, we listen for NewMessageNotification events on the messages channel and NewPrivateMessageNotification events on the private chat channel.
Congratulations! You’ve successfully learned how to create real-time applications using Laravel and WebSockets. We covered integrating Laravel Echo and Laravel WebSockets, demonstrating essential features like broadcasting events, presence channels, and private messaging. With this knowledge, you can now build interactive and real-time applications that provide seamless user experiences. Laravel’s powerful tools and WebSockets’ real-time capabilities make it easier than ever to develop real-time applications.
