happydemon/vue-echo

Vue integration for the Laravel Echo library.

vue-echo

Vue 2 integration for the Laravel Echo library.

This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for a simple channel subscription on each instance, or using Laravel Echo through this.$echo.

Install

npm install vue-echo --save

Usage

Initialize

First you'll need to register the plugin and, optionally, initialize the Echo instance.

import VueEcho from 'vue-echo';
  
Vue.use(VueEcho, {
    broadcaster: 'pusher',
    key: 'PUSHER KEY'
});

/**
 * Alternatively you can pass an echo instance:
 * ********************************************
 * import Echo from 'laravel-echo';
 * 
 * const EchoInstance = new Echo({
 *     broadcaster: 'pusher',  
 *     key: 'PUSHER KEY'
 * });
 * Vue.use(VueEcho, EchoInstance);
 */

Using Echo

Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the this.$echo property on the connection you specified earlier.

var vm = new Vue({
    mounted() {
        // Listen for the 'NewBlogPost' event in the 'team.1' private channel
        this.$echo.private('team.1').listen('NewBlogPost', (payload) => {
            console.log(payload);
        });
    }
});

Subscribe your Vue instance to a single channel

You can subscribe a vue instance to a single standard channel if needed and define your events.

var vm = new Vue({
    channel: 'blog',
    echo: {
        'BlogPostCreated': (payload, vm) => {
            console.log('blog post created', payload);
        },
        'BlogPostDeleted': (payload, vm) => {
            console.log('blog post deleted', payload);
        }
    }
});

Since the scope of this would be the same as the scope where you declare your Vue instance a second parameter is added to these locally registered events. This parameter is a direct reference to your Vue instance, you can make any changes you need through there.

Subscribing to channels

Laravel Echo allows you to subscribe to: normal, private and presence channels.

In the example above, we subscribed to a standard channel.

Private channel

If you would like to subscribe to a private channel instead, prefix your channel name with private:

var vm = new Vue({
    channel: 'private:team.1',
    echo: {
        'BlogPostCreated': (payload, vm) => {
            console.log('blog post created', payload);
        },
        'BlogPostDeleted': (payload, vm) => {
            console.log('blog post deleted', payload);
        }
    }
});

Presence channel

If you would like to subscribe to presence channel instead, prefix your channel name with presence:

var vm = new Vue({
    channel: 'presence:team.1.chat',
    echo: {
        'NewMessage': (payload, vm) => {
            console.log('new message from team', payload);
        }
    }
});

Manually listening to events

If there's a scenario where you want to listen to events after certain conditions are met, you can do so through this.channel:

var vm = new Vue({
    channel: 'private:team.1',
    echo: {
        'BlogPostCreated': (payload, vm) => {
            console.log('blog post created', payload);
        },
        'BlogPostDeleted': (payload, vm) => {
            console.log('blog post deleted', payload);
        }
    },
    mounted(){
        if(window.user.role == 'admin'){
            this.channel.listen('BlogPostEdited', (payload) => {
                console.log('As admin I get notified of edits', payload);
            });
        }
    }
});

vue-echo's Issues

Support for Vuex

• support for namespaced actions
• support for namespaced mutations

listenForWhisper doesn't seem to be working

I can't seem to make whispers go from one end to the other. Here's my code:

answers.vue (a user clicks on an answer, a whisper is sent)

  this.$echo.private('answer')
      .whisper('answering', {
          userId: this.$auth.user().id
      })

manage.vue (where the owner should receive the whisper)

  mounted () {
    this.$echo.private('answer')
      .listenForWhisper('answering', (e) => {
        console.log('answering ...', e);
      })
  },

Whenever I try to whisper, nothing happens. Any idea why?

Pusher is not defined

Hi,
Nice package. I followed the installation instructions documented and it breaks the app with the log message Pusher not defined. Please help

Erro 401 - laravel + broadcasting + socket.io + redis with passport

public channels function normally. For private channels, the error is:

⚠ [04:53:17] - 4JvRYXBHYYCJCB1UAAAD could not be authenticated to private-notification.1 {"message":"Unauthenticated."} Client can not be authenticated, got HTTP status 401

I tried every possible possibility and I did not succeed!I'm desperate because I have time to deliver this functionality. Can someone help me? Why can not I authenticate private channels with passport?

My current setting:

BroadcastServiceProvider.php

ublic function boot()
{

    Broadcast::routes(['middleware' => 'auth:api']);
    require base_path('routes/channels.php');
}

laravel-echo-server.json

