Skip to content

Commit e6db9f4

Browse files
PhantasWengPhantasWeng
committed
Initialize vue-echo
0 parents  commit e6db9f4

File tree

11 files changed

+927
-0
lines changed

11 files changed

+927
-0
lines changed

‎.gitignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.DS_Store
2+
node_modules
3+
4+
# Log files
5+
npm-debug.log*
6+
yarn-debug.log*
7+
yarn-error.log*
8+
pnpm-debug.log*
9+
10+
# Editor directories and files
11+
.idea
12+
.vscode
13+
*.suo
14+
*.ntvs*
15+
*.njsproj
16+
*.sln
17+
*.sw?
18+

‎README.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Intro
2+
Vue Laravel Echo - Simply import Laravel Echo to Vue instance
3+
4+
- [Intro](#intro)
5+
- [Install](#install)
6+
- [main.js](#mainjs)
7+
- [Usage](#usage)
8+
- [In instance](#in-instance)
9+
- [In router](#in-router)
10+
- [In Vuex](#in-vuex)
11+
- [API](#api)
12+
13+
# Install
14+
15+
`yarn add @phantasweng/vue-echo`
16+
17+
or
18+
19+
`npm install @phantasweng/vue-echo`
20+
21+
## main.js
22+
23+
```js
24+
import VueEcho from '@/plugins/vue-echo'
25+
26+
Vue.use(VueEcho, {
27+
broadcaster: 'pusher',
28+
key: process.env.VUE_APP_ECHO_KEY,
29+
wsHost: process.env.VUE_APP_ECHO_HOST,
30+
wsPort: process.env.VUE_APP_ECHO_PORT,
31+
forceTLS: false,
32+
disableStats: true,
33+
authEndpoint: process.env.VUE_APP_ECHO_AUTH,
34+
auth: { headers: { Authorization: 'Bearer ' + Cookies.get('owlpay_access_token') } }
35+
}, store)
36+
37+
```
38+
39+
# Usage
40+
41+
## In instance
42+
43+
```js
44+
this.$echo.join(channelName, { isPrivate: true })
45+
this.$echo.subscribe(channelName, eventName, (e) => {...})
46+
this.$echo.unsubscribe(channelName, eventName)
47+
```
48+
49+
## In router
50+
51+
```js
52+
import { Echo } from '@/plugins/vue-echo'
53+
54+
Echo.join(channelName, { isPrivate: true })
55+
56+
Echo.subscribe(channelName, eventName, (e) => {...})
57+
Echo.unsubscribe(channelName, eventName)
58+
```
59+
60+
## In Vuex
61+
62+
```js
63+
import { Echo } from '@/plugins/vue-echo'
64+
Echo.join(...)
65+
66+
// OR
67+
68+
this._vm.$echo.join(...)
69+
```
70+
71+
# API
72+
| Name | Description | |
73+
|-------------|---------------------|---------------------------------------------------------------------|
74+
| join | 加入 Channel | function `(channelName, { isPrivate })` |
75+
| leave | 離開 Channel | function `(channelName)` |
76+
| subscribe | 訂閱 Event | function `(channelName, eventName, callback)` |
77+
| unsubscribe | 取消訂閱 Event | function `(channelName, eventName)` |
78+
| getChannels | 取得已加入 Channels | function |
79+
| getEvents | 取得已訂閱 Events | function 取得全部 OR function (channelName) 取得特定 Channel |

‎dist/index.esm.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import LaravelEcho from 'laravel-echo';
2+
3+
function getChannel(channels, channelName) {
4+
const target = Object.keys(channels).find(channel => channels[channel].name.replace('private-', '') === channelName);
5+
return channels[target];
6+
}
7+
8+
function join(channelName, options) {
9+
const {
10+
isPrivate
11+
} = options;
12+
console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
13+
isPrivate ? this.private(channelName) : this.channel(channelName);
14+
}
15+
function leave(channelName) {
16+
const targetChannel = getChannel(this.connector.channels, channelName);
17+
console.debug('[Echo] leaveChannel -', targetChannel.name);
18+
this.leave(channelName);
19+
}
20+
function subscribe(channelName, eventName, callback) {
21+
const targetChannel = getChannel(this.connector.channels, channelName);
22+
targetChannel.listen(eventName, res => {
23+
if (callback) callback(res);
24+
});
25+
console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
26+
}
27+
function unsubscribe(channelName, eventName) {
28+
const targetChannel = getChannel(this.connector.channels, channelName);
29+
targetChannel.stopListening(eventName);
30+
console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
31+
}
32+
function getChannels() {
33+
return this.connector.channels;
34+
}
35+
function getEvents(channelName) {
36+
const channel = Object.keys(this.connector.channels).find(key => key.includes(channelName));
37+
38+
if (channel) {
39+
return this.connector.channels[channel].subscription.callbacks._callbacks;
40+
} else {
41+
const channels = this.connector.channels;
42+
let events = {};
43+
44+
for (const channel of Object.keys(channels)) {
45+
events = { ...events,
46+
...channels[channel].subscription.callbacks._callbacks
47+
};
48+
}
49+
50+
return events;
51+
}
52+
}
53+
54+
window.Pusher = require('pusher-js');
55+
const defaultOptions = {
56+
broadcaster: 'pusher',
57+
forceTLS: true
58+
};
59+
let Echo;
60+
const Plugin = {
61+
install(Vue, options = {}, store) {
62+
if (this.installed) {
63+
return;
64+
}
65+
66+
this.installed = true;
67+
const config = Vue.util.mergeOptions(defaultOptions, options || {});
68+
const laravelEcho = new LaravelEcho(config);
69+
Vue.prototype.$echo = Echo = { ...laravelEcho
70+
};
71+
Object.setPrototypeOf(Echo, {
72+
join: join.bind(laravelEcho),
73+
leave: leave.bind(laravelEcho),
74+
subscribe: subscribe.bind(laravelEcho),
75+
unsubscribe: unsubscribe.bind(laravelEcho),
76+
getChannels: getChannels.bind(laravelEcho),
77+
getEvents: getEvents.bind(laravelEcho)
78+
});
79+
Vue.mixin({
80+
mounted() {}
81+
82+
});
83+
}
84+
85+
}; // This exports the plugin object.
86+
87+
export default Plugin;
88+
export { Echo };

‎dist/index.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
(function (exports, LaravelEcho) {
2+
'use strict';
3+
4+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
5+
6+
var LaravelEcho__default = /*#__PURE__*/_interopDefaultLegacy(LaravelEcho);
7+
8+
function getChannel(channels, channelName) {
9+
const target = Object.keys(channels).find(channel => channels[channel].name.replace('private-', '') === channelName);
10+
return channels[target];
11+
}
12+
13+
function join(channelName, options) {
14+
const {
15+
isPrivate
16+
} = options;
17+
console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
18+
isPrivate ? this.private(channelName) : this.channel(channelName);
19+
}
20+
function leave(channelName) {
21+
const targetChannel = getChannel(this.connector.channels, channelName);
22+
console.debug('[Echo] leaveChannel -', targetChannel.name);
23+
this.leave(channelName);
24+
}
25+
function subscribe(channelName, eventName, callback) {
26+
const targetChannel = getChannel(this.connector.channels, channelName);
27+
targetChannel.listen(eventName, res => {
28+
if (callback) callback(res);
29+
});
30+
console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
31+
}
32+
function unsubscribe(channelName, eventName) {
33+
const targetChannel = getChannel(this.connector.channels, channelName);
34+
targetChannel.stopListening(eventName);
35+
console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
36+
}
37+
function getChannels() {
38+
return this.connector.channels;
39+
}
40+
function getEvents(channelName) {
41+
const channel = Object.keys(this.connector.channels).find(key => key.includes(channelName));
42+
43+
if (channel) {
44+
return this.connector.channels[channel].subscription.callbacks._callbacks;
45+
} else {
46+
const channels = this.connector.channels;
47+
let events = {};
48+
49+
for (const channel of Object.keys(channels)) {
50+
events = { ...events,
51+
...channels[channel].subscription.callbacks._callbacks
52+
};
53+
}
54+
55+
return events;
56+
}
57+
}
58+
59+
window.Pusher = require('pusher-js');
60+
const defaultOptions = {
61+
broadcaster: 'pusher',
62+
forceTLS: true
63+
};
64+
exports.Echo = void 0;
65+
const Plugin = {
66+
install(Vue, options = {}, store) {
67+
if (this.installed) {
68+
return;
69+
}
70+
71+
this.installed = true;
72+
const config = Vue.util.mergeOptions(defaultOptions, options || {});
73+
const laravelEcho = new LaravelEcho__default['default'](config);
74+
Vue.prototype.$echo = exports.Echo = { ...laravelEcho
75+
};
76+
Object.setPrototypeOf(exports.Echo, {
77+
join: join.bind(laravelEcho),
78+
leave: leave.bind(laravelEcho),
79+
subscribe: subscribe.bind(laravelEcho),
80+
unsubscribe: unsubscribe.bind(laravelEcho),
81+
getChannels: getChannels.bind(laravelEcho),
82+
getEvents: getEvents.bind(laravelEcho)
83+
});
84+
Vue.mixin({
85+
mounted() {}
86+
87+
});
88+
}
89+
90+
}; // This exports the plugin object.
91+
92+
exports.default = Plugin;
93+
94+
Object.defineProperty(exports, '__esModule', { value: true });
95+
96+
return exports;
97+
98+
}({}, LaravelEcho));

‎dist/index.ssr.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, '__esModule', { value: true });
4+
5+
var LaravelEcho = require('laravel-echo');
6+
7+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8+
9+
var LaravelEcho__default = /*#__PURE__*/_interopDefaultLegacy(LaravelEcho);
10+
11+
function getChannel(channels, channelName) {
12+
const target = Object.keys(channels).find(channel => channels[channel].name.replace('private-', '') === channelName);
13+
return channels[target];
14+
}
15+
16+
function join(channelName, options) {
17+
const {
18+
isPrivate
19+
} = options;
20+
console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
21+
isPrivate ? this.private(channelName) : this.channel(channelName);
22+
}
23+
function leave(channelName) {
24+
const targetChannel = getChannel(this.connector.channels, channelName);
25+
console.debug('[Echo] leaveChannel -', targetChannel.name);
26+
this.leave(channelName);
27+
}
28+
function subscribe(channelName, eventName, callback) {
29+
const targetChannel = getChannel(this.connector.channels, channelName);
30+
targetChannel.listen(eventName, res => {
31+
if (callback) callback(res);
32+
});
33+
console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
34+
}
35+
function unsubscribe(channelName, eventName) {
36+
const targetChannel = getChannel(this.connector.channels, channelName);
37+
targetChannel.stopListening(eventName);
38+
console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
39+
}
40+
function getChannels() {
41+
return this.connector.channels;
42+
}
43+
function getEvents(channelName) {
44+
const channel = Object.keys(this.connector.channels).find(key => key.includes(channelName));
45+
46+
if (channel) {
47+
return this.connector.channels[channel].subscription.callbacks._callbacks;
48+
} else {
49+
const channels = this.connector.channels;
50+
let events = {};
51+
52+
for (const channel of Object.keys(channels)) {
53+
events = { ...events,
54+
...channels[channel].subscription.callbacks._callbacks
55+
};
56+
}
57+
58+
return events;
59+
}
60+
}
61+
62+
window.Pusher = require('pusher-js');
63+
const defaultOptions = {
64+
broadcaster: 'pusher',
65+
forceTLS: true
66+
};
67+
exports.Echo = void 0;
68+
const Plugin = {
69+
install(Vue, options = {}, store) {
70+
if (this.installed) {
71+
return;
72+
}
73+
74+
this.installed = true;
75+
const config = Vue.util.mergeOptions(defaultOptions, options || {});
76+
const laravelEcho = new LaravelEcho__default['default'](config);
77+
Vue.prototype.$echo = exports.Echo = { ...laravelEcho
78+
};
79+
Object.setPrototypeOf(exports.Echo, {
80+
join: join.bind(laravelEcho),
81+
leave: leave.bind(laravelEcho),
82+
subscribe: subscribe.bind(laravelEcho),
83+
unsubscribe: unsubscribe.bind(laravelEcho),
84+
getChannels: getChannels.bind(laravelEcho),
85+
getEvents: getEvents.bind(laravelEcho)
86+
});
87+
Vue.mixin({
88+
mounted() {}
89+
90+
});
91+
}
92+
93+
}; // This exports the plugin object.
94+
95+
exports.default = Plugin;

0 commit comments

Comments
 (0)