07. Broadcasting

Introduction
Setting Up Soketi
- Quick Installation
- Installing via Docker
Setting Up The Broadcasting Component
- The Backend
- The Frontend
Broadcasting Turbo Streams
Automatically Broadcasting on Model Changes
Testing it out
- Extra Credit: Fixing The Missing Dropdowns

Introduction

We can send the same Turbo Streams we're returning to our users after a form submission over WebSockets and update the page for all users visiting it! Broadcasts may be triggered automatically whenever a model updates or manually whenever you want to broadcast it.

Setting Up Soketi

Let's setup Soketi to handle our WebSockets connections locally. In production, we can either deploy Soketi to Forge or use a dedicated external service such as Pusher.

Quick Installation

For our quick install, we're gonna follow the local CLI installation from Soketi's docs.

If you're on Linux, make sure you install these dependencies:

sudo apt install -y git python3 gcc build-essential

Next, install Soketi via NPM:

npm install -g @soketi/soketi

Now, all we have to do is start the Soketi service:

soketi start

This will start the Soketi server at 127.0.0.1:6001. Your .env file should look like this:

.env

 ...
APP_NAME=Laravel
APP_ENV=local
APP_KEY=[REDACTED]
APP_DEBUG=true
APP_URL=http://localhost
 
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
 
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=turbo_chirper
DB_USERNAME=sail
DB_PASSWORD=password
 
BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
SESSION_DRIVER=file
SESSION_LIFETIME=120
 
MEMCACHED_HOST=memcached
 
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
 
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"
 
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
 
PUSHER_APP_ID="app-id"
PUSHER_APP_KEY="app-key"
PUSHER_APP_SECRET="app-secret"
PUSHER_HOST="localhost"
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
 
PUSHER_FRONTEND_HOST="${PUSHER_HOST}"
PUSHER_FRONTEND_CLUSTER="${PUSHER_APP_CLUSTER}"

That's it for setting up Soketi locally.

Installing via Docker

When using Laravel Sail, we can setup a Soketi service by running php artisan sail:add soketi:

php artisan sail:add soketi

Before booting the new service, make sure your .env file looks like this:

.env

 ...
APP_NAME=Laravel
APP_ENV=local
APP_KEY=[REDACTED]
APP_DEBUG=true
APP_URL=http://localhost
 
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
 
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=turbo_chirper
DB_USERNAME=sail
DB_PASSWORD=password
 
BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
SESSION_DRIVER=file
SESSION_LIFETIME=120
 
MEMCACHED_HOST=memcached
 
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
 
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"
 
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
 
PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=soketi
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
 
PUSHER_FRONTEND_HOST="localhost"
PUSHER_FRONTEND_CLUSTER="${PUSHER_APP_CLUSTER}"

Since containers run in isolation, we'll need two different hosts. Our backend will connect using the Docker Compose service name as the host, since Docker Compose will ensure both containers are running in the same network. That's why we're setting PUSHER_HOST to soketi.

However, our browser also needs to connect to the Soketi service. We're binding the Soketi container to our local port 6001, so our browser can connect o localhost:6001. That's why we're setting PUSHER_FRONTEND_HOST to localhost.

Now, we can boot the Soketi service by running:

./vendor/bin/sail up -d

That's it!

Setting Up The Broadcasting Component

We're gonna split this part into two parts: the backend and the frontend.

The Backend

Install the Composer dependencies:

composer require pusher/pusher-php-server

Now, update the config/broadcasting.php:

config/broadcasting.php

<?php
 
