In my Vue component, I was using socket.io-client for WebSocket communication. Now that I've added Vuex to the project, I declared a Websocket like this:
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://192.168.0.38:5000',
}));
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
1) Should I emit messages in the component itself or in the store?
I used to do something like this before introducing changes:
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);
});
After making the changes, I tried to do the same from a component like this:
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);
};
The message reaches the flask server but the response receiving does not work. What am I doing wrong?
I also found some information about putting this in the store like:
SOCKET_MESSAGECHANNEL(state, message) {
state.socketMessage = message
}
I'm confused about what a channel is at this point. Is the my_response emitted from the flask server also considered a channel? Thanks for your help!
EDIT: I am now trying to interact with a websocket from my Vuex store. Here's what I've done so far:
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO('http://192.168.0.38:5000'),
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_',
},
}));
In my store.js file:
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);
},
},
});
In my component script:
export default {
name: 'ControlCenter',
data() {
return {
devices: [{ ip: 'yet unknown' }],
thisDeviceIndex: 0,
currentLayoutIndex: 0,
layouts: [],
};
},
computed: mapState([
'title',
'count',
]),
components: {
DNDAssign,
FirstPage,
},
methods: {
...mapMutations([
'increment',
'emitSth',
]),
incrementMutation() {
this.increment();
},
emitEvent() {
this.emitSth();
},
},
created() {
this.getAllLayouts();
console.log(this.$socket);
},
};
Button for emitting events:
<b-button
type="button"
variant="success"
v-on:click="emitEvent()"
>
emit event
</b-button>
The connected notification in the store works, but I encounter errors while emitting:
- "TypeError: Cannot read property 'emit' of undefined"
- "Cannot read property 'emit' of undefined"
I'm unsure about the naming convention for mutations. With the mutationPrefix set, should I just use "connect" instead of "SOCKET_connect"?