chushihua
This commit is contained in:
li
+7
@@ -0,0 +1,7 @@
|
||||
Copyright 2018 Metin Seylan
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
<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">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/v/vue-socket.io.svg"/> <img src="https://img.shields.io/npm/dt/vue-socket.io.svg"/></a>
|
||||
<a href="https://github.com/vuejs/awesome-vue"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"/></a>
|
||||
<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg"/></a>
|
||||
<a href="http://packagequality.com/#?package=vue-socket.io"><img src="http://npm.packagequality.com/shield/vue-socket.io.svg"/></a>
|
||||
<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>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>
|
||||
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'
|
||||
import App from './App.vue'
|
||||
import VueSocketIO from 'vue-socket.io'
|
||||
|
||||
Vue.use(new VueSocketIO({
|
||||
debug: true,
|
||||
connection: 'http://metinseylan.com:1992',
|
||||
vuex: {
|
||||
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'
|
||||
|
||||
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,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
```
|
||||
|
||||
**Parameters**|**Type's**|**Default**|**Required**|**Description**
|
||||
-----|-----|-----|-----|-----
|
||||
debug|Boolean|`false`|Optional|Enable logging for debug
|
||||
connection|String/Socket.io-client|`null`|Required|Websocket server url or socket.io-client instance
|
||||
vuex.store|Vuex|`null`|Optional|Vuex store instance
|
||||
vuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions
|
||||
vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations
|
||||
|
||||
#### 🌈 Component Level Usage
|
||||
|
||||
<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({
|
||||
sockets: {
|
||||
connect: function () {
|
||||
console.log('socket connected')
|
||||
},
|
||||
customEmit: function (data) {
|
||||
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickButton: function (data) {
|
||||
// $socket is socket.io-client instance
|
||||
this.$socket.emit('emit_method', data)
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
##### Dynamic Listeners
|
||||
|
||||
<p>If you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component</p>
|
||||
|
||||
``` javascript
|
||||
this.sockets.subscribe('EVENT_NAME', (data) => {
|
||||
this.msg = data.message;
|
||||
});
|
||||
|
||||
this.sockets.unsubscribe('EVENT_NAME');
|
||||
```
|
||||
|
||||
#### 🏆 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>
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {},
|
||||
mutations: {
|
||||
"<MUTATION_PREFIX><EVENT_NAME>"() {
|
||||
// do something
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
"<ACTION_PREFIX><EVENT_NAME>"() {
|
||||
// do something
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 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>
|
||||
+10
File diff suppressed because one or more lines are too long
+114
@@ -0,0 +1,114 @@
|
||||
# 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/)
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
+59
@@ -0,0 +1,59 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default class VueSocketIO<T> implements PluginObject<T> {
|
||||
constructor (options: VueSocketOptions);
|
||||
install: PluginFunction<T>
|
||||
}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "vue-socket.io",
|
||||
"author": "Metin Seylan <metinsyln@gmail.com>",
|
||||
"version": "3.0.10",
|
||||
"description": "socket.io implementation for Vue.js and Vuex",
|
||||
"main": "dist/vue-socketio.js",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production --progress --hide-modules"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/MetinSeylan/Vue-Socket.io.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vuejs",
|
||||
"socket",
|
||||
"vue",
|
||||
"socket.io",
|
||||
"websocket",
|
||||
"socket.io-client",
|
||||
"realtime",
|
||||
"flux",
|
||||
"vuex",
|
||||
"redux"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/MetinSeylan/Vue-Socket.io/issues"
|
||||
},
|
||||
"homepage": "https://github.com/MetinSeylan/Vue-Socket.io",
|
||||
"dependencies": {
|
||||
"socket.io-client": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.1.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.1.0",
|
||||
"@babel/plugin-transform-classes": "^7.1.0",
|
||||
"@babel/preset-env": "^7.1.0",
|
||||
"babel-loader": "^8.0.4",
|
||||
"cross-env": "^5.2.0",
|
||||
"webpack": "^4.23.1",
|
||||
"webpack-cli": "^3.1.2"
|
||||
}
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV,
|
||||
entry: ["./src/index.js"],
|
||||
output: {
|
||||
library: "VueSocketIO",
|
||||
libraryTarget: "umd",
|
||||
libraryExport: "default",
|
||||
filename: "vue-socketio.js",
|
||||
globalObject: "typeof self !== 'undefined' ? self : this"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
plugins: [
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-transform-classes"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user