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.
![]() Suggested in issue #51 by huhk-sysu and partially fixed in PR #52. This commit allow multiple arguments for message handlers without the use of a store. |
7 years ago | |
---|---|---|
dist | 8 years ago | |
src | 7 years ago | |
.gitignore | 8 years ago | |
README.md | 8 years ago | |
package.json | 8 years ago | |
webpack.config.js | 8 years ago |
README.md
Vue-Socket.io
socket.io implementation for Vuejs 2 and Vuex
Install
npm install vue-socket.io --save
Usage
Configuration
Automatic socket connection from an URL string
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://socketserver.com:1923');
Bind custom socket.io-client instance
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
Enable Vuex integration
import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
On Vuejs instance usage
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
this.$options.sockets.event_name = (data) => {
console.log(data)
}
Remove existing listener
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.
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);
}
...
}
}
})