vue3+ts+Vuex中如何使用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>