Skip to content

Commit 3caf93f

Browse files
PhantasWengPhantasWeng
committed
Merge upstream
2 parents cef2ca4 + c555cc7 commit 3caf93f

File tree

7 files changed

+89
-177
lines changed

7 files changed

+89
-177
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md

-25
This file was deleted.

‎.github/ISSUE_TEMPLATE/feature_request.md

-17
This file was deleted.

‎README.md

+35-37
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@
1212
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
1313
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
1414
</p>
15-
15+
<p align="center">
16+
<a href="https://www.patreon.com/MetinSeylan">
17+
<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
18+
</a>
19+
</p>
1620
<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
1721

1822
###### Demo
@@ -58,6 +62,7 @@ import Vue from 'vue'
5862
import store from './store'
5963
import App from './App.vue'
6064
import VueSocketIO from 'vue-socket.io'
65+
import SocketIO from 'socket.io-client'
6166

6267
const options = { path: '/my-app/' }; //Options object to pass into SocketIO
6368

@@ -87,7 +92,6 @@ connection|String/Socket.io-client|`null`|Required|Websocket server url or socke
8792
vuex.store|Vuex|`null`|Optional|Vuex store instance
8893
vuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions
8994
vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations
90-
vuex.options.useConnectionNamespace |Boolean|`false`|Optional|Use more than one connection namespace
9195

9296
#### 🌈 Component Level Usage
9397

@@ -124,6 +128,35 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
124128
this.sockets.unsubscribe('EVENT_NAME');
125129
```
126130

131+
##### Defining handlers for events with special characters
132+
133+
<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
134+
135+
``` javascript
136+
export default {
137+
name: 'Test',
138+
sockets: {
139+
connect: function () {
140+
console.log('socket to notification channel connected')
141+
},
142+
},
143+
144+
data () {
145+
return {
146+
something: [
147+
// ... something here for the data if you need.
148+
]
149+
}
150+
},
151+
152+
mounted () {
153+
this.$socket.subscribe("kebab-case", function(data) {
154+
console.log("This event was fired by eg. sio.emit('kebab-case')", data)
155+
})
156+
}
157+
}
158+
```
159+
127160
#### 🏆 Vuex Integration
128161
<p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
129162

@@ -148,41 +181,6 @@ export default new Vuex.Store({
148181
})
149182
```
150183

151-
#### 🏆 Connection Namespace
152-
<p>When you need to handle more than one namespaced connection, you need to set the `useConnectionNamespace` property of
153-
the options object to true. What this does is telling the plugin that you are going to be using more than one namespaced connection and you want to put every connection in their own `$socket` key.</p>
154-
155-
``` javascript
156-
import Vue from 'vue'
157-
import store from './store'
158-
import App from './App.vue'
159-
import VueSocketIO from 'vue-socket.io'
160-
161-
Vue.use(new VueSocketIO({
162-
debug: true,
163-
connection: 'http://metinseylan.com:1992/mynamespace',
164-
vuex: {
165-
store,
166-
options: {
167-
useConnectionNamespace: true
168-
}
169-
},
170-
options: { path: "/my-app/" } //Optional options
171-
}))
172-
173-
new Vue({
174-
router,
175-
store,
176-
render: h => h(App)
177-
}).$mount('#app')
178-
```
179-
180-
Then use it like this:
181-
182-
``` javascript
183-
Vue.$socket.mynamespace.emit('emit_method', data)
184-
```
185-
186184
## Stargazers over time
187185

188186
[![Stargazers over time](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io.svg)](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)

‎dist/vue-socketio.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-socket.io",
33
"author": "Metin Seylan <[email protected]>",
4-
"version": "3.0.7",
4+
"version": "3.0.10",
55
"description": "socket.io implementation for Vue.js and Vuex",
66
"main": "dist/vue-socketio.js",
77
"scripts": {
@@ -38,8 +38,6 @@
3838
"@babel/preset-env": "^7.1.0",
3939
"babel-loader": "^8.0.4",
4040
"cross-env": "^5.2.0",
41-
"vue": "^2.6.10",
42-
"vuex": "^3.1.1",
4341
"webpack": "^4.23.1",
4442
"webpack-cli": "^3.1.2"
4543
}

‎src/index.js

+34-44
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Mixin from "./mixin";
2-
import Logger from "./logger";
3-
import Listener from "./listener";
4-
import Emitter from "./emitter";
5-
import SocketIO from "socket.io-client";
1+
import Mixin from './mixin';
2+
import Logger from './logger';
3+
import Listener from './listener';
4+
import Emitter from './emitter';
5+
import SocketIO from 'socket.io-client';
66

