vue3 pinia websocket 使用

Vue 3 中的 Pinia 框架提供了对 WebSocket 的支持，您可以使用它来与服务器进行双向通信。

首先，您需要在服务器端启用 WebSocket。如果您使用的是 Node.js，可以使用 ws 库来创建 WebSocket 服务器。

然后，在 Vue 3 中，您可以使用 Pinia 提供的 api.ws 对象来访问 WebSocket。下面是一个简单的例子，展示了如何在 Vue 3 中使用 WebSocket：

javascript
复制代码
import { createApp, reactive, onMounted } from ''vue''

const app = createApp({
  setup() {
    const state = reactive({
      messages: []
    })

    // 建立 WebSocket 连接
    const ws = new WebSocket(''ws://localhost:8080'')

    // 监听消息事件
    ws.addEventListener(''message'', event => {
      state.messages.push(event.data)
    })

    // 监听错误事件
    ws.addEventListener(''error'', error => {
      console.error(error)
    })

    // 监听连接关闭事件
    ws.addEventListener(''close'', () => {
      console.log(''WebSocket closed'')
    })

    // 在组件销毁时关闭 WebSocket 连接
    onBeforeUnmount(() => {
      ws.close()
    })

    return {
      state
    }
  }
})

在这个例子中，我们创建了一个 WebSocket 连接，并在连接上监听消息、错误和连接关闭事件。然后，我们使用 onBeforeUnmount 钩子函数来在组件销毁时关闭 WebSocket 连接。

我希望这些信息能帮到您。