关于前端:vue3tsVuex中如何使用websocket协议

vue3+ts+Vuex中如何应用websocket协定

本文作者应用的是ts+vue3的setup语法糖，大家留神应用的vue版本！

在stroe中

import { createStore } from 'vuex'import { stateInt } from '../interface/storeInterface'const state: stateInt = {  //推送音讯  data: {},  webSocket: null,}export default createStore({  state,  mutations: {    //websocket初始化    initWebsocket(state) {      state.webSocket = new WebSocket(          // 此处填写你要连贯的ws地址        'ws://127.0.0.1:3000/socket/' + Math.random()      )      //建设连贯      state.webSocket.onopen = function () {        /*         * 连贯胜利         * */        console.log('通信开始')        // 发送心跳避免ws协定主动断联        setInterval(() => {          state.webSocket.send('1')        }, 1000 * 60)      }      //接管服务端音讯      state.webSocket.onmessage = function (e) {        /*         * 收到音讯时回调函数         * */        console.log('收到的数据：', e.data)        // 如果数据对象为字符串，可转换为对象格局        let data = JSON.parse(e.data)        state.data = e.data        console.log(data)      }      state.webSocket.onerror = function () {        /*         * 通信异样         * */        console.log('通信异样')      }      state.webSocket.close = function () {        /*         * 敞开连贯时回调函数         * */        console.log('连贯已断开')      }    },  },  actions: {  },  modules: {},})

/interface/storeInterface 文件下的interface接口

export interface stateInt {  data: Object  webSocket: WebSocket}

vue3中

在App.vue中，语法糖格局下

<script lang="ts" setup>    import { onBeforeMount } from 'vue'    import { useStore } from 'vuex'    /**     * 仓库     */    const store = useStore()    //websocket初始化    const initSocket = () => {      store.commit('initWebsocket')    }        onBeforeMount(() => {      //console.log('2.组件挂载页面之前执行----onBeforeMount')      initSocket()    })</script>