return [
 ...
    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "ably", "redis", "log", "null"
    |
    */
 
    'default' => env('BROADCAST_DRIVER', 'null'),
 ...
    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */
 
    'connections' => [
 
        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 443),
                'scheme' => env('PUSHER_SCHEME', 'https'),
                'encrypted' => false,
                'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
            'frontend_options' => [ 
                'host' => env('PUSHER_FRONTEND_HOST', env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com'),
                'port' => env('PUSHER_FRONTEND_PORT', env('PUSHER_PORT', 443)),
                'cluster' => env('PUSHER_APP_CLUSTER', 'mt1'),
                'forceTLS' => env('PUSHER_SCHEME', 'https') === 'https',
            ], 
        ],
 ...
        'ably' => [
            'driver' => 'ably',
            'key' => env('ABLY_KEY'),
        ],
 
        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],
 
        'log' => [
            'driver' => 'log',
        ],
 
        'null' => [
            'driver' => 'null',
        ],
 
    ],
 
];

Then, uncommend the BroadcastsServiceProvider from the list of providers in config/app.php:

config/app.php

<?php
 
use Illuminate\Support\Facades\Facade;
 
return [
 ...
    /*
    |--------------------------------------------------------------------------
    | Application Name
    |--------------------------------------------------------------------------
    |
    | This value is the name of your application. This value is used when the
    | framework needs to place the application's name in a notification or
    | any other location as required by the application or its packages.
    |
    */
 
    'name' => env('APP_NAME', 'Laravel'),
 
    /*
    |--------------------------------------------------------------------------
    | Application Environment
    |--------------------------------------------------------------------------
    |
    | This value determines the "environment" your application is currently
    | running in. This may determine how you prefer to configure various
    | services the application utilizes. Set this in your ".env" file.
    |
    */
 
    'env' => env('APP_ENV', 'production'),
 
    /*
    |--------------------------------------------------------------------------
    | Application Debug Mode
    |--------------------------------------------------------------------------
    |
    | When your application is in debug mode, detailed error messages with
    | stack traces will be shown on every error that occurs within your
    | application. If disabled, a simple generic error page is shown.
    |
    */
 
    'debug' => (bool) env('APP_DEBUG', false),
 
    /*
    |--------------------------------------------------------------------------
    | Application URL
    |--------------------------------------------------------------------------
    |
    | This URL is used by the console to properly generate URLs when using
    | the Artisan command line tool. You should set this to the root of
    | your application so that it is used when running Artisan tasks.
    |
    */
 
    'url' => env('APP_URL', 'http://localhost'),
 
    'asset_url' => env('ASSET_URL'),
 
    /*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. We have gone
    | ahead and set this to a sensible default for you out of the box.
    |
    */
 
    'timezone' => 'UTC',
 
    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */
 
    'locale' => 'en',
 
    /*
    |--------------------------------------------------------------------------
    | Application Fallback Locale
    |--------------------------------------------------------------------------
    |
    | The fallback locale determines the locale to use when the current one
    | is not available. You may change the value to correspond to any of
    | the language folders that are provided through your application.
    |
    */
 
    'fallback_locale' => 'en',
 
    /*
    |--------------------------------------------------------------------------
    | Faker Locale
    |--------------------------------------------------------------------------
    |
    | This locale will be used by the Faker PHP library when generating fake
    | data for your database seeds. For example, this will be used to get
    | localized telephone numbers, street address information and more.
    |
    */
 
    'faker_locale' => 'en_US',
 
    /*
    |--------------------------------------------------------------------------
    | Encryption Key
    |--------------------------------------------------------------------------
    |
    | This key is used by the Illuminate encrypter service and should be set
    | to a random, 32 character string, otherwise these encrypted strings
    | will not be safe. Please do this before deploying an application!
    |
    */
 
    'key' => env('APP_KEY'),
 
    'cipher' => 'AES-256-CBC',
 
    /*
    |--------------------------------------------------------------------------
    | Maintenance Mode Driver
    |--------------------------------------------------------------------------
    |
    | These configuration options determine the driver used to determine and
    | manage Laravel's "maintenance mode" status. The "cache" driver will
    | allow maintenance mode to be controlled across multiple machines.
    |
    | Supported drivers: "file", "cache"
    |
    */
 
    'maintenance' => [
        'driver' => 'file',
        // 'store'  => 'redis',
    ],
 
    /*
    |--------------------------------------------------------------------------
    | Autoloaded Service Providers
    |--------------------------------------------------------------------------
    |
    | The service providers listed here will be automatically loaded on the
    | request to your application. Feel free to add your own services to
    | this array to grant expanded functionality to your applications.
    |
    */
 
    'providers' => [
 ...
        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,
        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
        Illuminate\Cookie\CookieServiceProvider::class,
        Illuminate\Database\DatabaseServiceProvider::class,
        Illuminate\Encryption\EncryptionServiceProvider::class,
        Illuminate\Filesystem\FilesystemServiceProvider::class,
        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
        Illuminate\Hashing\HashServiceProvider::class,
        Illuminate\Mail\MailServiceProvider::class,
        Illuminate\Notifications\NotificationServiceProvider::class,
        Illuminate\Pagination\PaginationServiceProvider::class,
        Illuminate\Pipeline\PipelineServiceProvider::class,
        Illuminate\Queue\QueueServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
        Illuminate\Session\SessionServiceProvider::class,
        Illuminate\Translation\TranslationServiceProvider::class,
        Illuminate\Validation\ValidationServiceProvider::class,
        Illuminate\View\ViewServiceProvider::class,
 
        /*
         * Package Service Providers...
         */
 
        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // App\Providers\BroadcastServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class, 
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
 
    ],
 ...
    /*
    |--------------------------------------------------------------------------
    | Class Aliases
    |--------------------------------------------------------------------------
    |
    | This array of class aliases will be registered when this application
    | is started. However, feel free to register as many as you wish as
    | the aliases are "lazy" loaded so they don't hinder performance.
    |
    */
 
    'aliases' => Facade::defaultAliases()->merge([
        // 'ExampleClass' => App\Example\ExampleClass::class,
    ])->toArray(),
 
];

