Laravel Real Time Notifications

Photo by Dust & Pixels on Unsplash

The Laravel documentation is awesome and most of this content was picked from there. I am writing this because I recently tried to connect to a private broadcast channel and faced some bumps on the road.

Server Setup

Create a Laravel event

php artisan make:event OrderStatusUpdated

Add a private channel to the broadcastOn() method of the event so that only users who have created an order can receive updates about their order. The event should implement ShouldBroadcast

<?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;
use App\Models\Order;

class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $order;
    public $oldStatus;
    public $newStatus;

    /**
     * Create a new event instance.
     */
    public function __construct(Order $order, string $oldStatus, string $newStatus)
    {
        $this->order = $order;
        $this->oldStatus = $oldStatus;
        $this->newStatus = $newStatus;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('orders.'.$this->order->id),
        ];
    }
}

Enable broadcasting via pusher websockets. I tried to use Laravel Websockets but didnt have much luck. Also wierd that it depends on pusher configurations and SDK.

php artisan install:broadcasting — pusher

Install pusher channels SDK

composer require pusher/pusher-php-server

Get David Ebukali’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Create an account on pusher and add an application. Copy the App Keys from pusher to your laravel application .env file

app_id = “123”
key = “123”
secret = “secret”
cluster = “eu”

Set BROADCAST_CONNECTION to pusher in your .env file

BROADCAST_CONNECTION=pusher

Add a route in routes/channels.php to allow pusher check if the user currently logged in created the updated order.

<?php

use Illuminate\Support\Facades\Broadcast;
use App\Models\User;
use App\Models\Order;

Broadcast::channel('orders.{orderId}', function (User $user, int $orderId) {
    return $user->id === Order::findOrNew($orderId)->user_id;
});

Client Setup

Add authEndpoint to the echo instance in resources/js/echo.js This tells pusher where to authenticate users for the private channel.

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    wssPort: import.meta.env.VITE_PUSHER_PORT,
    enabledTransports: ["ws", "wss"],
    // 👇 authEndpoint
    authEndpoint: '/broadcasting/auth',
});

Add the below script to resources/js/app.js. It looks for a hidden field with id orderId that identifies the updated order. Please add this field somewhere or try another way to pass the id to this script.

import './bootstrap';

Pusher.logToConsole = true; // For development environment
document.addEventListener("DOMContentLoaded", function () {
    const orderInput = document.getElementById("orderId");

    if (orderInput) {
        const orderId = orderInput.value;
        Echo.private("orders." + orderId)
        .listen("OrderStatusUpdated", (e) => { // Use event class name from laravel, a custom event name works only with pusher
            alert("Order status updated: " + JSON.stringify(e));
        });
    } else {
        console.error("Order ID not found in the DOM.");
    }
    
});

I had an issue with single quotes when defining the channel name, switching to double quotes solved the issue.