77
export default class VueSocketIO {
88

@@ -19,8 +19,6 @@ export default class VueSocketIO {
1919
Logger.debug = debug;
2020
Logger.darkMode = darkMode;
2121
this.io = this.connect(connection, options);
22-
this.useConnectionNamespace = (options && options.useConnectionNamespace);
23-
this.namespaceName = (options && options.namespaceName);
2422
this.emitter = new Emitter(vuex);
2523
this.listener = new Listener(this.io, this.emitter);
2624

@@ -32,48 +30,40 @@ export default class VueSocketIO {
3230
*/
3331
install(Vue){
3432

35-
const namespace = this.namespaceName || this.io.nsp.replace("/", "");
36-
37-
if (this.useConnectionNamespace) {
38-
if (typeof Vue.prototype.$socket === "object") {
39-
Vue.prototype.$socket = {
40-
...Vue.prototype.$socket,
41-
[namespace]: this.io
42-
};
43-
44-
Vue.prototype.$vueSocketIo = {...Vue.prototype.$vueSocketIo, [namespace]: this};
45-
} else {
46-
Vue.prototype.$socket = {
47-
[namespace]: this.io
48-
};
49-
Vue.prototype.$vueSocketIo = { [namespace]: this};
50-
}
51-
} else {
52-
Vue.prototype.$socket = this.io;
53-
Vue.prototype.$vueSocketIo = this;
54-
}
55-
33+
Vue.prototype.$socket = this.io;
34+
Vue.prototype.$vueSocketIo = this;
5635
Vue.mixin(Mixin);
5736

5837
Logger.info('Vue-Socket.io plugin enabled');
5938

6039
}
6140

62-
/**
63-
* registering SocketIO instance
64-
* @param connection
65-
* @param options
66-
*/
67-
connect(connection, options) {
68-
if (connection && typeof connection === "object") {
69-
Logger.info(`Received socket.io-client instance`);
70-
return connection;
71-
} else if (typeof connection === "string") {
72-
const io = SocketIO(connection, options);
73-
Logger.info(`Received connection string`);
74-
return (this.io = io);
75-
} else {
76-
throw new Error("Unsupported connection type");
41+
42+
/**
43+
* registering SocketIO instance
44+
* @param connection
45+
* @param options
46+
*/
47+
connect(connection, options){
48+
49+
if(connection && typeof connection === 'object'){
50+
51+
Logger.info('Received socket.io-client instance');
52+
53+
return connection;
54+
55+
} else if(typeof connection === 'string'){
56+
57+
Logger.info('Received connection string');
58+
59+
return this.io = SocketIO(connection, options);
60+
61+
} else {
62+
63+
throw new Error('Unsupported connection type');
64+
65+
}
66+
7767
}
78-
}
68+
7969
}

‎src/mixin.js

+16-48
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,14 @@ export default {
77

88
if(!this.sockets) this.sockets = {};
99

10-
if (typeof this.$vueSocketIo === 'object') {
11-
for (const namespace of Object.keys(this.$vueSocketIo)) {
12-
this.sockets[namespace] = {
13-
subscribe: (event, callback) => {
14-
this.$vueSocketIo[namespace].emitter.addListener(event, callback, this);
15-
},
16-
unsubscribe: (event) => {
17-
this.$vueSocketIo[namespace].emitter.removeListener(event, this);
18-
}
19-
}
20-
}
21-
} else {
10+
this.sockets.subscribe = (event, callback) => {
2211
this.$vueSocketIo.emitter.addListener(event, callback, this);
12+
};
13+
14+
this.sockets.unsubscribe = (event) => {
2315
this.$vueSocketIo.emitter.removeListener(event, this);
24-
}
16+
};
17+
2518
},
2619

2720
/**
@@ -31,27 +24,14 @@ export default {
3124

3225
if(this.$options.sockets){
3326

34-
if (typeof this.$vueSocketIo === 'object') {
35-
for (const namespace of Object.keys(this.$vueSocketIo)) {
36-
if (this.$options.sockets[namespace]) {
37-
Object.keys(this.$options.sockets[namespace]).forEach(event => {
38-
39-
if(event !== 'subscribe' && event !== 'unsubscribe') {
40-
this.$vueSocketIo[namespace].emitter.addListener(event, this.$options.sockets[namespace][event], this);
41-
}
42-
43-
});
44-
}
27+
Object.keys(this.$options.sockets).forEach(event => {
28+
29+
if(event !== 'subscribe' && event !== 'unsubscribe') {
30+
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
4531
}
46-
} else {
47-
Object.keys(this.$options.sockets).forEach(event => {
48-
49-
if(event !== 'subscribe' && event !== 'unsubscribe') {
50-
this.$vueSocketIo.emitter.addListener(event, this.$options.sockets[event], this);
51-
}
52-
53-
});
54-
}
32+
33+
});
34+
5535
}
5636

5737
},
@@ -63,23 +43,11 @@ export default {
6343

6444
if(this.$options.sockets){
6545

66-
if (typeof this.$vueSocketIo === 'object') {
67-
for (const namespace of Object.keys(this.$vueSocketIo)) {
68-
if (this.$options.sockets[namespace]) {
69-
Object.keys(this.$options.sockets[namespace]).forEach(event => {
46+
Object.keys(this.$options.sockets).forEach(event => {
7047

71-
this.$vueSocketIo[namespace].emitter.removeListener(event, this);
72-
73-
});
74-
}
75-
}
76-
} else {
77-
Object.keys(this.$options.sockets).forEach(event => {
48+
this.$vueSocketIo.emitter.removeListener(event, this);
7849

79-
this.$vueSocketIo.emitter.removeListener(event, this);
80-
81-
});
82-
}
50+
});
8351

8452
}
8553

0 commit comments

Comments
 (0)