Now, since we're using Importmap Laravel, we need to expose the JS Pusher keys to our frontend somehow (in a Vite setup we could reach for them using import.meta.VITE_*, but we don't have a build compilation step here.)

For that reason, we're gonna add some meta tags to our app.blade.php and guest.blade.php layouts that will expose those configs for our JS frontend:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        
        @include('layouts.current-meta')
 
        <title>{{ config('app.name', 'Laravel') }}</title>
        ...
        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
 
        <!-- Scripts -->
        <x-importmap-tags />
        <link rel="stylesheet" href="{{ tailwindcss('css/app.css') }}">
        
    </head>
    <body class="font-sans antialiased">
        ...
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')
            @include('layouts.notifications')
 
            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif
 
            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
        
    </body>
</html>

And also update the guest layout:

resources/views/layouts/guest.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        
        @include('layouts.current-meta')
 
        <title>{{ config('app.name', 'Laravel') }}</title>
        ...
        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
 
        <!-- Scripts -->
        <x-importmap-tags />
        <link rel="stylesheet" href="{{ tailwindcss('css/app.css') }}">
        
    </head>
    <body>
        ...
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
        
    </body>
</html>

Let's create the layouts/current-meta.blade.php partial:

resources/views/layouts/current-meta.blade.php

{{-- Pusher Client-Side Config --}}
<meta name="current-pusher-key" content="{{ config('broadcasting.connections.pusher.key') }}" />
<meta name="current-pusher-cluster" content="{{ config('broadcasting.connections.pusher.frontend_options.cluster') }}" />
<meta name="current-pusher-wsHost" content="{{ config('broadcasting.connections.pusher.frontend_options.host') }}" />
<meta name="current-pusher-wsPort" content="{{ config('broadcasting.connections.pusher.frontend_options.port') }}" />
<meta name="current-pusher-forceTLS" content="{{ json_encode(boolval(config('broadcasting.connections.pusher.frontend_options.forceTLS'))) }}" />

Note that all our meta tags are exposed using the current-pusher-* prefix. That's gonna be important.

The Frontend

Before we set up Laravel Echo, let's install the JS dependencies:

php artisan importmap:pin laravel-echo pusher-js current.js

