Websocket+Vuex implementiert eine Echtzeit-Chat-Software

//Vuex installieren
npm installiere vuex

//In main.js „import store from './store'“ einführen
neuer Vue({
    el: '#app',
    Router,
    speichern,
    rendern: h => h(App)
})

konstanter Zustand = {
    URL: '',
    webSocket: null,
    lockReconnect: false,
    Nachrichtenliste: [],
    msgItem: {},
    PingInterval: null,
    timeOut: null,
}
const Mutationen = {
    [Typen.INIT_WEBSOCKET](Status, Daten) {
        Zustand.webSocket = Daten
    },
    [Typen.LOCK_RE_CONNECT](Status, Daten) {
        state.lockReconnect = Daten
    },
    [Typen.SET_PING_INTERVAL](Status, Daten) {
        state.pingInterval = Daten
    },
    [Typen.SET_MSG_LIST](Status, Daten) {
        Status.MessageList.Push(Daten)
        state.msgItem = Daten
    },
}
const Aktionen = {
  initWebSocket({ Status, Commit, Dispatch, RootState }) {
        wenn (Zustand.webSocket) {
            zurückkehren
        }
        const realUrl = WSS_URL + rootState.doctorBasicInfo.token 
        const webSocket = neuer WebSocket(realUrl)
        webSocket.onopen = () => {
            console.log('Verbindung herstellen');
            Versand('HerzCheck')
        }
        webSocket.onmessage = e => {
            console.log('Empfangene Nachricht', e);
            versuchen {
                wenn (Typ von e.data === 'Zeichenfolge' und e.data !== 'PONG') {
                    let res = JSON.parse(e.data)
                    console.log('Empfangener Inhalt', res);
                    commit('SET_MSG_LIST', res)
                }
            } Fang (Fehler) {}
        }
        webSocket.onclose = () => {
            console.log('schließen');
            Versand('erneut verbinden')
        }
        webSocket.onerror = () => {
            console.log('fehlgeschlagen');
            Versand('erneut verbinden')
        }

        commit('INIT_WEBSOCKET', webSocket)
    },
    // Heartbeat-Paket heartCheck({ state, commit }) {
        console.log(Status, 'Status');
        const { webSocket } = Status
        const pingInterval = setInterval(() => {
            wenn (webSocket.readyState === 1) {
                webSocket.send('PING')
            }
        }, 20000)
        commit('SET_PING_INTERVAL', Ping-Intervall)
    },
    //Erneut verbinden reConnect({ status, commit, dispatch }) {
        wenn (Zustand.SperreNeuverbinden) {
            zurückkehren
        }
        commit('INIT_WEBSOCKET', null)
        commit('LOCK_RE_CONNECT', wahr)
        setzeTimeout(() => {
            Versand('initWebSocket')
            commit('LOCK_RE_CONNECT', falsch)
        }, 20000)
    },
 }
const getter = {
    webSocket: Status => Status.webSocket,
    Nachrichtenliste: Status => Status.Nachrichtenliste,
    msgItem: Status => Status.msgItem,
}
Standard exportieren {
    Namespace: wahr,
    Zustand,
    Aktionen,
    Mutationen,
    Getter
}

Methoden: {
...mapActions("webSocket", ["initWebSocket", "schließen"]),
   drückeItem(Item) {
      const initMsg = Element;
      diese.msgList.push(initMsg);
    }
}
montiert() {
	dies.initWebSocket();
}
betrachten:
    msgItem: Funktion (Item) {
        dies.pushItem(item);
    }
  },
berechnet: {
    ...mapGetters("webSocket", ["messageList", "msgItem"]),
   
  },

 <li v-for="(Element, i) in msgList" :key="i" class="msgBox"></li>