Broadcasting starter kit docs

broadcasting.md

@@ -36,6 +36,10 @@
 - [Model Broadcasting](#model-broadcasting)
     - [Model Broadcasting Conventions](#model-broadcasting-conventions)
     - [Listening for Model Broadcasts](#listening-for-model-broadcasts)
+- [Installation in Starter Kits](#installation-in-starter-kits)
+    - [Using the Hook/Composable](#using-the-hook-composable)
+    - [Configuring Echo in Starter Kits](#configuring-echo-in-starter-kits)
+    - [Testing Broadcasting in Starter Kits](#testing-broadcasting-in-starter-kits)
 - [Client Events](#client-events)
 - [Notifications](#notifications)
 
@@ -1213,6 +1217,88 @@ Echo.private(`App.Models.User.${this.user.id}`)
     });
 ```
 
+<a name="installation-in-starter-kits"></a>
+## Installation in Starter Kits
+
+Using broadcasting in your React or Vue starter kit is incredibly simple. When you run the `install:broadcasting` command, a [hook](https://react.dev/reference/react/hooks) or [composable](https://vuejs.org/guide/reusability/composables) will automatically be published to your `resources/js` folder. From there, you can immediately start listening to events.
+
+> [!NOTE]
+> Using the Livewire starter kit? Livewire offers seamless integration with WebSockets. [Learn more here](https://livewire.laravel.com/docs/events#real-time-events-using-laravel-echo).
+
+<a name="using-the-hook-composable"></a>
+### Using the Hook/Composable
+
+To begin listening for events, first, import the hook or composable into any component or page:
+
+```jsx
+// For React
+import { useEcho } from '@/hooks/use-echo';
+
+// For Vue
+import { useEcho } from '@/composables/useEcho';
+```
+
+Then, use the `useEcho` hook or composable to listen for events:
+
+```jsx
+useEcho('test-channel', 'test.event', (payload) => { console.log(payload) }, [], 'public');
+```
+<a name="configuring-echo-in-starter-kits"></a>
+### Configuring Echo in Starter Kits
+
+The `install:broadcasting` command automatically injects the necessary Echo configuration into your **app.tsx** or **app.ts	** file:
+
+```ts
+// For React
+import { configureEcho } from './hooks/use-echo';
+// For Vue
+import { configureEcho } from './composables/useEcho';
+
+configureEcho({
+    broadcaster: 'reverb',
+    key: import.meta.env.VITE_REVERB_APP_KEY,
+    wsHost: import.meta.env.VITE_REVERB_HOST,
+    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
+    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
+    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
+    enabledTransports: ['ws', 'wss'],
+});
+```
+
+You can modify this configuration to use `reverb`, `pusher`, `ably`, or any other WebSocket service of your choice.
+
+<a name="testing-broadcasting-in-starter-kits"></a>
+### Testing Broadcasting in Starter Kits
+
+You can broadcast a message using a Laravel Event or an anonymous event. For simplicity, we'll use an anonymous event in this example.
+
+If you've implemented one of the listener examples above and are listening on the `test-channel` for a `test.event`, you can trigger a broadcast by creating a simple GET route in your `routes/web.php` file like so:
+
+```php
+use Illuminate\Support\Facades\Broadcast;
+
+Route::get('test-channel', function () {
+    Broadcast::on('test-channel')
+            ->as('test.event')
+            ->with(['message' => 'Hello World!'])
+            ->send();
+});
+```
+
+Next, navigate to a page listening on the `test-channel`. Open your browser's developer tools and go to the **Network** tab. You should see a WebSocket connection to the server. Click on that request to view the incoming messages.
+
+Then, open a new browser tab and visit the `/test-channel` route. You should now see a new message in the WebSocket logs with the following payload:
+
+```json
+{
+    "event": "test.event",
+    "data": "{\"message\":\"Hello World!\"}",
+    "channel": "test-channel"
+}
+```
+
+You can decode this payload to access the event data. And just like that, you've set up a real-time socket connection where the server can send messages directly to the client.
+
 <a name="client-events"></a>
 ## Client Events
 
@@ -1253,4 +1339,4 @@ Echo.private(`App.Models.User.${userId}`)
     });
 ```
 
-In this example, all notifications sent to `App\Models\User` instances via the `broadcast` channel would be received by the callback. A channel authorization callback for the `App.Models.User.{id}` channel is included in your application's `routes/channels.php` file.
+In this example, all notifications sent to `App\Models\User` instances via the `broadcast` channel would be received by the callback. A channel authorization callback for the `App.Models.User.{id}` channel is included in your application's `routes/channels.php` file.