VueJ + Vuex에서 여러 웹 소켓 엔드포인트를 처리하는 방법

VueJ + Vuex에서 여러 웹 소켓 엔드포인트를 처리하는 방법

다음과 같은 여러 엔드포인트가 있는 WebSocket 서버가 있습니다.

• /스케일
• /machine Status(기계 상태)
• /워커

서버로부터의 메시지를 발신원 엔드포인트에 근거해 처리하고 싶다.그래서 /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
}

좀 장황하지만 효과가 있을 수도 있어요.다른 상태 오브젝트에 다른 메시지가 있습니다.좀 더 우아한 방법이 있을까요?

언급URL : https://stackoverflow.com/questions/60323932/how-to-handle-multiple-websocket-endpoints-in-vuejs-vuex