How to use Laravel Echo in blade files, without Vite/Mix?

Question

Right now I'm using Laravel Echo from /resources/js/app.js:

import './bootstrap';
Echo.channel('some_channel')
.listen('OrderShipmentStatusUpdated', (e) => {
    console.log("broadcast received");
});

and Echo is imported in /resources/js/bootstrap.js:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

But now I want to use Echo in an app that does not use Vite or Mix. so when I put the following code in the blade file:

 Echo.channel('some_channel')
    .listen('OrderShipmentStatusUpdated', (e) => {
        console.log("broadcast received");
        });

I get Uncaught ReferenceError: Echo is not defined error (obviously).

How can I use Echo as a JS script instead of module import? The docs only have an option to install via NPM, but is there no script file I can download?

Answer 1

For this, you need the CDN of pusher and the echo

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echo.iife.js"></script>

And slight modification of the Laravel doc code

window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'XXXXXXXXXXX',
    cluster: XXXXX',
    forceTLS: true
});

And use window.Echo.channel instead of just Echo.channel