javascript - 如何在 VueJS + Vuex 中处理多个 websocket 端点？

Question

我有一个具有多个端点的 WebSocket 服务器，如下所示：

• /规模
• /机器状态
• /工人

我想根据它们来自的端点处理来自服务器的消息。所以我想处理来自 /scale 的消息与来自 /machineStatus 的消息不同。

我不确定如何正确执行此操作。我目前的方法是为我的 App.vue 中的每个端点创建一个 WebSocket 客户端：

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);
}

在我的 websocket 存储组件中，我可以根据源参数区分消息。商店组件看起来像这样：

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
}

这有点冗长，但它可以工作。我在不同的状态对象中有不同的消息。有没有更优雅的方法来做到这一点？

标签： javascriptvue.jswebsocketvuex