Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

//vuexをインストール
npm インストール vuex

//main.js に import store from './store' を導入します
新しいVue({
    el: '#app',
    ルーター、
    店、
    レンダリング: h => h(App)
})

定数状態 = {
    URL: ''、
    webSocket: null、
    lockReconnect: false、
    メッセージリスト: [],
    メッセージ項目: {},
    ping間隔: null、
    タイムアウト: null、
}
const 変異 = {
    [types.INIT_WEBSOCKET](状態、データ) {
        state.webSocket = データ
    },
    [types.LOCK_RE_CONNECT](状態、データ) {
        state.lockReconnect = データ
    },
    [types.SET_PING_INTERVAL](状態、データ) {
        state.pingInterval = データ
    },
    [types.SET_MSG_LIST](状態、データ) {
        state.messageList.push(データ)
        state.msgItem = データ
    },
}
定数アクション = {
  initWebSocket({ 状態、コミット、ディスパッチ、ルート状態 }) {
        状態.webSocketの場合{
            戻る
        }
        定数 realUrl = WSS_URL + rootState.doctorBasicInfo.token 
        定数 webSocket = 新しい WebSocket(realUrl)
        webSocket.onopen = () => {
            console.log('リンクを確立しました');
            ディスパッチ('ハートチェック')
        }
        webSocket.onmessage = e => {
            console.log('メッセージを受信しました', e);
            試す {
                if (typeof e.data === 'string' && e.data !== 'PONG') {
                    res = JSON.parse(e.data) とします。
                    console.log('受信したコンテンツ', res);
                    コミット('SET_MSG_LIST', res)
                }
            } キャッチ (エラー) {}
        }
        webSocket.onclose = () => {
            コンソールログ('閉じる');
            ディスパッチ('再接続')
        }
        webSocket.onerror = () => {
            console.log('失敗');
            ディスパッチ('再接続')
        }

        コミット('INIT_WEBSOCKET'、webSocket)
    },
    // ハートビートパケット heartCheck({ state, commit }) {
        console.log(状態、'状態');
        const { webSocket } = 状態
        const pingInterval = setInterval(() => {
            webSocket.readyState === 1 の場合 {
                webSocket.send('PING')
            }
        }, 20000)
        コミット('SET_PING_INTERVAL', pingInterval)
    },
    //再接続 reConnect({ state, commit, dispatch }) {
        （state.lockReconnect）の場合{
            戻る
        }
        コミット('INIT_WEBSOCKET', null)
        コミット('LOCK_RE_CONNECT', true)
        タイムアウトを設定する(() => {
            ディスパッチ('WebSocketを初期化')
            コミット('LOCK_RE_CONNECT', false)
        }, 20000)
    },
 }
const ゲッター = {
    webSocket: 状態 => state.webSocket、
    メッセージリスト: 状態 => state.messageList、
    メッセージアイテム: 状態 => 状態.メッセージアイテム、
}
エクスポートデフォルト{
    名前空間: true、
    州、
    行動、
    突然変異、
    ゲッター
}

メソッド: {
...mapActions("webSocket", ["initWebSocket", "close"]),
   プッシュアイテム(アイテム) {
      const initMsg = 項目;
      this.msgList.push(initMsg);
    }
}
マウント() {
	このメソッドは、WebSocket を初期化します。
}
時計：
    メッセージアイテム: 関数 (アイテム) {
        this.pushItem(アイテム);
    }
  },
計算: {
    ...mapGetters("webSocket", ["messageList", "msgItem"]),
   
  },

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