May 12, 2023

Level 8

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

Hello,

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

import './bootstrap';
Echo.channel('test_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.

How can I use Echo as a JS script instead of module import?

Thanks

LaryAI

2 years ago

Level 58

To use Laravel Echo in a blade file without Vite/Mix, you can include the necessary scripts in the blade file itself. Here's how:

In your blade file, include the following scripts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.0/echo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/7.0.3/pusher.min.js"></script>

Initialize Echo in your blade file:

<script>
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: '{{ env('PUSHER_APP_KEY') }}',
        cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
        forceTLS: true
    });
</script>

Now you can use Echo in your blade file:

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

Note: Make sure to replace the PUSHER_APP_KEY and PUSHER_APP_CLUSTER values with your own Pusher credentials.

1 like

Ligonsker

2 years ago

Level 8

There is still a problem. Using the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.0/echo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/7.0.3/pusher.min.js"></script>

the pusher script seem to work, but the echo script is not working, it gives me an error:

Unexpected token 'export' (at echo.min.js)

This CDN uses JS modules but I'm not sure it can work when using it directly in a php/html file?

Is there another way to try?

martinbean

2 years ago

Level 80

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

@ligonsker You can’t, because you need Vite or Mix to build the JavaScript file in browser-compatible JavaScript.

Ligonsker

2 years ago

Level 8

@martinbean can you please explain? The you mean the echo uses something like the es6 modules but I can't just use it like that? Is there no way to convert to a regular js?

When I checked in another project I made locally with vite and npm, it created some JS files in the source folder of echo and pusher in the node_modules folder. Perhaps I can use them?

Ligonsker

2 years ago

Level 8

@martinbean Update: I took the following files from a local project with Vite:

node_modules/laravel-echo/dist/echo.iife.js

and

node_modules/pusher-js/dist/echo.iife.js

And placed them in my js folder in the other project that doesn't have Vite, then used them like so:

<script src="{{ asset(js/pusher.min.js) }}"></script>
<script src="{{ asset(js/echo.iife.js) }}"></script>

And it worked!!!

I just wonder if something might break in the future (Of course I will keep copying the most updated echo and pusher files from the local installation whenever there's an update on the echo and pusher node packages)

martinbean

2 years ago

Level 80

@Ligonsker Your life would be much easier if you just used stuff properly. Pretty much every question I see from you stems from not using Composer, or not using NPM, or now not using a build tool like Mix/Vite.

What is the point of using frameworks and libraries if you’re not actually going to use them?

I get that security is a factor, but I also work for a company in a heavily-regulated industry and have nowhere near this amount of friction in doing my job.

1 like

Ligonsker

2 years ago

Level 8

@martinbean Haha I know but I'm working on it, as you see I solved one issue (comopser), next one will be the use of NPM (It's not in my power to do it alone, everything is locked behind the network restrictions and bureaucracy)

Please or to participate in this conversation.