All Projects → happyDemon → Vue Echo

happyDemon / Vue Echo

Vue integration for the Laravel Echo library.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Echo

vue3-chat
2021👨‍🎓Vue2/3全家桶 + Koa+Socket+Vant3前后端分离移动端聊天应用。vue+node全栈入门项目
Stars: ✭ 46 (-79.91%)
Mutual labels:  socket-io, vue2
Vue Fullstack
vue fullstack template
Stars: ✭ 297 (+29.69%)
Mutual labels:  socket-io, vue2
messenger
Laravel messenger. A full messenger suite for your new / existing laravel app! Private and group threads between multiple models, with real-time messaging, reactions, attachments, calling, chat bots, and more!
Stars: ✭ 194 (-15.28%)
Mutual labels:  pusher, socket-io
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+275.98%)
Mutual labels:  socket-io, vue2
vue-input-streaming
A Vue2 Input Streaming RealTime And Two Way Data Binding Broadcasting with Pusher
Stars: ✭ 24 (-89.52%)
Mutual labels:  pusher, vue2
Beaver
💨 A real time messaging system to build a scalable in-app notifications, multiplayer games, chat apps in web and mobile apps.
Stars: ✭ 1,056 (+361.14%)
Mutual labels:  pusher, socket-io
V Selectpage
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports
Stars: ✭ 211 (-7.86%)
Mutual labels:  vue2
Webrtc Video Broadcast
WebRTC video/audio broadcast
Stars: ✭ 217 (-5.24%)
Mutual labels:  socket-io
Egg Socket.io
socket.io plugin for eggjs.
Stars: ✭ 209 (-8.73%)
Mutual labels:  socket-io
Easy Dnd
A drag and drop implementation for Vue.js 2 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
Stars: ✭ 202 (-11.79%)
Mutual labels:  vue2
Vue Easy Gantt
A simple Vue.js gantt chart plugin for presenting weekly tasks
Stars: ✭ 226 (-1.31%)
Mutual labels:  vue2
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-2.62%)
Mutual labels:  vue2
Vue Tinymce Editor
This a component provides use of tinymce for vue developers
Stars: ✭ 216 (-5.68%)
Mutual labels:  vue2
Amaze Vue
一只基于amazeui样式封装的vue组件库。万水千山总是情,点个star再走行不行~~~
Stars: ✭ 211 (-7.86%)
Mutual labels:  vue2
Vue Emoji Picker
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
Stars: ✭ 218 (-4.8%)
Mutual labels:  vue2
Laravel Echo Server
Socket.io server for Laravel Echo
Stars: ✭ 2,487 (+986.03%)
Mutual labels:  socket-io
Vue Currency Filter
🍒 Lightweight vue currency filter based on accounting.js
Stars: ✭ 226 (-1.31%)
Mutual labels:  vue2
Vue2.0 Multi Page
基于vue-cli(vue2.X,webpack1.X,es6,sass环境)多页面开发
Stars: ✭ 206 (-10.04%)
Mutual labels:  vue2
Socket.io Redis
Adapter to enable broadcasting of events to multiple separate socket.io server nodes.
Stars: ✭ 2,524 (+1002.18%)
Mutual labels:  socket-io
Vuetheme
WordPress theme using Rest API and Vue.js
Stars: ✭ 219 (-4.37%)
Mutual labels:  vue2

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);
            });
        }
    }
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].