Now, let's configure Laravel Echo. Uncomment the Laravel Echo settings in our bootstrap.js:

resources/js/bootstrap.js

 ...
import _ from 'lodash';
window._ = _;
 
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */
 
import axios from 'axios';
window.axios = axios;
 
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */
 
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 ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

This file was written assuming we were using Vite, but we're not. Since we're using Importmap Laravel, we don't have access to a build step, which is how Vite replaces these import.meta.env.* with the values from your .env file.

Remember that we're exposing some meta tags in our HTML document head, so we're going to configure Laravel Echo using those meta tags.

We could reach for them individually using something like:

document.head.querySelector('meta[name=current-pusher-key]').content

But instead we're gonna use current.js, which is inpired by what the 37signals folks are using on Hey. This lib defines a JavaScript Proxy object that searches for the accessed properties in the HTML document's meta tags.

For instance, if we had the following meta tags:

<meta name="current-identity-id" content="123">
<meta name="current-identity-time-zone-name" content="Central Time (US & Canada)">

We could reach for it from JavaScript using current.js like so:

import { Current } from "current.js"
 
Current.identity
// => { id: "123", timeZoneName: "Central Time (US & Canada)" }

Let's update our bootstrap.js to make use of current.js instead of relying on build-time keys using import.meta.env.*:

resources/js/bootstrap.js

 ...
import _ from 'lodash';
window._ = _;
 
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */
 
import axios from 'axios';
window.axios = axios;
 
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
import { Current } from 'current.js';
window.Current = Current;
 ...
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */
 
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 ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    key: Current.pusher.key, 
    cluster: Current.pusher.cluster,
    wsHost: Current.pusher.wsHost,
    wsPort: Current.pusher.wsPort ?? 80,
    wssPort: Current.pusher.wssPort ?? 443,
    forceTLS: (Current.pusher.forceTLS ?? 'false') == true,
    enabledTransports: ['ws', 'wss'],
});

Now we're set!

Broadcasting Turbo Streams

Let's start by sending new Chirps to all users currently visiting the chirps page. We're going to start by creating a private broadcasting channel called chirps in our routes/channels.php file. Any authenticated user may start receiving new Chirps broadcasts when they visit the chirps.index page, so we're simply returning true in the authorization check:

routes/channels.php

<?php
 
use App\Models\Chirp;
use Illuminate\Support\Facades\Broadcast;
 ...
/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/
 
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});
 
Broadcast::channel('chirps', function () {
    return true;
});

Now, let's update the chirps/index.blade.php to add the x-turbo-stream-from Blade component that ships with Turbo Laravel:

resources/views/chirps/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="flex items-center space-x-1 font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            <x-breadcrumbs :links="[__('Chirps')]" />
        </h2>
    </x-slot>
 
    <x-turbo-stream-from source="chirps" /> 
 
    <div class="py-12">
        ...
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                <div class="max-w-xl mx-auto">
                    <x-turbo-frame id="create_chirp" src="{{ route('chirps.create') }}">
                        @include('chirps.partials.new-chirp-trigger')
                    </x-turbo-frame>
 
                    <div id="chirps" class="mt-6 bg-white shadow-sm rounded-lg divide-y dark:bg-gray-700 dark:divide-gray-500">
                        @each('chirps._chirp', $chirps, 'chirp')
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</x-app-layout>

That's it! When the user visits that page, this component will automatically start listening to a chirps private channel for broadcasts. By default, it assumes we're using private channels, but you may configure it to listen to presence or public channels by passing the type prop to the component. In this case, we're passing a string for the channel name, but we could also pass an Eloquent model instance and it would figure out the channel name based on Laravel's conventions.

Now, we're ready to start broadcasting! First, let's add the Broadcasts trait to our Chirp model:

app/Models/Chirp.php

<?php
 
namespace App\Models;
 
