Cannot broadcasting after try Turbo Laravel Bootcamp

[kresnasatya]

Hi Tony, thank you for create Turbo Laravel Bootcamp. I have been try official Bootcamp from Laravel especially Livewire. But, I also would like to try Turbo because I'm curious. I have follow the tutorial Build Chirper for Web until section Hotwire Everything. But, after I try in section Broadcasting it doesn't work. I try the case when user create chirper.

If I read the Bootcamp docs, it illustrates that I should have two user on different browsers. So, when one user create a chirp on one tab browser then another user automatically receive a chirp from the previous user via web socket. I try this but it doesn't work. Here's the gif demo.

Here's my repo: https://github.com/kresnasatya/chirper/tree/hotwire-turbo

I'm using Laravel version 10 and dependencies below.

fakerphp/faker                    v1.23.0  Faker is a PHP library that gene...
guzzlehttp/guzzle                 7.8.0    Guzzle is a PHP HTTP client library
hotwired-laravel/stimulus-laravel 0.3.1    Use Stimulus in your Laravel app
hotwired-laravel/turbo-laravel    1.12.2   Turbo Laravel gives you a set of...
laravel/breeze                    v1.26.0  Minimal Laravel authentication s...
laravel/framework                 v10.30.1 The Laravel Framework.
laravel/pint                      v1.13.5  An opinionated code formatter fo...
laravel/sail                      v1.26.0  Docker files for running a basic...
laravel/sanctum                   v3.3.1   Laravel Sanctum provides a feath...
laravel/tinker                    v2.8.2   Powerful REPL for the Laravel fr...
mockery/mockery                   1.6.6    Mockery is a simple yet flexible...
nunomaduro/collision              v7.10.0  Cli error handling for console/c...
phpunit/phpunit                   10.4.2   The PHP Unit Testing framework.
pusher/pusher-php-server          7.2.3    Library for interacting with the...
spatie/laravel-ignition           2.3.1    A beautiful error page for Larav...
tonysm/importmap-laravel          1.6.0    Use ESM with importmap to manage...
tonysm/tailwindcss-laravel        0.10.1   This package wraps up the standa..

I hope it helps.

[tonysm]

Hey @kresnasatya thanks for taking a look at it.

Your console error suggests that Laravel Echo is not properly configured on your end. Thanks for putting up a demo repo, I'll try running it here real quick.

[tonysm]

@kresnasatya so, I think you may have missed a few steps on the bootcamp. I was able to make it work with the following changes:

Add the #chirps DOM ID to the element wrapping chirps:

diff --git a/resources/views/chirps/index.blade.php b/resources/views/chirps/index.blade.php
index 953cc6e..ce93181 100644
--- a/resources/views/chirps/index.blade.php
+++ b/resources/views/chirps/index.blade.php
@@ -5,7 +5,7 @@
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
         @include('chirps._form')

-        <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
+        <div id="chirps" class="mt-6 bg-white shadow-sm rounded-lg divide-y">
             @each ('chirps._chirp', $chirps, 'chirp')
         </div>
     </div>

Setup Laravel Echo in the bootstrap.js file (otherwise it looks like there's a conflict with the window.Echo and the local Echo instance when you import the custom element):

diff --git a/resources/js/app.js b/resources/js/app.js
index b48160f..52f2791 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,19 +1,3 @@
-import Echo from 'laravel-echo';
-import Pusher from 'pusher-js';
-window.Pusher = Pusher;
-
-import { current } from './libs/current.js';
-
-window.Echo = new Echo({
-    broadcaster: 'pusher',
-    key: current.pusher.key,
-    cluster: current.pusher.cluster,
-    wsHost: current.pusher.wsHost,
-    wsPort: current.pusher.wsPort,
-    wssPort: current.pusher.wssPort,
-    forceTLS: false,
-    enableTransports: ['ws', 'wss']
-});
-
+import 'bootstrap';
 import 'elements/turbo-echo-stream-tag';
 import 'libs';
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 846d350..8f75dd0 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,32 +1,22 @@
-/**
- * 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 Echo from 'laravel-echo';
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;

-// import Pusher from 'pusher-js';
-// window.Pusher = Pusher;
+import { current } from 'libs/current';
+window.current = current;

-// 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'],
-// });
+window.Echo = new Echo({
+    broadcaster: 'pusher',
+    key: current.pusher.key,
+    cluster: current.pusher.cluster,
+    wsHost: current.pusher.wsHost,
+    wsPort: current.pusher.wsPort,
+    wssPort: current.pusher.wssPort,
+    forceTLS: false,
+    enableTransports: ['ws', 'wss']
+});

Axios only works with importmaps on version 0.27:

php artisan importmap:unpin axios
php artisan importmap:pin axios@0.27

With these changes, it works for me. Make sure you follow the bootcamp steps closely. If you have any further question, pls let me know! Closing the issue for now. Btw, I'm working on an update to the bootcamp.

[kresnasatya]

Hi @tonysm, thank you so much for your help! Now, it works well. Yes, I was set the echo and pusher in resources/js/app.js. But, I don't know that it will have side effect like the echo and pusher don't work if I put them there. So, put echo and pusher to resources/js/bootstrap.js is the right solution.

I'm sorry if I'm too fast follow the tutorial. For feedback maybe related with diff snippets highlight. I wish Turbo Laravel Bootcamp follow the Laravel Bootcamp for the diff snippets highlight (e.g. red background for delete syntax and green blackground for add syntax also they have a + and - symbols). Meanwhile for the turbo laravel at this moment is blue background for add syntax). Here is the example that I like from Laravel Bootcamp. I wish Turbo Laravel Bootcamp can catch up!

Once again. Thank you so much, Tony!

[tonysm]

Yeah, I noticed the colors were a bit weird, which is weird because it's also using Torchlight (same tool Laravel uses). I'll take a look at it on the upcoming revamp. 👍🏼

[tonysm]

@kresnasatya I've moved the Bootcamp to the docs site, so the highlighting should be same as the docs now: https://turbo-laravel.com/guides