vue3中websocket的封装

在 Vue 3 中，我们可以使用 provide 和 inject 来实现 WebSocket 的封装。

以下是一个基本的 WebSocket 插件的示例：

// websocket.js

import { provide, inject } from 'vue'

const WebSocketSymbol = Symbol('WebSocket')

export function useWebSocket(url) {
  const socket = new WebSocket(url)

  provide(WebSocketSymbol, socket)

  return {
    socket
  }
}

export function injectWebSocket() {
  const socket = inject(WebSocketSymbol)

  if (!socket) {
    throw new Error('WebSocket is not provided')
  }

  return {
    socket
  }
}

在组件中使用 WebSocket：

// MyComponent.vue

import { injectWebSocket } from './websocket'

export default {
  created() {
    const { socket } = injectWebSocket()

    socket.send('Hello WebSocket')
  }
}

在应用程序的入口文件中初始化 WebSocket：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import { useWebSocket } from './websocket'

const app = createApp(App)

useWebSocket('ws://localhost:8080')

app.mount('#app')

这样，您就可以在 Vue 3 应用程序中方便地使用 WebSocket 了。当然，您也可以根据自己的需求进行更复杂的封装。