CODEWITHSUNDEEP
laravel-5.4pusherlaravel-echo
Marco Cazzaro
Marco Cazzaro

Reputation: 701

Using Laravel Echo without Vue.js

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).

Upvotes: 3

Views: 9646

Answers (3)

NY HARENA fitahiantsoa RAHERIM
NY HARENA fitahiantsoa RAHERIM

Reputation: 51

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

  1. 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>

Upvotes: 2

Marco Cazzaro
Marco Cazzaro

Reputation: 701

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>

Upvotes: 8

Nisarg Bhavsar
Nisarg Bhavsar

Reputation: 956

First create event for broadcasting data as per the laravel document. And check console debug that your data being broadcasted or not. If your data is broadcasting than use javascript to listening data as given in pusher document.

Here you can check example : https://pusher.com/docs/javascript_quick_start

Upvotes: 0

Related Questions