Ably для realtime-обновлений

// realtime module или app/composables/useAbly.ts
import Ably from 'ably'

export function useAbly() {
  const config = useRuntimeConfig()
  const userStore = useUserStore()

  let ably: Ably.Realtime | null = null

  function connect() {
    if (ably) return

    ably = new Ably.Realtime({
      key: config.public.ablyKey,
      clientId: userStore.user?.id,
    })
  }

  function subscribe(
    channelName: string,
    callback: (message: Ably.Message) => void
  ) {
    if (!ably) connect()

    const channel = ably!.channels.get(channelName)
    channel.subscribe(callback)

    return () => channel.unsubscribe(callback)
  }

  function disconnect() {
    if (ably) {
      ably.close()
      ably = null
    }
  }

  return { connect, subscribe, disconnect }
}

<script setup lang="ts">
const { subscribe } = useAbly()

onMounted(() => {
  const unsubscribe = subscribe('orders:new', (message) => {
    // Обработка нового заказа
  })

  onUnmounted(unsubscribe)
})
</script>