Vue/Vuex 中的 Websockets（如何从服务器接收发射）

Question

所以直到现在我只是 socket.io-client 与我的 Vue 组件中的 WebSocket 进行通信。 现在我正在将 Vuex 添加到项目中并声明一个这样的 Websocket

Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://192.168.0.38:5000',
}));

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

1) 我现在应该在组件本身还是在商店中发送一些消息之类的东西？

2) 在我介绍这些更改之前，我可以这样做：

socket.on('connect', function () {
      console.error('connected to webSocket');
      socket.emit('my event', { data: 'I\'m connected!' });
    });

socket.on('my response', function(data){
      console.log('got response');
      console.log(data.data);
    });

当发送“我的事件”时，烧瓶服务器会响应“我的响应”。现在，在进行了这样的更改之后，我正在尝试从组件中进行相同的操作。

    this.$socket.emit('my_event', { data: 'I\'m connected!' });
    console.error('send to websocket ');

    this.$options.sockets.my_event = (data) => {
      console.error('received answer ');
      console.error(data);
    };

my_event 到达了我的烧瓶服务器，但是我没有收到接收到的响应。我究竟做错了什么？ 另外因为我在问我应该把它放在组件还是商店中，我为商店找到了这样的东西：

SOCKET_MESSAGECHANNEL(state, message) {
      state.socketMessage = message
    }

解释是“因此，例如，如果您的频道称为 messageChannel，则相应的 Vuex 突变将是 SOCKET_MESSAGECHANNEL”，它来自此站点 https://alligator.io/vuejs/vue-socketio/。

我想我现在并没有真正了解频道是什么。我从烧瓶服务器发出的 my_response 也是一个通道吗？ 提前感谢您的帮助！

编辑：所以现在我正在尝试从我的商店监听并发送到 websocket。为此，我尝试了以下方法：在 main.js 我有这部分：

Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://192.168.0.38:5000'),
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_',
  },
}));

然后在我的 store.js 中有以下内容：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
    title: 'title from vuex store',
    isConnected: false,
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
    emitSth(state) {
      this.sockets.emit('my_event', { data: 'I\'m connected!' });
      console.log(state.count);
    },
    SOCKET_my_response(state) {
      state.isConnected = true;
      alert(state.isConnected);
    },
    SOCKET_connect(state) {
      state.isConnected = true;
      alert(state.isConnected);
    },
  },
});

在我的组件中，我有这个脚本：

export default {
  name: 'ControlCenter',
  data() {
    return {
      devices: [{ ip: 'yet unknown' }], // placeholder so line 12 does not throw error before actual device info fetched
      thisDeviceIndex: 0,
      currentLayoutIndex: 0,
      layouts: [],
    };
  },
  computed: mapState([
    'title',
    'count',
  ]),
  components: {
    DNDAssign,
    FirstPage,
  },
  methods: {
    // mapMutation helper let's us use mutation from store via this instead of this.$store
    ...mapMutations([
      'increment',
      'emitSth',
    ]),
    incrementMutation() {
      this.increment();
    },
    emitEvent() {
      this.emitSth();
    },
    // some other stuff here
  },
  created() {
    // inital fetching of layouts
    console.log('fetching layouts from backend');
    this.getAllLayouts();

    console.log(this.$socket);
  },
};

我还有一个用于触发发射的按钮

<b-button
type="button"
variant="success"
v-on:click="emitEvent()"
>
emit event
</b-button>

商店中的连接被触发，但是我收到以下发射错误：

• “TypeError：无法读取未定义的属性‘emit’”
• “无法读取未定义的属性 'emit'”

我也不确定突变中的命名。如果我有这个 mutationPrefix，难道只使用 connect 而不是 SOCKET_connect 就足够了吗？

Answer 1

首先，如果你使用的是Vue-Socket.io 3.0.5版本>，卸载它并安装3.0.5版本

npm uninstall vue-socket.io
npm install vue-socket.io@3.0.5

然后将版本锁定在packege.json:"vue-socket.io": "3.0.5"，最新更新似乎破坏了库，阅读更多here

现在要从 socket.io 服务器接收事件，你可以这样做：

this.sockets.subscribe("my response", (data) => {
    console.log(data);
});

或者如果要将监听器放在组件级别，则需要在组件导出上添加sockets对象，例如：

export default {
    ...
    sockets: {
        "my response": function (data) {
            console.log(data);
        }
    }
    ...
}

由于您没有在 VueSocketIO 上使用 Vuex 集成，因此您不需要在存储突变中添加额外的功能。如果想在 VueSocketIO 上使用 Vuex 集成，需要在声明 VueSocketIO 类时添加vuex 对象。

这是main.js的基本示例

// Set Vue to use Vuex
Vue.use(Vuex);

// Create store
const store = new Vuex.Store({
  state: {
      someData: null
  },
  getters: {},
  actions: {
      "SOCKET_my response"(context, data) {
          // Received `my response`, do something with the data, in this case we are going to call mutation "setData"
        context.commit("setData", data);
      }
  }
  mutations: {
      ["setData"](state, data) {
          state.someData = data; // Set it to state
      }
  }
});

// Set Vue to use VueSocketIO with Vuex integration
Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://192.168.0.38:5000',
  vuex: {
      store,
      actionPrefix: "SOCKET_"
    }
}));

new Vue({
  router,
  store
  render: h => h(App)
}).$mount("#app");

如果您需要有关 Vuex 集成的示例，您可以查看使用 Vue 和 Vue-Socket.io 与 Vuex 集成的my example app。te