use HotwiredLaravel\TurboLaravel\Models\Broadcasts; 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Chirp extends Model
{
    use HasFactory;
    use Broadcasts; 
 
    protected $fillable = [
        'message',
    ];
 
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

That trait will give us a bunch of methods we can call from our Chirp model instances. Let's use it in the store action of our ChirpController to send newly created Chirps to all connected users:

app/Http/Controllers/ChirpController.php

<?php
 ...
namespace App\Http\Controllers;
 
use App\Models\Chirp;
use Illuminate\Http\Request;
 
class ChirpController extends Controller
{
 ...
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('chirps.index', [
            'chirps' => Chirp::with('user')->latest()->get(),
        ]);
    }
 
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('chirps.create', [
            //
        ]);
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp = $request->user()->chirps()->create($validated);
 
        $chirp->broadcastPrependTo('chirps')
            ->target('chirps')
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp, 'prepend'),
                turbo_stream()->update('create_chirp', view('chirps._form')),
                turbo_stream()->notice(__('Chirp created.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp created.'));
    }
 ...
    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function show(Chirp $chirp)
    {
        //
    }
 
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function edit(Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        return view('chirps.edit', [
            'chirp' => $chirp,
        ]);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp->update($validated);
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp updated.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp updated.'));
    }
 
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request, Chirp $chirp)
    {
        $this->authorize('delete', $chirp);
 
        $chirp->delete();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp deleted.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp deleted.'));
    }
 
}

To test this, try visiting the /chirps page from two different tabs and creating a Chirp in one of them. The other should automatically update! We're also broadcasting on-the-fly in the same request/response life-cycle, which could slow down our response time a bit, depending on your load and your queue driver response time. We can delay the broadcasting (which includes view rendering) to the a queued job by chaining the ->later() method, for example.

Now, let's make sure all visiting users receive Chirp updates whenever it changes. To achieve that, change the update action in the ChirpController:

app/Http/Controllers/ChirpController.php

<?php
 ...
namespace App\Http\Controllers;
 
use App\Models\Chirp;
use Illuminate\Http\Request;
 
use function HotwiredLaravel\TurboLaravel\dom_id;
 
class ChirpController extends Controller
{
 ...
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('chirps.index', [
            'chirps' => Chirp::with('user')->latest()->get(),
        ]);
    }
 
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('chirps.create', [
            //
        ]);
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp = $request->user()->chirps()->create($validated);
 
        $chirp->broadcastPrependTo('chirps')
            ->target('chirps')
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp, 'prepend'),
                turbo_stream()->update('create_chirp', view('chirps._form')),
                turbo_stream()->notice(__('Chirp created.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp created.'));
    }
 
    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function show(Chirp $chirp)
    {
        //
    }
 
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function edit(Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        return view('chirps.edit', [
            'chirp' => $chirp,
        ]);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp->update($validated);
 
        $chirp->broadcastReplaceTo('chirps')
            ->target(dom_id($chirp))
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp updated.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp updated.'));
    }
 ...
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request, Chirp $chirp)
    {
        $this->authorize('delete', $chirp);
 
        $chirp->delete();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp deleted.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp deleted.'));
    }
 
}

Again, open two tabs, try editing a Chirp and you should see the other tab automatically updating! Cool, right?!

Finally, let's make sure deleted Chirps are removed from all visiting users' pages. Tweak the destroy action in the ChirpController like so:

app/Http/Controllers/ChirpController.php

<?php
 ...
namespace App\Http\Controllers;
 
use App\Models\Chirp;
use Illuminate\Http\Request;
 
use function HotwiredLaravel\TurboLaravel\dom_id;
 
