[Vuejs]-Vuex: Wait for websocket response before dispatching action

by

0👍

✅

So I realized that I have to resolve the promise on the this.ws.message instead. By doing that all my data is populated accordingly, there’s still sync issues (I can’t feed the websocket state at the moment because due to its async behaviour the state is not there yet when other components try to use it via: rootGetters.websocket.incomingChats for example) but I guess that’s part of another question. Here’s the final version of the module action:

export const actions = {
    processWebsocket({ commit }) {
        return new Promise((resolve) => {
            const v = this
            this.ws = new WebSocket('wss://ws.rubiko.io')
            this.ws.onopen = function (event) {
                commit('SET_CONNECTION', event.type)
                v.ws.send('message')
            }
            this.ws.onmessage = function (event) {
                commit('SET_REMOTE_DATA', event)
                resolve(event)
            }
            this.ws.onerror = function (event) {
                console.log('webSocket: on error: ', event)
            }
            this.ws.onclose = function (event) {
                console.log('webSocket: on close: ', event)
                commit('SET_CONNECTION')
                ws = null
                setTimeout(startWebsocket, 5000)
            }
        })
    },
}

Anyways, thanks @Eldar you were in the right path.

0👍

You should convert your WebSocket action into a promise that resolves when WebSocket is connected.:

export const actions = {
    processWebsocket({ commit }) {
      return new Promise(resolve=> {
        const v = this
        this.ws = new WebSocket('mywebsocket')
        this.ws.onopen = function (event) {
            commit('SET_CONNECTION', event.type)
            v.ws.send('message')
              resolve();
        }
        this.ws.onmessage = function (event) {
            commit('SET_REMOTE_DATA', event)
        }
        this.ws.onerror = function (event) {
            console.log('webSocket: on error: ', event)
        }
        this.ws.onclose = function (event) {
            console.log('webSocket: on close: ', event)
            commit('SET_CONNECTION')
            ws = null
            setTimeout(startWebsocket, 5000)
        }
     });
    },
}

Leave a comment