Vue 3에서 Vuex 4용 Web 소켓 플러그인 구현(소켓 라이브러리에 의존하지 않음)

Vue 3에서 Vuex 4용 Web 소켓 플러그인 구현(소켓 라이브러리에 의존하지 않음)

Vue 3 어플리케이션이 Vue 4와 연동되어 있는데 Vuex를 통해 모든 웹 소켓 작업을 일원화하려고 합니다.이 튜토리얼을 따르고 있지만 Vuex 스토어에 플러그인을 연결할 수 없습니다.웹소켓 참조 가능한 한 독립적이어야 하므로 라이브러리나 소켓을 사용할 수 없습니다.IO:

플러그인 코드는 다음과 같습니다.

var store = null
var ws = null

function startWebsocket() {
    ws = new WebSocket('socketURL')
    ws.onmessage = function (event) {
        console.log('webSocket: on message: ', event.data)
        const wsData = JSON.parse(event.data)
        store.dispatch('websocket/processRemoteMessage', wsData)
    }
    ws.onopen = function (event) {
        console.log('webSocket: on open: ', event)
        store.dispatch('connectionOpened')
    }
    ws.onclose = function (event) {
        console.log('webSocket: on close: ', event)
        store.dispatch('connectionClosed')
        ws = null
        setTimeout(startWebsocket, 5000)
    }
    ws.onerror = function (event) {
        console.log('webSocket: on error: ', event)
    }
}

export default function createWebSocketPlugin() {
    return (store_param) => {
        store = store_param;
        startWebsocket();
    }
}

웹소켓이 새 메시지를 표시할 때 볼 수 있듯이 개체를 해석하고 웹소켓 스토어에서 웹소켓 메시지를 전달하는 액션을 디스패치할 수 있어야 합니다(이 모듈은 플러그인 외부에 있습니다).

store.dispatch('websocket/processRemoteMessage', wsData)

다음은 웹 소켓 Vuex 모듈입니다.

export const namespaced = true
export const state = {
    connected: false,
    error: null,
    connectionId: '',
    statusCode: '',
    incomingChatInfo: [],
    remoteMessage: [],
    messageType: '',
}
export const actions = {
    processRemoteMessage({ commit }, wsData) {
        commit('SET_REMOTE_DATA', wsData)
    },
    connectionOpened({ commit }) {
        commit('SET_CONNECTION', true)
    },
    connectionClosed({ commit }) {
        commit('SET_CONNECTION', false)
    },
    connectionError({ commit }, error) {
        commit('SET_ERROR', error)
    },
}
export const mutations = {
    SET_REMOTE_DATA(state, wsData) {
        state.messageType = wsData.type
        state.connectionId = wsData.connectionId
        state.incomingChatInfo = wsData.documents
    },
    SET_CONNECTION(state, message) {
        state.connected = message
    },
    SET_ERROR(state, error) {
        state.error = error
    },
}

모든 vuex 모듈과 플러그인을 가져오는 저장소 인덱스입니다.

import { createStore } from 'vuex'
import * as chatQueue from '@/store/modules/chatQueue'
import * as messages from '@/store/modules/messages'
import * as notification from '@/store/modules/notification'
import * as shifts from '@/store/modules/shifts'
import * as tickets from '@/store/modules/tickets'
import * as token from '@/store/modules/token'
import * as user from '@/store/modules/user'
import * as websocket from '@/store/modules/websocket'
import * as createWebSocketPlugin from '@/store/plugins/createWebSocketPlugin'

export default createStore({
    modules: {
        chatQueue,
        messages,
        notification,
        shifts,
        tickets,
        user,
        token,
        websocket,
    },
    plugins: [createWebSocketPlugin],
    strict: false,
})

APP를 실행하려고 하면 즉시 다음 오류가 나타납니다.

vuex.esm-bundler.js:935 Uncaught TypeError: plugin is not a function
at vuex.esm-bundler.js:935:46
at Array.forEach (<anonymous>)
at new Store2 (vuex.esm-bundler.js:935:11)
at createStore (vuex.esm-bundler.js:880:10)
at index.js?t=1644319834874:12:16

저는 Vuex Plugins와 웹소켓에 관해서는 완전히 초보이기 때문에 Vuex 스토어에 플러그인을 Import하거나 접속하려고 할 때 뭔가 잘못되고 있는 것이 확실합니다.

다음과 같이 Import해야 한다고 생각합니다.

import createWebSocketPlugin from '@/store/plugins/createWebSocketPlugin'

기본적으로 모든 "모든"을 로 Import할 수 있도록 하기 때문입니다.createWebSocketPlugin.를 실행합니다.console.log에createWebSocketPlugin또한 createWebSocketPlugin은 이 기능을 대신하는 모듈인스턴스를 표시할 것으로 생각됩니다.export default

그 이유 때문일까요?createWebSocketPlugin()메서드 선언?

이 프레임워크는 다음 명령을 기다리고 있을 수 있습니다.socket파라미터createWebSocketPlugin(socket)소켓 오브젝트를 자동으로 제공합니다.이 매뉴얼에서는 이 방법에 대해socket파라미터를 지정합니다.또, 에러 메세지로 판단하면at Array.forEach (<anonymous>)소켓 개체를 제공하기 위해 Vuex.esm-bundler가 Arguments 어레이를 루프하고 있을 수 있습니다.

언급URL : https://stackoverflow.com/questions/71033662/implement-websocket-plugin-for-vuex-4-under-vue-3-socket-library-agnostic