vue-socket.io与vuex搭配使用

最新推荐文章于 2025-10-16 13:10:53 发布

原创最新推荐文章于 2025-10-16 13:10:53 发布 · 5.7k 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

websocket

1 篇文章

订阅专栏

本文介绍如何使用vue-socket.io插件结合Vue.js实现WebSocket通信，包括在组件内直接使用及结合Vuex的状态管理进行数据同步的方法。通过实例演示了前端如何接收和发送数据，以及动态注册事件。

git文档地址：查看文档

版本：3.0.x

vue-socket.io插件提供了很便利的使用websocket的方式

简单例子：

服务端提供两个事件"USER_INFO"（前端接收数据）、"SET_USER_INFO"（前端上传数据）

1. 组件内使用：

main.js

import VueSocketIO from "vue-socket.io";
Vue.use(
  new VueSocketIO({
    connection: "http://127.0.0.1:3000"
  })
);

组件内Home.vue

export default {
  data() {
    return {
      info: {
        id: 123,
        name: '张三'
      }
    }
  },
  sockets: {
    //接收数据  'USER_INFO'(data) {} 定义字符串为方法名也是可以的
    USER_INFO(data) {
      this.info = data
    }
  },
  methods: {
    submit() {
      //上传数据
      this.$socket.emit('SET_USER_INFO', this.info);
    }
  }
}

动态注册数据接收可以用 this.sockets.subscribe('event_name', callback) 注册、this.sockets.unsubscribe('event_name') 取消注册

2. 结合vuex使用：

main.js

import VueSocketIO from "vue-socket.io";
Vue.use(
  new VueSocketIO({
    connection: "http://127.0.0.1:3000",
    vuex: {
      store,
      mutationPrefix: "SOCKET_",
      actionPrefix: "SOCKET_"
    }
  })
);

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userInfo: {}
  },
  mutations: {
    SOCKET_USER_INFO(state, data) {
      state.userInfo = data;
    }
  },
  actions: {}
});