Intro

Vue Laravel Echo - Simply import Laravel Echo to Vue instance

• Intro
• Install
  • main.js
• Usage
  • In instance
  • In router
  • In Vuex
• API

Install

yarn add @phantasweng/vue-echo

or

npm install @phantasweng/vue-echo

main.js

import VueEcho from '@/plugins/vue-echo'

Vue.use(VueEcho, {
  broadcaster: 'pusher',
  key: process.env.VUE_APP_ECHO_KEY,
  wsHost: process.env.VUE_APP_ECHO_HOST,
  wsPort: process.env.VUE_APP_ECHO_PORT,
  forceTLS: false,
  disableStats: true,
  authEndpoint: process.env.VUE_APP_ECHO_AUTH,
  auth: { headers: { Authorization: 'Bearer ' + Cookies.get('my_access_token') } }
}, store)

Usage

In instance

this.$echo.join(channelName, { isPrivate: true })
this.$echo.subscribe(channelName, eventName, (e) => {...})
this.$echo.unsubscribe(channelName, eventName)

In router

import { Echo } from '@/plugins/vue-echo'

Echo.join(channelName, { isPrivate: true })

Echo.subscribe(channelName, eventName, (e) => {...})
Echo.unsubscribe(channelName, eventName)

In Vuex

import { Echo } from '@/plugins/vue-echo'
Echo.join(...)

// OR

this._vm.$echo.join(...)

API

| Name | Description | | |-------------|---------------------|---------------------------------------------------------------------| | join | 加入 Channel | function (channelName, { isPrivate }) | | leave | 離開 Channel | function (channelName) | | subscribe | 訂閱 Event | function (channelName, eventName, callback) | | unsubscribe | 取消訂閱 Event | function (channelName, eventName) | | getChannels | 取得已加入 Channels | function | | getEvents | 取得已訂閱 Events | function 取得全部 OR function (channelName) 取得特定 Channel | | onChange | Channel, Event 變動 | 傳入 function，當變動時執行 Hook |