class ChirpController extends Controller
{
 ...
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('chirps.index', [
            'chirps' => Chirp::with('user')->latest()->get(),
        ]);
    }
 
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('chirps.create', [
            //
        ]);
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp = $request->user()->chirps()->create($validated);
 
        $chirp->broadcastPrependTo('chirps')
            ->target('chirps')
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp, 'prepend'),
                turbo_stream()->update('create_chirp', view('chirps.partials.chirp-form')),
                turbo_stream()->notice(__('Chirp created.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp created.'));
    }
 
    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function show(Chirp $chirp)
    {
        //
    }
 
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function edit(Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        return view('chirps.edit', [
            'chirp' => $chirp,
        ]);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp->update($validated);
 
        $chirp->broadcastReplaceTo('chirps')
            ->target(dom_id($chirp))
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp updated.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp updated.'));
    }
 
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request, Chirp $chirp)
    {
        $this->authorize('delete', $chirp);
 
        $chirp->delete();
 
        $chirp->broadcastRemoveTo('chirps')
            ->target(dom_id($chirp))
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp deleted.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp deleted.'));
    }
}

Now, open two tabs and try deleting a Chirp. You should see it being removed from the other tab as well!

Automatically Broadcasting on Model Changes

Since we're interested in broadcasting all changes of our Chirp model, we can remove a few lines of code and instruct Turbo Laravel to make that automatically for us.

We may achieve that by setting the $broadcasts property to true in our Chirp model. However, Turbo Laravel will automatically broadcast newly created models using the append Turbo Stream action. In our case, we want it to prepend instead, so we're setting the $broadcasts property to an array and using the insertsBy key to configure the creation action to be used.

We also need to override where these broadcasts are going to be sent to. Turbo Laravel will automatically send creates to a channel named using the pluralization of our model's basename, which would work for us. But updates and deletes will be sent to a model's individual channel names (something like App.Models.Chirp.1 where 1 is the model ID). This is useful because we're usually broadcasting to a parent model's channel via a relationship, which we can do with the $broadcastsTo property (see the docs to know more about this), but in our case we'll always be sending the broadcasts to a private channel named chirps.

Our Chirp model would end up looking like this:

app/Models/Chirp.php

<?php
 
namespace App\Models;
 
use HotwiredLaravel\TurboLaravel\Models\Broadcasts;
use Illuminate\Broadcasting\PrivateChannel; 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Chirp extends Model
{
    use HasFactory;
    use Broadcasts;
 
    protected $broadcasts = [
        'insertsBy' => 'prepend',
    ];
 
    protected $fillable = [
        'message',
    ];
 
    public function user()
    {
        return $this->belongsTo(User::class);
    }
 
    public function broadcastsTo()
    {
        return [
            new PrivateChannel('chirps'),
        ];
    }
}

We can then remove a few lines from our ChirpsController:

app/Http/Controllers/ChirpController.php

<?php
 ...
namespace App\Http\Controllers;
 
use App\Models\Chirp;
use Illuminate\Http\Request;
 
use function HotwiredLaravel\TurboLaravel\dom_id;
 
class ChirpController extends Controller
{
 ...
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('chirps.index', [
            'chirps' => Chirp::with('user')->latest()->get(),
        ]);
    }
 
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('chirps.create', [
            //
        ]);
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp = $request->user()->chirps()->create($validated);
 
        $chirp->broadcastPrependTo('chirps')
            ->target('chirps')
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp, 'prepend'),
                turbo_stream()->update('create_chirp', view('chirps._form')),
                turbo_stream()->notice(__('Chirp created.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp created.'));
    }
 ...
    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function show(Chirp $chirp)
    {
        //
    }
 
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function edit(Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        return view('chirps.edit', [
            'chirp' => $chirp,
        ]);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Chirp $chirp)
    {
        $this->authorize('update', $chirp);
 
        $validated = $request->validate([
            'message' => ['required', 'string', 'max:255'],
        ]);
 
        $chirp->update($validated);
 
        $chirp->broadcastReplaceTo('chirps')
            ->target(dom_id($chirp))
            ->partial('chirps._chirp', ['chirp' => $chirp])
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp updated.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp updated.'));
    }
 
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Chirp  $chirp
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request, Chirp $chirp)
    {
        $this->authorize('delete', $chirp);
 
        $chirp->delete();
 
        $chirp->broadcastRemoveTo('chirps')
            ->target(dom_id($chirp))
            ->toOthers();
 
        if ($request->wantsTurboStream()) {
            return turbo_stream([
                turbo_stream($chirp),
                turbo_stream()->notice(__('Chirp deleted.')),
            ]);
        }
 
        return redirect()->route('chirps.index')->with('notice', __('Chirp deleted.'));
    }
}

