feat(useSurrealWS): new composable

package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
+    "@vueuse/core": "^10.10.0",
     "undio": "^0.2.0"
   },
   "devDependencies": {

playground/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     databases: {
       staging: {
         host: '',
+        ws: '',
         NS: '',
         DB: '',
         SC: '',

playground/pages/fetch-examples.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <div style="display: inline-flex;">
+      <NuxtLink to="/">
+        Home
+      </NuxtLink>
+      <NuxtLink to="/ws-examples">
+        Websocket examples
+      </NuxtLink>
+    </div>
     <div style="display: flex; flex: auto; flex-direction: row; width: 100svw; gap: 1rem;">
       <div style="width: fit-content; border-right: 1px solid #aaa; padding-right: 1rem;">
         <input v-model="search" placeholder="Table name">

playground/pages/index.vue

@@ -4,6 +4,9 @@
       <NuxtLink to="/fetch-examples">
         Fetch examples
       </NuxtLink>
+      <NuxtLink to="/ws-examples">
+        Websocket examples
+      </NuxtLink>
     </div>
   </div>
 </template>

playground/pages/ws-examples.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div style="display: inline-flex;">
+      <NuxtLink to="/">
+        Home
+      </NuxtLink>
+      <NuxtLink to="/fetch-examples">
+        Fetch examples
+      </NuxtLink>
+    </div>
+    <div>
+      {{ _data }}
+    </div>
+    <button @click="userInfo">
+      Get user info
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { _data, rpc } = useSurrealWS()
+
+rpc({
+  method: 'live',
+  params: ['products'],
+})
+function userInfo() {
+  rpc({
+    method: 'info',
+  })
+}
+</script>

src/module.ts

@@ -45,6 +45,7 @@ export default defineNuxtModule<ModuleOptions>({
     databases: {
       default: {
         host: '',
+        ws: '',
         NS: '',
         DB: '',
         SC: '',

src/runtime/composables/surreal-ws.ts

@@ -0,0 +1,69 @@
+import { useWebSocket } from '@vueuse/core'
+import { joinURL } from 'ufo'
+
+import type { Overrides, RpcRequestWS, RpcResponse } from '../types'
+import { computed, ref, useRuntimeConfig, useSurrealAuth } from '#imports'
+
+export function useSurrealWS<T = any>(database?: Overrides['database']) {
+  const { databases, defaultDatabase } = useRuntimeConfig().public.surrealdb
+  const { token: userAuth } = useSurrealAuth()
+  const _database = computed(() => {
+    if (database !== undefined) {
+      if (typeof database !== 'string' && typeof database !== 'number' && typeof database !== 'symbol') {
+        return database
+      }
+      else {
+        return databases[database]
+      }
+    }
+    else {
+      return databases[defaultDatabase as keyof typeof databases]
+    }
+  })
+  const idCounter = ref(0)
+
+  console.log(_database.value)
+
+  const {
+    close,
+    data: _data,
+    open,
+    send: _send,
+    status,
+    ws,
+  } = useWebSocket<RpcResponse<T>>(joinURL(_database.value.ws!, 'rpc'), {
+    onConnected(ws) {
+      ws.send(JSON.stringify({
+        id: idCounter.value++,
+        method: 'use',
+        params: [_database.value.NS, _database.value.DB],
+      }))
+      ws.send(JSON.stringify({
+        id: idCounter.value++,
+        method: 'authenticate',
+        params: [userAuth.value],
+      }))
+    },
+    onDisconnected() {
+      idCounter.value = 0
+    },
+  })
+
+  function rpc<T = any>(req: RpcRequestWS<T>) {
+    if (status.value !== 'OPEN') return
+    return _send(JSON.stringify({
+      id: idCounter.value++,
+      ...req,
+    }))
+  }
+
+  return {
+    close,
+    _data,
+    open,
+    rpc,
+    _send,
+    status,
+    ws,
+  }
+}

src/runtime/types/index.d.ts

@@ -18,6 +18,7 @@ export interface Overrides {
 
 export interface DatabasePreset {
   host?: string
+  ws?: string
   NS?: string
   DB?: string
   SC?: string
@@ -172,7 +173,7 @@ export interface RpcRequest<
 
 export interface RpcRequestWS<
   T = any,
-  M extends keyof RpcMethodsWS<T> = keyof RpcMethods<T>,
+  M extends keyof RpcMethodsWS<T> = keyof RpcMethodsWS<T>,
   P extends RpcParamsWS<M, T> = RpcParamsWS<M, T>,
 > {
   method: M