vue3接受websocket端口信息

在Vue 3中，你可以使用Vue.js的Composition API来接收WebSocket端口信息。首先，你需要安装Vue.js的Composition API插件：

npm install @vue/composition-api --save

然后，在你的Vue组件中，导入`useWebSocket`函数并使用它来创建WebSocket连接并接收数据：

<template>
  <div>
    <p v-for="message in messages">{{ message }}</p>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'
import { useWebSocket } from '@/composables/useWebSocket'

export default {
  setup() {
    const messages = ref([])

    const { send } = useWebSocket('ws://localhost:3000', {
      onMessage: (event) => {
        messages.value.push(event.data)
      }
    })

    return {
      messages,
      send
    }
  }
}
</script>

在上面的代码中，我们使用`useWebSocket`函数来创建WebSocket连接，并在`onMessage`回调中将接收到的数据添加到`messages`数组中。然后，我们将`messages`数组渲染到模板中。

注意，我们还将`send`函数返回到模板中，这样我们就可以在Vue组件中使用它来发送WebSocket消息。

最后，我们需要创建`useWebSocket`自定义Hook：

import { ref, onMounted, onUnmounted } from '@vue/composition-api'

export function useWebSocket(url, options = {}) {
  const ws = new WebSocket(url)

  const ready = ref(false)

  const send = (data) => {
    if (ready.value) {
      ws.send(data)
    }
  }

  ws.onopen = () => {
    ready.value = true
  }

  ws.onclose = () => {
    ready.value = false
  }

  ws.onerror = (event) => {
    console.error(`WebSocket error: ${event}`)
  }

  ws.onmessage = options.onMessage

  onMounted(() => {
    ws.onopen()
  })

  onUnmounted(() => {
    ws.onclose()
  })

  return {
    send
  }
}

在上面的代码中，我们创建了`useWebSocket`自定义Hook，并在其中创建WebSocket连接。我们还使用Vue.js的生命周期钩子函数`onMounted`和`onUnmounted`来处理WebSocket连接的打开和关闭。

最后，我们返回一个`send`函数到调用`useWebSocket`自定义Hook的组件中，这样我们就可以在组件中使用它来发送WebSocket消息。