首页 > 其他 > 详细

Vue-Socket.io

时间:2017-11-11 00:13:16      阅读:651      评论:0      收藏:0      [点我收藏+]

github地址:https://github.com/MetinSeylan/Vue-Socket.io

安装:

npm install vue-socket.io -S

注册:

import Vue from vue
import VueSocketio from vue-socket.io

Vue.use(VueSocketio, http://socketserver.com:1923)

实例应用:

var vm = new Vue({
  sockets:{ //将(socket.on)绑定事件放在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);
    }
  }
})

创建一个新的监听器:

this.$options.sockets.event_name = (data) => {
    console.log(data)
}

删除监听器:

delete this.$options.sockets.event_name;

触发服务端事件:

this.$socket.emit(‘event_name‘, msg1,msg2,...);

配合VUEX使用:

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);
            }
            ...
        }
    }
})

 

Vue-Socket.io

原文:http://www.cnblogs.com/fanlinqiang/p/7816764.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!