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>