{
    "authHost": "http://www.softshoplocal.com.br",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "9c93c4f229bb615f",
            "key": "6efe137de4101bc1b0429e6afd29e817"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "www.softshoplocal.com.br",
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": ""
}

channels.php

Broadcast::channel('notification.1', function ($user, $lojaId) {
    return true;
});

SendNotification.php

public function broadcastOn()
{
        //return new Channel('notification');
        return new PrivateChannel('notification.1');
}

my frontend (file vue)

Vue.use(VueEcho, {
    broadcaster: 'socket.io',
    host: 'localhost:6001',
    auth: {
        headers: {
            Authorization: 'Bearer' + sessionStorage.getItem("ss348978Token")
        },
    },
});

.....

this.$echo.private('notification.1').listen('SendNotification', (payload) => {
            this.mensagem.push(payload.data)
});

Presence channel whisper doesn't work

Presence channel whisper doesn't work, because this.channel.whisper is not a function.
inputType: function () { this.channel .whisper('typing', { name: this.user.name }); },

help with subscribing to a normal channel (not private or presence)

please ignore this, for some reason instantiating this inside of bootstrap.js did not make it available inside of my application

Laravel-echo-server support?

Good evening. I'm interested in running some prototypes with echo and vue and came across your project. The documentation mentions the pusher driver, but I'm a DIY fan. Does the package support the laravel community socket.io version ?

If not, are you interested in pull requests to add the functionality?

Context of this in callbacks

When using the echo callbacks, the context of this isn't the Vue instance.

Presence and Private channel not working

I tried a presence channel and nothing hapened

Host option not working

Host option not working, please help

Vue.use(VueEcho, {
    broadcaster: 'pusher',
    key: process.env.PUSHER_API_KEY,
    cluster: 'eu',
    encrypted: true,
    authEndpoint: '/auth',
    host: 'http://test.com'
});

Result:

1.02 or 1.0.2?

It looks like there's some issue with the tag as the last version published on NPM is still 1.0.1 and I'm unable to get the latest version and I think it's because of the latest tag which is 1.02 and it's unable to detect?

Can you please properly tag with correct version?

Using 'this' in channel:'user.' + this.user.id

can I do something like this to apply current vue instance scope in channel: 'user.' + this.user.id

channel: function (vm) {
return 'user.' + vm.user.id;
}

Laravel 5.5 Vuetified Real Time Starter App Using Vue Echo

Laravel 5.5 is just around the corner and Building SPA has never been so Easy With Vue JS.
And Of Course this Awesome Vue-Echo Plugin
Everyone Has Always Had Trouble Setting Up Their Own First Real Time App
Instead of Experimenting your Set up...
Ive Already Done it , and Put it all in One Piece...

This Starter App is Compose of Laravel 5.5 , Laravel Passport , Laravel Echo Server , Laravel Echo, Vue , Vue Router, Vuetify ,Vue Echo. Perfect for SPA Realtime Application...
Using Our Favorite Frameworks.

Very Easy to Install , and If Your Using VSCode , The Bonus is You Get Very Specific Linting and Auto Fix Error Code.

In the Future Ill Add a way to Customize and Save State of the Vuetify Components in the Back end.
Thats the Purpose of the Vuetified Service Provider...

But If You Like if Please Star and Share :)

Inside Components?

This looks like what I need, is there a way to use it inside a component?

And also how to define a channel name dynamically?

Thanks.

when change route cannot subscribe

vue-echo/vue-echo.js

Line 56 in 4771db4

this.channel.unsubscribe();

Uncaught ReferenceError: io is not defined

import VueEcho from 'vue-echo';
Vue.use(VueEcho, {
    broadcaster: 'socket.io',
    host: 'http://site.local:6001'
});

Error: Uncaught ReferenceError: io is not defined

Is it possible to trigger events using this package ??

something similar to that Ref

Thanks

Change activityTimeout

how can I add activityTimeout option when initializing connect to pusher ?

Cluster specifying

I've got following error

As you can see I cannot connect to pusher ws because cluster is not specified. I cannot find in documentation where I can set it. Could you please explain how can I do it?

I do not know how to output in the browser console

main.js

App.vue

In the network you can see the accepted message

But there is no console
Send a message in https://dashboard.pusher.com

how can i use vue-echo without pusher but use redis

how can i use vue-echo without pusher but use redis

Thanks

this.$echo.presence is not a function

The doc said:

Using Echo

Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the this.$echo property on the connection you specified earlier.

var vm = new Vue({
    mounted() {
        // Listen for the 'NewBlogPost' event in the 'team.1' private channel
        this.$echo.private('team.1').listen('NewBlogPost', (payload) => {
            console.log(payload);
        });
    }
});

I received this error