Testing it out

One more cool thing about this approach: users will receive the broadcasts no matter where the Chirp models were created from! We can test this out by creating a Chirp entry from Tinker, for example. To try that, start a new Tinker session:

php artisan tinker

And then create a Chirp from there:

App\Models\User::first()->chirps()->create(['message' => 'Hello from Tinker!'])
# App\Models\Chirp {#7426
#   message: "Hello from Tinker!",
#   user_id: 1,
#   updated_at: "2023-11-26 23:01:00",
#   created_at: "2023-11-26 23:01:00",
#   id: 18,
# }

Broadcasting from Tinker

Extra Credit: Fixing The Missing Dropdowns

When creating the Chirp from Tinker, even though we see them appearing on the page, if you look closely, you may notice that the dropdown with the "Edit" and "Delete" buttons is missing. This would also be true if we were using a real queue driver, since it would defer the rendering of the partial to a background queue worker. That's because when we send the broadcasts to run in background, the partial will render without a request and session contexts, so our calls to Auth::id() inside of it will always return null, which means the dropdown would never render.

Instead of conditionally rendering the dropdown in the server side, let's switch to always rendering them and hide it from our users with a sprinkle of JavaScript instead.

First, let's update our layouts.current-meta partial to include a few things about the currently authenticated user when there's one:

resources/views/layouts/current-meta.blade.php

{{-- Pusher Client-Side Config --}}
<meta name="current-pusher-key" content="{{ config('broadcasting.connections.pusher.key') }}" />
<meta name="current-pusher-cluster" content="{{ config('broadcasting.connections.pusher.frontend_options.cluster') }}" />
<meta name="current-pusher-wsHost" content="{{ config('broadcasting.connections.pusher.frontend_options.host') }}" />
<meta name="current-pusher-wsPort" content="{{ config('broadcasting.connections.pusher.frontend_options.port') }}" />
<meta name="current-pusher-forceTLS" content="{{ config('broadcasting.connections.pusher.frontend_options.forceTLS') ? 'true' : 'false' }}" />
 
@auth
<meta name="current-identity-id" content="{{ Auth::user()->id }}" />
<meta name="current-identity-name" content="{{ Auth::user()->name }}" />
@endauth

Now, we're going to create a new Stimulus controller that is going to be responsible for the dropdown visibilily. It should only show it if the currently authenticated user is the creator of the Chirp. First, let's create the controller:

php artisan stimulus:make visible_to_creator

Now, update the Stimulus controller to look like this:

resources/js/controllers/visible_to_creator_controller.js

import { Controller } from "@hotwired/stimulus"
import { Current } from 'current.js'
 
// Connects to data-controller="visible-to-creator"
export default class extends Controller {
    static values = {
        id: String,
    }
 
    static classes = ['hidden']
 
    connect() {
        this.toggleVisibility()
    }
 
    toggleVisibility() {
        if (this.idValue == Current.identity.id) {
            this.element.classList.remove(...this.hiddenClasses)
        } else {
            this.element.classList.add(...this.hiddenClasses)
        }
    }
}

Now, let's update our _chirp.blade.php partial to use this controller instead of handling this in the server-side:

resources/views/chirps/_chirp.blade.php

