Laravel WebSockets – Real-time communication

Projects Inventory

2 months ago

Laravel WebSockets is a powerful package that enables real-time communication in Laravel applications using WebSockets. This package allows developers to easily implement real-time features, such as chat applications, notifications, live updates, and more, without relying on third-party services. It provides a simple API for managing WebSocket connections and broadcasting events in real time.

Key Features of Laravel WebSockets:

Real-Time Communication: Enables two-way communication between clients and servers in real time.

Broadcasting: Built-in support for broadcasting events using Laravel’s event broadcasting system.
Pusher-Compatible: Works with the Pusher API, making it easy to switch between Pusher and Laravel WebSockets.
Dashboard: Provides a dashboard to monitor WebSocket connections, channels, and statistics.
Scalability: Can be scaled horizontally to handle large numbers of concurrent connections.

Installation

To get started with Laravel WebSockets, follow these steps:

Require the Package: Install the package via Composer:

composer require beyondcode/laravel-websockets

1

composer require beyondcode/laravel-websockets
Publish the Configuration: Publish the configuration file using Artisan:

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

1

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

Configure Broadcasting: Update your config/broadcasting.php configuration to include the pusher driver with Laravel WebSockets:

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true,
        ],
    ],
],

'connections' => [

'pusher' => [

'driver' => 'pusher',

'key' => env('PUSHER_APP_KEY'),

'secret' => env('PUSHER_APP_SECRET'),

'app_id' => env('PUSHER_APP_ID'),

'options' => [

'cluster' => env('PUSHER_APP_CLUSTER'),

'useTLS' => true,

Set Up Environment Variables: Update your .env file with the following WebSocket settings:

PUSHER_APP_ID=your_app_id PUSHER_APP_KEY=your_app_key PUSHER_APP_SECRET=your_app_secret PUSHER_APP_CLUSTER=your_app_cluster

1
2
3
4

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_app_cluster
Run the WebSocket Server: Start the WebSocket server using the Artisan command:

php artisan websockets:serve

1

php artisan websockets:serve

Broadcasting Events

To broadcast events in real time, you need to create an event class.

Creating an Event Class

You can create an event class using the Artisan command:

php artisan make:event MessageSent

1	php artisan make:event MessageSent

In the generated event class, implement the ShouldBroadcast interface:

Example Event Class (app/Events/MessageSent.php):

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
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');
    }
}

namespace App\Events;

use Illuminate\Broadcasting\Channel;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Broadcasting\PrivateChannel;

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');

}

Broadcasting the Event

You can broadcast the event in your controller or any other part of your application:

use App\Events\MessageSent;

public function sendMessage(Request $request)
{
    $message = $request->input('message');

    broadcast(new MessageSent($message));

    return response()->json(['status' => 'Message sent!']);
}

use App\Events\MessageSent;

public function sendMessage(Request $request)

{

$message = $request->input('message');

broadcast(new MessageSent($message));

return response()->json(['status' => 'Message sent!']);

}

Listening for Events

On the client side, you can listen for events using Laravel Echo, which simplifies the process of subscribing to channels and listening for events.

Example Client-Side Code (JavaScript)

Make sure to include Laravel Echo and Pusher in your JavaScript:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

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

echo.channel('chat')
    .listen('MessageSent', (e) => {
        console.log('Message: ', e.message);
    });

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';

window.Pusher = Pusher;

const echo = new Echo({

broadcaster: 'pusher',

key: process.env.MIX_PUSHER_APP_KEY,

cluster: process.env.MIX_PUSHER_APP_CLUSTER,

encrypted: true,

});

echo.channel('chat')

.listen('MessageSent', (e) => {

console.log('Message: ', e.message);

});

Dashboard

Laravel WebSockets includes a built-in dashboard to monitor WebSocket connections, channels, and statistics. You can access it by navigating to /laravel-websockets in your browser.

Conclusion

Laravel WebSockets is an excellent solution for implementing real-time communication in Laravel applications. It provides a simple and efficient way to handle WebSocket connections and broadcasting events, enabling developers to create interactive and responsive applications.

Additional Considerations

Production Deployment: When deploying to production, ensure you have a proper server setup for handling WebSocket connections.
Scaling: You may need to use a load balancer and multiple WebSocket servers to handle large amounts of traffic.
Documentation: Refer to the official Laravel WebSockets documentation for more advanced features and configuration options.