Javascript Vue/Vuex中的WebSocket（如何从服务器接收排放）

所以到目前为止，我只使用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);
    });

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

    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_事件到达我的flask服务器，但是我没有收到响应。我做错了什么？ 另外，因为我在问我是应该把它放在组件中还是商店中，我在商店中找到了这样的东西：

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

解释是“例如，如果您的频道名为messageChannel，则相应的Vuex突变将是SOCKET_messageChannel”，它来自此站点

我想我现在还不太明白频道是什么。我从flask服务器发出的my_响应也是一个通道吗？ 提前谢谢你的帮助

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

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

然后在my 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\u connect难道还不够吗？

首先，如果您使用的是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”

，最新更新似乎破坏了库，请阅读更多信息

现在，要从socket.io服务器接收事件，您可以执行以下操作：

this.sockets.subscribe（“我的响应”，（数据）=>{
控制台日志（数据）；
});

或者，如果要将侦听器置于组件级别，则需要在组件导出上添加

sockets

对象，例如：

导出默认值{
...
插座：{
“我的回应”：功能（数据）{
控制台日志（数据）；
}
}
...
}

由于您没有在VueSocketIO上使用Vuex集成，因此不需要在存储中添加其他功能。如果要在VueSocketIO上使用Vuex集成，则需要在声明VueSocketIO类时添加

Vuex

对象

下面是

main.js

//将Vue设置为使用Vuex
Vue.use（Vuex）；
//创建存储
const store=新的Vuex.store({
声明：{
someData:null
},
获取者：{}，
行动：{
“套接字\我的响应”（上下文、数据）{
//收到“my response”，对数据进行处理，在这种情况下，我们将称突变为“setData”
提交（“setData”，data）；
}
}
突变：{
[“设置数据”]（状态、数据）{
state.someData=data；//将其设置为state
}
}
});
//将Vue设置为与Vuex集成使用VueSocketIO
Vue.use（新的VueSocketIO({
是的，
连接：'http://192.168.0.38:5000',
vuex：{
商店，
actionPrefix：“套接字”
}
}));
新Vue({
路由器，
商店
渲染：h=>h（应用程序）
}).$mount（“#app”）；

---

如果您需要有关Vuex集成的示例，可以检查是否将Vue和Vue-Socket.io与Vuex集成在一起。te

首先，如果您使用的是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”

，最新更新似乎破坏了库，请阅读更多信息

现在，要从socket.io服务器接收事件，您可以执行以下操作：

this.sockets.subscribe（“我的响应”，（数据）=>{
控制台日志（数据）；
});

或者，如果要将侦听器置于组件级别，则需要在组件导出上添加

sockets

对象，例如：

导出默认值{
...
插座：{
“我的回应”：功能（数据）{
控制台日志（数据）；
}
}
...
}

由于您没有在VueSocketIO上使用Vuex集成，因此不需要在存储中添加其他功能。如果要在VueSocketIO上使用Vuex集成，则需要在声明VueSocketIO类时添加

Vuex

对象

下面是

main.js

//将Vue设置为使用Vuex
Vue.use（Vuex）；
//创建存储
const store=新的Vuex.store({
声明：{
someData:null
},
获取者：{}，
行动：{
“套接字\我的响应”（上下文、数据）{
//收到“my response”，对数据进行处理，在这种情况下，我们将称突变为“setData”
提交（“setData”，data）；
}
}
突变：{
[“设置数据”]（状态、数据）{
state.someData=data；//将其设置为state
}
}
});
//将Vue设置为与Vuex集成使用VueSocketIO
Vue.use（新的VueSocketIO({
是的，
连接：'http://192.168.0.38:5000',
vuex：{
商店，
actionPrefix：“套接字”
}
}));
新Vue({
路由器，
商店
渲染：h=>h（应用程序）
}).$mount（“#app”）；

---

如果您需要有关Vuex集成的示例，可以检查是否将Vue和Vue-Socket.io与Vuex集成在一起。te

非常感谢Owl的详细回答！你建议，我试过不同的方法。我现在唯一想知道的是，什么时候使用这些选项中的哪一个。例如，如果我像第一段中那样做，或者如果我在compon上做，这只是个人偏好吗