<x-turbo-frame :id="$chirp" class="p-6 flex space-x-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        ...
        <path stroke-linecap="round" stroke-linejoin="round"
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        
    </svg>
 
    <div class="flex-1">
        <div class="flex justify-between items-center">
            <div>
                <span class="text-gray-800 dark:text-gray-200">{{ $chirp->user->name }}</span>
                <small class="ml-2 text-sm text-gray-600 dark:text-gray-400"><x-relative-time :date="$chirp->created_at" /></small>
                @unless ($chirp->created_at->eq($chirp->updated_at))
                <small class="text-sm text-gray-600"> &middot; edited</small>
                @endunless
            </div>
 
            @if (Auth::id() === $chirp->user->id) 
            <x-dropdown align="right" width="48">
            <x-dropdown align="right" width="48" class="hidden" data-controller="visible-to-creator" data-visible-to-creator-id-value="{{ $chirp->user_id }}" data-visible-to-creator-hidden-class="hidden">
                ...
                <x-slot name="trigger">
                    <button>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                        </svg>
                    </button>
                </x-slot>
 
                <x-slot name="content">
                    <x-dropdown-link href="{{ route('chirps.edit', $chirp) }}">{{ __('Edit') }}</x-dropdown-link>
 
                    <form action="{{ route('chirps.destroy', $chirp) }}" method="POST">
                        @method('DELETE')
 
                        <x-dropdown-button type="submit">{{ __('Delete') }}</x-dropdown-button>
                    </form>
                </x-slot>
                
            </x-dropdown>
            @endif 
        </div>
        <p class="mt-4 text-lg text-gray-900 dark:text-gray-200">{{ $chirp->message }}</p>
    </div>
</x-turbo-frame>

Next, we need to tweak our dropdown.blade.php Blade component to accept and merge the class, data-controller, and data-action attributes:

resources/views/components/dropdown.blade.php

@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white'])
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white', 'dataController' => '', 'dataAction' => ''])
 ...
@php
switch ($align) {
    case 'left':
        $alignmentClasses = 'origin-top-left left-0';
        break;
    case 'top':
        $alignmentClasses = 'origin-top';
        break;
    case 'right':
    default:
        $alignmentClasses = 'origin-top-right right-0';
        break;
}
 
switch ($width) {
    case '48':
        $width = 'w-48';
        break;
}
@endphp
 
<div class="relative" data-controller="dropdown" data-action="turbo:before-cache@window->dropdown#closeNow click@window->dropdown#close close->dropdown#close">
<div {{ $attributes->merge(['class' => 'relative']) }} data-controller="dropdown {{ $dataController }}" data-action="turbo:before-cache@window->dropdown#closeNow click@window->dropdown#close close->dropdown#close {{ $dataAction }}">
    ...
    <div data-action="click->dropdown#toggle" data-dropdown-target="trigger">
        {{ $trigger }}
    </div>
 
    <div
        data-dropdown-target="menu"
        data-transition-enter="transition ease-out duration-200"
        data-transition-enter-start="transform opacity-0 scale-95"
        data-transition-enter-end="transform opacity-100 scale-100"
        data-transition-leave="transition ease-in duration-75"
        data-transition-leave-start="transform opacity-100 scale-100"
        data-transition-leave-end="transform opacity-0 scale-95"
        class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }} hidden"
    >
        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
            {{ $content }}
        </div>
    </div>
    
</div>

Now, if you try creating another user and test this out, you'll see that the dropdown only shows up for the creator of the Chirp!

Dropdown only shows up for creator

This change also makes our entire _chirp partial cacheable! We could cache it and only render that when changes are made to the Chirp model using the Chirp's updated_at timestamps, for example.

Continue to setting up the native app...

07. Broadcasting¶

Introduction¶

Setting Up Soketi¶

Quick Installation¶

Installing via Docker¶

Setting Up The Broadcasting Component¶

The Backend¶

The Frontend¶

Broadcasting Turbo Streams¶

Automatically Broadcasting on Model Changes¶

Testing it out¶

Extra Credit: Fixing The Missing Dropdowns¶

07. Broadcasting

Introduction

Setting Up Soketi

Quick Installation

Installing via Docker

Setting Up The Broadcasting Component

The Backend

The Frontend

Broadcasting Turbo Streams

Automatically Broadcasting on Model Changes

Testing it out

Extra Credit: Fixing The Missing Dropdowns