Как обрабатывать несколько конечных точек websocket в VueJS + Vuex?

Question

У меня есть сервер WebSocket с несколькими конечными точками, например:

• / scale
• / machineStatus
• / worker

Я хочу обрабатывать сообщения с сервера на основе конечных точек, с которых они пришли. Поэтому я хочу обрабатывать сообщения из / scale иначе, чем сообщения из /machineStatus.

Я не уверен, как это сделать правильно. Мой текущий подход заключается в создании клиента WebSocket для каждой конечной точки в моем приложении. vue:

mounted() {
    // scale endpoint
    var socket_scale = new WebSocket("ws://10.50.25.1:8104/scale");

    socket_scale.onopen = function() {
        this.$store.dispatch('websocket/setSocketOpen', source);
    }.bind(this);

    socket_scale.onclose = function() {
        this.$store.dispatch('websocket/setSocketClose', source);
    }.bind(this);


    socket_scale.onmessage = function(event) {
        this.$store.dispatch('websocket/setSocketMessage', [event, source]);
    }.bind(this);

    socket_scale.onerror = function(event) {
        this.$store.dispatch('websocket/setSocketError', [event, source]);
    }.bind(this)
    // machine_status endpoint
    var socket_machine_status = new WebSocket("ws://10.50.25.1:8104/machine_status");

    socket_machine_status.onmessage = function(event) {
        this.$store.dispatch('websocket/setSocketMessage', [event, source]);
    }.bind(this);
    // worker endpoint
    var socket_worker = new WebSocket("ws://10.50.25.1:8104/worker");

    socket_worker.onmessage = function(event) {
        this.$store.dispatch('websocket/setSocketMessage', [event, source]);
    }.bind(this);
}

В моем компоненте хранилища веб-сокетов я могу различать сообщения на основе параметра источника. Компонент магазина будет выглядеть примерно так:

const state = {
    isConnected: false,
    message_scale: {},
    message_machine_status: {},
    message_worker: {}
};

const actions = {
    setSocketOpen({ commit }) {
        commit('SOCKET_ONOPEN');
    },
    setSocketClose({ commit }) {
        commit('SOCKET_ONCLOSE');
    },
    setSocketMessage({ commit }, params) {
        commit('SOCKET_ONMESSAGE', params);
    },
    setSocketError({ commit }, event) {
        commit('SOCKET_ONERROR', event.data);
    }
}

const mutations = {
    SOCKET_ONOPEN(state) {
        console.info("WebSocket connected");
        state.isConnected = true;
    },
    SOCKET_ONCLOSE(state) {
        state.isConnected = false;
    },
    SOCKET_ONERROR(state, event) {
        console.error(state, event);
    },
    SOCKET_ONMESSAGE(state, params) {

        switch (params[1]) {
            case "scale" : state.message_scale = params[0]; break;
            case "machine_status" : state.message_machine_status = params[0]; break;
            case "worker" : state.message_worker = params[0]; break;
            default: break;
        }
    },
    SOCKET_RECONNECT_ERROR(state) {
        state.reconnectError = true;
    }
};

const getters = {
    message (state) {
        return state.message;
    }
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

Это немного многословно, но может работать. У меня разные сообщения в разных объектах состояния. Есть ли более элегантный способ сделать это?