You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Vue-Socket.io/README.md

115 lines
3.0 KiB
Markdown

9 years ago
# Vue-Socket.io
8 years ago
[![NPM version](https://img.shields.io/npm/v/vue-socket.io.svg)](https://www.npmjs.com/package/vue-socket.io)
![VueJS v2 compatible](https://img.shields.io/badge/Vuejs%202-compatible-green.svg)
<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>
9 years ago
socket.io implementation for Vuejs 2 and Vuex
9 years ago
8 years ago
## Install
8 years ago
``` bash
npm install vue-socket.io --save
```
9 years ago
8 years ago
## Usage
#### Configuration
Automatic socket connection from an URL string
9 years ago
``` js
import VueSocketio from 'vue-socket.io';
8 years ago
Vue.use(VueSocketio, 'http://socketserver.com:1923');
```
8 years ago
Bind custom socket.io-client instance
``` js
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
```
8 years ago
Enable Vuex integration
``` js
import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
```
9 years ago
8 years ago
#### On Vuejs instance usage
8 years ago
``` js
9 years ago
var vm = new Vue({
sockets:{
connect: function(){
console.log('socket connected')
},
8 years ago
customEmit: function(val){
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
9 years ago
}
},
methods: {
clickButton: function(val){
// $socket is socket.io-client instance
this.$socket.emit('emit_method', val);
}
}
})
```
9 years ago
#### Dynamic socket event listeners
Create a new listener
8 years ago
``` js
this.$options.sockets.event_name = (data) => {
console.log(data)
}
```
Remove existing listener
8 years ago
``` js
delete this.$options.sockets.event_name;
```
8 years ago
#### 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.
8 years ago
``` 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) => {
8 years ago
return true;
},
socket_userMessage: (context, message) => {
context.dispatch('newMessage', message);
context.commit('NEW_MESSAGE_RECEIVED', message);
if (message.is_important) {
context.dispatch('alertImportantMessage', message);
}
...
8 years ago
}
}
})
```
9 years ago
## Example
8 years ago
[Realtime Car Tracker System](http://metinseylan.com/)
[Simple Chat App](http://metinseylan.com/vuesocketio/)