vue3+websocket

Vue3是一种流行的JavaScript框架，用于构建用户界面。它提供了一种简单的方式来实现WebSocket通信。下面是一个使用Vue3和WebSocket的简单示例：

<template>
  <div>
    <button @click="connectMsg">连接设备</button>
    <button @click="closeWs">断开设备</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { closeWebSocket, initWebSocket } from '../../utils/websocket'
import { useStore } from 'vuex'

const store = useStore()

// 连接设备
function connectMsg() {
  const toIp = `ws://192.168.50.50:8822/websocket/ipad/${roomId.value}`
  store.dispatch('connect')
  initWebSocket(toIp)
}

// 断开设备
function closeWs() {
  closeWebSocket()
  store.dispatch('disconnect')
}
</script>

在上面的示例中，我们使用了Vue3的`ref`和`onMounted`函数来定义状态和生命周期钩子。`useStore`函数用于获取Vuex的store实例。`connectMsg`函数用于连接设备，它会调用`initWebSocket`函数来初始化WebSocket连接。`closeWs`函数用于断开设备，它会调用`closeWebSocket`函数来关闭WebSocket连接。

请注意，上述示例中的`roomId`变量未定义，你需要根据你的具体需求进行定义。