Using Laravel Echo without Vue.js

Question

I have an website built using Laravel 5.4 and I am building the broadcasting system with Laravel Echo and Pusher, but unfortunately the documentation lacks in specifying the steps needed to make it work without Vue.js.

Is there someone who had this configuration working? I'd need a complete step to step guide, since installing Echo correctly (I would prefer a CDN but couldn't find one).

Answer 1

In the end, I figured out myself how to achieve Laravel Echo working with Pusher but without Vue.js

1. Follow all the instructions found here.

2. Assuming you have Pusher installed and configured and Laravel Echo installed via npm, go to your-project-folder/node_modules/laravel-echo/dist and copy echo.js in your Laravel public folder (e.g. your-project-folder/public/lib/js). I use Grunt, so I automated this process, it's just for sake of simplicity.

3. Add the refer in your Blade template:

   <script type="text/javascript" src="{{asset('lib/js/echo.js')}}"></script>

4. At the beginning of your Blade Template, in the point marked below, insert this line of code (it's just to avoid a JS error using echo.js directly):

   <script>
       window.Laravel = <?php echo json_encode([
           'csrfToken' => csrf_token(),
       ]); ?>;
       var module = { }; /*   <-----THIS LINE */
   </script>
   

5. In your footer, after the inclusion of all the JS files, call Laravel Echo this way:

   <script>
       window.Echo = new Echo({
           broadcaster: 'pusher',
           key: '{{env("PUSHER_KEY")}}',
           cluster: 'eu',
           encrypted: true,
           authEndpoint: '{{env("APP_URL")}}/broadcasting/auth'
       });
   </script>
   

6. If you want to listen for a channel, e.g. the notifications one, you can do it like this:

   <script>
       window.Echo.private('App.User.{{Auth::user()->id}}')
           .notification((notification) => {
               doSomeAmazingStuff();
       });
   </script>
   

Answer 2

I am using laravel websockets but I think it should be the same with the original Pusher. So :

1. Install laravel-echo and pusher with npm

2. Go to your-project-folder/node_modules/laravel-echo/dist and copy echo.js to your-project-folder/public/js

3. Go to your-project-folder/node_modules/pusher-js/dist and search for pusher.worker.js, rename it to pusher.js and copy your-project-folder/public/js

4. To the new pusher.js renamed add "export" before the "var Pusher" in the first line of code like so :

export var Pusher =

Or you can just use this echo.js and pusher.js file from my repository https://github.com/HarenaGit/laravel-websockets-without-vuejs

5. To where you want to listening for changes, you can listen like this

  <script type="module">

        import Echo from '{{asset('js/echo.js')}}'

        import {Pusher} from '{{asset('js/pusher.js')}}'

        window.Pusher = Pusher

        window.Echo = new Echo({
            broadcaster: 'pusher',
            key: 'server-notification-key',
            wsHost: window.location.hostname,
            wsPort: 6001,
            forceTLS: false,
            disableStats: true,
        });

        window.Echo.channel('your-channel')
        .listen('your-event-class', (e) => {
                console.log(e)
        })

        console.log("websokets in use")

</script>