mirror of
https://github.com/MetinSeylan/Vue-Socket.io.git
synced 2025-04-16 15:21:28 +02:00
Compare commits
No commits in common. "master" and "3.0.0" have entirely different histories.
9 changed files with 50 additions and 322 deletions
89
README.md
89
README.md
|
|
@ -1,6 +1,6 @@
|
|||
<p align="center">
|
||||
<a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
|
||||
<img width="250" src="https://raw.githubusercontent.com/MetinSeylan/Vue-Socket.io/master/docs/logo.png">
|
||||
<img width="250" src="https://raw.githubusercontent.com/MetinSeylan/Vue-Socket.io/Refactoring3/docs/logo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -12,26 +12,18 @@
|
|||
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
|
||||
<a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://www.patreon.com/MetinSeylan">
|
||||
<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
|
||||
</a>
|
||||
</p>
|
||||
<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.<p>
|
||||
|
||||
<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
|
||||
|
||||
###### Demo
|
||||
- <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
|
||||
- <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
|
||||
<p>You can also check my other npm library <a href="https://github.com/MetinSeylan/Nestjs-OpenTelemetry">Nestjs OpenTelemetry</a></p>
|
||||
<p>
|
||||
are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
|
||||
</p>
|
||||
|
||||
#### 🚀 Installation
|
||||
``` bash
|
||||
npm install vue-socket.io --save
|
||||
```
|
||||
##### Using Connection String
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import store from './store'
|
||||
|
|
@ -45,37 +37,8 @@ Vue.use(new VueSocketIO({
|
|||
store,
|
||||
actionPrefix: 'SOCKET_',
|
||||
mutationPrefix: 'SOCKET_'
|
||||
},
|
||||
options: { path: "/my-app/" } //Optional options
|
||||
}))
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
```
|
||||
|
||||
##### Using socket.io-client Instance
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import store from './store'
|
||||
import App from './App.vue'
|
||||
import VueSocketIO from 'vue-socket.io'
|
||||
import SocketIO from 'socket.io-client'
|
||||
|
||||
const options = { path: '/my-app/' }; //Options object to pass into SocketIO
|
||||
|
||||
Vue.use(new VueSocketIO({
|
||||
debug: true,
|
||||
connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
|
||||
vuex: {
|
||||
store,
|
||||
actionPrefix: "SOCKET_",
|
||||
mutationPrefix: "SOCKET_"
|
||||
}
|
||||
})
|
||||
);
|
||||
}))
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
|
@ -94,7 +57,7 @@ vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex
|
|||
|
||||
#### 🌈 Component Level Usage
|
||||
|
||||
<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component. After that every function will start to listen events, depends on object key</p>
|
||||
<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key</p>
|
||||
|
||||
``` javascript
|
||||
new Vue({
|
||||
|
|
@ -115,7 +78,7 @@ new Vue({
|
|||
})
|
||||
```
|
||||
|
||||
##### Dynamic Listeners
|
||||
##### Dynamic Listenlers
|
||||
|
||||
<p>If you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component</p>
|
||||
|
||||
|
|
@ -127,37 +90,8 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
|
|||
this.sockets.unsubscribe('EVENT_NAME');
|
||||
```
|
||||
|
||||
##### Defining handlers for events with special characters
|
||||
|
||||
<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>
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
name: 'Test',
|
||||
sockets: {
|
||||
connect: function () {
|
||||
console.log('socket to notification channel connected')
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
something: [
|
||||
// ... something here for the data if you need.
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$socket.subscribe("kebab-case", function(data) {
|
||||
console.log("This event was fired by eg. sio.emit('kebab-case')", data)
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 🏆 Vuex Integration
|
||||
<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>
|
||||
<p>When you set store parameter in installation, `Vue-Socket.io` will sending events to Vuex store, you can use `actions` and `mutations` in same time if you set both prefix for vuex but best way is use just `actions`</p>
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
|
|
@ -180,13 +114,8 @@ export default new Vuex.Store({
|
|||
})
|
||||
```
|
||||
|
||||
## Stargazers over time
|
||||
|
||||
[](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
|
||||
<img src="https://media.giphy.com/media/11jlnltQgUi2mQ/giphy.gif">
|
||||
</a>
|
||||
</p>
|
||||
</p>
|
||||
10
dist/vue-socketio.js
vendored
10
dist/vue-socketio.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,114 +0,0 @@
|
|||
# Vue-Socket.io
|
||||
|
||||
[](https://www.npmjs.com/package/vue-socket.io)
|
||||
|
||||
<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/dt/vue-socket.io.svg" alt="Downloads"></a>
|
||||
<img id="dependency_badge" src="https://www.versioneye.com/javascript/metinseylan:vue-socket.io/2.0.1/badge.svg" alt="Dependency Badge" rel="nofollow">
|
||||
<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/l/vue-socket.io.svg" alt="License"></a>
|
||||
|
||||
socket.io implementation for Vuejs 2 and Vuex
|
||||
|
||||
## Install
|
||||
|
||||
``` bash
|
||||
npm install vue-socket.io --save
|
||||
```
|
||||
|
||||
## Usage
|
||||
#### Configuration
|
||||
Automatic socket connection from an URL string
|
||||
``` js
|
||||
import VueSocketio from 'vue-socket.io';
|
||||
Vue.use(VueSocketio, 'http://socketserver.com:1923');
|
||||
```
|
||||
|
||||
Bind custom socket.io-client instance
|
||||
``` js
|
||||
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
|
||||
```
|
||||
|
||||
Enable Vuex integration
|
||||
``` js
|
||||
import store from './yourstore'
|
||||
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
|
||||
```
|
||||
|
||||
#### On Vuejs instance usage
|
||||
``` js
|
||||
var vm = new Vue({
|
||||
sockets:{
|
||||
connect: function(){
|
||||
console.log('socket connected')
|
||||
},
|
||||
customEmit: function(val){
|
||||
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickButton: function(val){
|
||||
// $socket is socket.io-client instance
|
||||
this.$socket.emit('emit_method', val);
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#### Dynamic socket event listeners
|
||||
Create a new listener
|
||||
``` js
|
||||
this.$options.sockets.event_name = (data) => {
|
||||
console.log(data)
|
||||
}
|
||||
```
|
||||
Remove existing listener
|
||||
``` js
|
||||
delete this.$options.sockets.event_name;
|
||||
```
|
||||
|
||||
#### Vuex Store integration
|
||||
|
||||
Socket **mutations** always have `SOCKET_` prefix.
|
||||
|
||||
Socket **actions** always have `socket_` prefix and the socket event name is `camelCased` (ex. `SOCKET_USER_MESSAGE` => `socket_userMessage`)
|
||||
|
||||
You can use either one or another or both in your store. Namespaced modules are supported.
|
||||
|
||||
``` js
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
connect: false,
|
||||
message: null
|
||||
},
|
||||
mutations:{
|
||||
SOCKET_CONNECT: (state, status ) => {
|
||||
state.connect = true;
|
||||
},
|
||||
SOCKET_USER_MESSAGE: (state, message) => {
|
||||
state.message = message;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
otherAction: (context, type) => {
|
||||
return true;
|
||||
},
|
||||
socket_userMessage: (context, message) => {
|
||||
context.dispatch('newMessage', message);
|
||||
context.commit('NEW_MESSAGE_RECEIVED', message);
|
||||
if (message.is_important) {
|
||||
context.dispatch('alertImportantMessage', message);
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Example
|
||||
[Realtime Car Tracker System](http://metinseylan.com/)
|
||||
|
||||
[Simple Chat App](http://metinseylan.com/vuesocketio/)
|
||||
63
index.d.ts
vendored
63
index.d.ts
vendored
|
|
@ -1,63 +0,0 @@
|
|||
import SocketIOClient from "socket.io-client";
|
||||
import {
|
||||
DefaultComputed,
|
||||
DefaultData,
|
||||
DefaultMethods,
|
||||
DefaultProps,
|
||||
PropsDefinition,
|
||||
} from "vue/types/options";
|
||||
import { Vue } from "vue/types/vue";
|
||||
import { PluginFunction, PluginObject } from "vue";
|
||||
import { Store } from "vuex";
|
||||
|
||||
interface socketHandler<T> {
|
||||
(this: T, ...args: any[]): void
|
||||
}
|
||||
|
||||
interface Sockets<V> {
|
||||
[key: string]: socketHandler<V>
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$socket: SocketIOClient.Socket,
|
||||
sockets: {
|
||||
subscribe(eventName: string, handler: socketHandler<Vue>): void,
|
||||
unsubscribe(eventName: string): void,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vue/types/options' {
|
||||
interface ComponentOptions<
|
||||
V extends Vue,
|
||||
Data=DefaultData<V>,
|
||||
Methods=DefaultMethods<V>,
|
||||
Computed=DefaultComputed,
|
||||
PropsDef=PropsDefinition<DefaultProps>,
|
||||
Props=DefaultProps> {
|
||||
sockets?: Sockets<V>
|
||||
}
|
||||
}
|
||||
|
||||
export interface VueSocketOptions {
|
||||
debug?: boolean;
|
||||
connection: string | SocketIOClient.Socket,
|
||||
vuex?: {
|
||||
store?: Store<any>,
|
||||
actionPrefix?: string,
|
||||
mutationPrefix?: string,
|
||||
options?: {
|
||||
useConnectionNamespace?: boolean
|
||||
}
|
||||
},
|
||||
// type declarations for optional options
|
||||
options?:{
|
||||
path?: string;
|
||||
}
|
||||
}
|
||||
|
||||
export default class VueSocketIO<T> implements PluginObject<T> {
|
||||
constructor (options: VueSocketOptions);
|
||||
install: PluginFunction<T>
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "vue-socket.io",
|
||||
"author": "Metin Seylan <metinsyln@gmail.com>",
|
||||
"version": "3.0.10",
|
||||
"description": "socket.io implementation for Vue.js and Vuex",
|
||||
"version": "3.0.0",
|
||||
"description": "socket.io implemantation for vuejs and vuex",
|
||||
"main": "dist/vue-socketio.js",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production --progress --hide-modules"
|
||||
|
|
|
|||
|
|
@ -77,9 +77,7 @@ export default class EventEmitter{
|
|||
|
||||
}
|
||||
|
||||
if(event !== 'ping' && event !== 'pong') {
|
||||
this.dispatchStore(event, args);
|
||||
}
|
||||
this.dispatchStore(event, args);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -93,17 +91,15 @@ export default class EventEmitter{
|
|||
|
||||
if(this.store && this.store._actions){
|
||||
|
||||
let prefixed_event = this.actionPrefix + event;
|
||||
|
||||
for (let key in this.store._actions) {
|
||||
|
||||
let action = key.split('/').pop();
|
||||
|
||||
if(action === prefixed_event) {
|
||||
if(action === this.actionPrefix+event) {
|
||||
|
||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||
Logger.info(`Dispatching Action: ${action}, Data:`, args);
|
||||
|
||||
this.store.dispatch(key, args);
|
||||
this.store.dispatch(action, args);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -111,17 +107,15 @@ export default class EventEmitter{
|
|||
|
||||
if(this.mutationPrefix) {
|
||||
|
||||
let prefixed_event = this.mutationPrefix + event;
|
||||
|
||||
for (let key in this.store._mutations) {
|
||||
|
||||
let mutation = key.split('/').pop();
|
||||
|
||||
if(mutation === prefixed_event) {
|
||||
if(mutation === this.mutationPrefix+event) {
|
||||
|
||||
Logger.info(`Commiting Mutation: ${key}, Data:`, args);
|
||||
Logger.info(`Commiting Mutation: ${mutation}, Data:`, args);
|
||||
|
||||
this.store.commit(key, args);
|
||||
this.store.commit(mutation, args);
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
34
src/index.js
34
src/index.js
|
|
@ -1,6 +1,6 @@
|
|||
import Mixin from './mixin';
|
||||
import Logger from './logger';
|
||||
import Listener from './listener';
|
||||
import Listenler from './listenler';
|
||||
import Emitter from './emitter';
|
||||
import SocketIO from 'socket.io-client';
|
||||
|
||||
|
|
@ -11,33 +11,24 @@ export default class VueSocketIO {
|
|||
* @param io
|
||||
* @param vuex
|
||||
* @param debug
|
||||
* @param options
|
||||
*/
|
||||
constructor({connection, vuex, debug, options}){
|
||||
constructor({connection, vuex, debug}){
|
||||
|
||||
Logger.debug = debug;
|
||||
this.io = this.connect(connection, options);
|
||||
this.io = this.connect(connection);
|
||||
this.emitter = new Emitter(vuex);
|
||||
this.listener = new Listener(this.io, this.emitter);
|
||||
this.listener = new Listenler(this.io, this.emitter);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue.js entry point
|
||||
* Vuejs entrypoint
|
||||
* @param Vue
|
||||
*/
|
||||
install(Vue){
|
||||
|
||||
const version = Number(Vue.version.split('.')[0])
|
||||
|
||||
if (version >= 3) {
|
||||
Vue.config.globalProperties.$socket = this.io;
|
||||
Vue.config.globalProperties.$vueSocketIo = this;
|
||||
} else {
|
||||
Vue.prototype.$socket = this.io;
|
||||
Vue.prototype.$vueSocketIo = this;
|
||||
}
|
||||
|
||||
Vue.prototype.$socket = this.io;
|
||||
Vue.prototype.$vueSocketIo = this;
|
||||
Vue.mixin(Mixin);
|
||||
|
||||
Logger.info('Vue-Socket.io plugin enabled');
|
||||
|
|
@ -46,13 +37,12 @@ export default class VueSocketIO {
|
|||
|
||||
|
||||
/**
|
||||
* registering SocketIO instance
|
||||
* registering socketio instance
|
||||
* @param connection
|
||||
* @param options
|
||||
*/
|
||||
connect(connection, options){
|
||||
connect(connection){
|
||||
|
||||
if(connection && typeof connection === 'object'){
|
||||
if(connection && typeof connection === 'object' && connection.constructor.name === 'Socket'){
|
||||
|
||||
Logger.info('Received socket.io-client instance');
|
||||
|
||||
|
|
@ -62,7 +52,7 @@ export default class VueSocketIO {
|
|||
|
||||
Logger.info('Received connection string');
|
||||
|
||||
return this.io = SocketIO(connection, options);
|
||||
return this.io = SocketIO(connection);
|
||||
|
||||
} else {
|
||||
|
||||
|
|
@ -72,4 +62,4 @@ export default class VueSocketIO {
|
|||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
export default class VueSocketIOListener {
|
||||
export default class VueSocketIOListenler {
|
||||
|
||||
/**
|
||||
* socket.io-client reserved event keywords
|
||||
|
|
@ -38,7 +38,7 @@ export default class VueSocketIOListener {
|
|||
|
||||
this.onEvent(event, args)
|
||||
};
|
||||
VueSocketIOListener.staticEvents.forEach(event => this.io.on(event, args => this.onEvent(event, args)))
|
||||
VueSocketIOListenler.staticEvents.forEach(event => this.io.on(event, () => this.onEvent(event)))
|
||||
}
|
||||
|
||||
/**
|
||||
34
src/mixin.js
34
src/mixin.js
|
|
@ -1,26 +1,9 @@
|
|||
export default {
|
||||
|
||||
/**
|
||||
* Assign runtime callbacks
|
||||
* lets collect all socket callback functions then register
|
||||
*/
|
||||
beforeCreate(){
|
||||
|
||||
if(!this.sockets) this.sockets = {};
|
||||
|
||||
this.sockets.subscribe = (event, callback) => {
|
||||
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
||||
};
|
||||
|
||||
this.sockets.unsubscribe = (event) => {
|
||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Register all socket events
|
||||
*/
|
||||
mounted(){
|
||||
created(){
|
||||
|
||||
if(this.$options.sockets){
|
||||
|
||||
|
|
@ -32,6 +15,19 @@ export default {
|
|||
|
||||
});
|
||||
|
||||
this.sockets = {
|
||||
subscribe: (event, callback) => {
|
||||
|
||||
this.$vueSocketIo.emitter.addListener(event, callback, this);
|
||||
|
||||
},
|
||||
unsubscribe: (event) => {
|
||||
|
||||
this.$vueSocketIo.emitter.removeListener(event, this);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue