This PR is going to make the process of implementing broadcasting in the React/Vue starter kits super simple.

This PR will detect if a users application utilizes react or vue. It will also check for the existense of the typescript dependency. Then, when the developer runs the php artisan install:broadcasting command it will install the necessary Echo hook or composable.

React

Running php artisan install:broadcasting, the use-echo-ts.stub will be installed in the resources/js/hooks folder. It can then be leveraged inside of any component, like so:

import { useEcho } from '@/hooks/use-echo';

useEcho('test-channel', 'test.event', (payload) => console.log(payload), [], 'public');

This will subscribe to test-channel and log the payload when test.event is fired.

Vue

Running php artisan install:broadcasting, the useEcho-ts.stub will be installed in the resources/js/composables folder. It can then be leveraged inside of any component, like so:

import { useEcho } from '@/composables/useEcho';

useEcho('test-channel', 'test.event', (payload) => { console.log(payload) }, [], 'public');

This is the exact same as React except the useEcho is stored in the composables folder as opposed to the hooks folder.

Configuration

Before using this hook/composable, echo needs to be configured, like so:

app.tsx

import { configureEcho } from './hooks/use-echo';

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'],
});

This will allow developers to modify echo to use reverb, pusher, ably or any other websocket service. This is going to be added by default (Still adding this functionality to the install:broadcasting command. After I finish implementing the publishing of the configure, this update will be good to go!