关于前端: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>