WIP: connection websocket

Author: winverse

apps/book-server/src/lib/mq/MqService.mts

@@ -53,7 +53,7 @@ export class MqService {
 
 type SubscriptionResolverKey = keyof SubscriptionResolvers
 type Payload = {
-  [K in SubscriptionResolverKey]?: { message: string }
+  [K in SubscriptionResolverKey]?: { message: string } & { [k in string]: any }
 }
 type TopicMap = {
   [K in SubscriptionResolverKey]: (args: any) => string

apps/book-server/src/services/BookDeployService/index.mts

@@ -12,6 +12,7 @@ import { ConfilctError } from '@errors/ConfilctError.mjs'
 import { DeployResult } from '@graphql/generated.js'
 import { MongoService } from '@lib/mongo/MongoService.mjs'
 import { RedisService } from '@lib/redis/RedisService.mjs'
+import { MqService } from '@lib/mq/MqService.mjs'
 
 interface Service {
   deploy: (bookId: string, signedWriterId?: string) => Promise<DeployResult>
@@ -23,6 +24,7 @@ export class BookDeployService implements Service {
     private readonly mongo: MongoService,
     private readonly awsS3: AwsS3Service,
     private readonly redis: RedisService,
+    private readonly mq: MqService,
     private readonly writerService: WriterService,
     private readonly bookService: BookService,
   ) {}
@@ -113,6 +115,16 @@ export class BookDeployService implements Service {
         })
       })
 
+      this.mq.publish({
+        topicParameter: book.id,
+        payload: {
+          deployCompleted: {
+            message: 'Deploy completed',
+            published_url,
+          },
+        },
+      })
+
       return {
         published_url,
       }

apps/book-web/package.json

@@ -25,6 +25,7 @@
     "graphql": "^16.7.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.16.0",
     "gray-matter": "^4.0.3",
     "next": "14.2.3",
     "react": "^18",
@@ -37,7 +38,9 @@
     "remark-reading-time": "^2.0.1",
     "shiki": "^0.14.3",
     "unified": "^10.1.2",
+    "urql": "^4.1.0",
     "vscode-oniguruma": "^2.0.1",
+    "wonka": "^6.3.4",
     "zod": "^3.23.7"
   },
   "devDependencies": {

apps/book-web/src/graphql/bookServer/book.gql

@@ -13,3 +13,9 @@ mutation build($input: BookUrlSlugInput!) {
 query isDeploy($input: IsDeployInput!) {
   isDeploy(input: $input)
 }
+
+subscription DeployCompleted($input: BookUrlSlugInput!) {
+  deployCompleted(input: $input) {
+    message
+  }
+}

apps/book-web/src/graphql/bookServer/generated/bookServer.ts

@@ -222,6 +222,12 @@ export type IsDeployQueryVariables = Exact<{
 
 export type IsDeployQuery = { isDeploy: boolean }
 
+export type DeployCompletedSubscriptionVariables = Exact<{
+  input: BookUrlSlugInput
+}>
+
+export type DeployCompletedSubscription = { deployCompleted: { message: string } | null }
+
 export type GetPagesQueryVariables = Exact<{
   input: GetPagesInput
 }>
@@ -385,6 +391,13 @@ useSuspenseIsDeployQuery.getKey = (variables: IsDeployQueryVariables) => [
 useIsDeployQuery.fetcher = (variables: IsDeployQueryVariables, options?: RequestInit['headers']) =>
   fetcher<IsDeployQuery, IsDeployQueryVariables>(IsDeployDocument, variables, options)
 
+export const DeployCompletedDocument = `
+    subscription DeployCompleted($input: BookUrlSlugInput!) {
+  deployCompleted(input: $input) {
+    message
+  }
+}
+    `
 export const GetPagesDocument = `
     query getPages($input: GetPagesInput!) {
   pages(input: $input) {

apps/book-web/src/graphql/bookServer/helpers/bookServerFetcher.ts

@@ -1,5 +1,8 @@
 import { ENV } from '@/env'
 import graphqlFetch from '@/lib/graphqlFetch'
+import { pipe, subscribe } from 'wonka'
+import { urqlClient } from './bookServerUrlql'
+import { AnyVariables } from 'urql'
 
 export function fetcher<TData, TVariables extends Record<string, any>>(
   query: string,
@@ -19,3 +22,20 @@ export function fetcher<TData, TVariables extends Record<string, any>>(
     return data as Awaited<TData>
   }
 }
+export function subscriptionFetcher<TData, TVariables extends AnyVariables>(
+  query: string,
+  variables: TVariables,
+) {
+  return new Promise<TData>((resolve) => {
+    const subscription = pipe(
+      urqlClient.subscription<TData, TVariables>(query, variables),
+      subscribe((result) => {
+        if (result.data) {
+          resolve(result.data)
+        }
+      }),
+    )
+
+    return () => subscription.unsubscribe()
+  })
+}

apps/book-web/src/graphql/bookServer/helpers/bookServerUrlql.ts

@@ -0,0 +1,22 @@
+import { createClient, subscriptionExchange, cacheExchange, fetchExchange } from 'urql'
+import { createClient as createWSClient, SubscribePayload } from 'graphql-ws'
+import { ENV } from '@/env'
+
+const wsClient = createWSClient({
+  url: `ws://${ENV.graphqlBookServerHost.replace(/^http(s)?:\/\//, '')}/graphql`,
+})
+
+export const urqlClient = createClient({
+  url: `${ENV.graphqlBookServerHost}/graphql`,
+  exchanges: [
+    cacheExchange,
+    fetchExchange,
+    subscriptionExchange({
+      forwardSubscription: (operation) => ({
+        subscribe: (sink) => ({
+          unsubscribe: wsClient.subscribe(operation as SubscribePayload, sink),
+        }),
+      }),
+    }),
+  ],
+})

apps/book-web/src/layouts/MarkdownEditorLayout/MarkdownEditorLayout.tsx

@@ -7,6 +7,7 @@ import { themeConfig } from './context'
 import { useEffect, useState } from 'react'
 import { BookMetadata, generateBookMetadata, Pages } from '@/lib/generateBookMetadata'
 import {
+  DeployCompletedDocument,
   useBuildMutation,
   useCreatePageMutation,
   useDeletePageMutation,
@@ -18,6 +19,7 @@ import {
   useUpdatePageMutation,
 } from '@/graphql/bookServer/generated/bookServer'
 import { useUrlSlug } from '@/hooks/useUrlSlug'
+import { useSubscription } from 'urql'
 
 type Props = {
   children?: React.ReactNode
@@ -54,6 +56,15 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
     },
   })
 
+  const deployCompleted = useSubscription({
+    query: DeployCompletedDocument,
+    variables: { input: { book_url_slug: bookUrlSlug } },
+  })
+
+  useEffect(() => {
+    console.log(deployCompleted)
+  }, [deployCompleted])
+
   const { data: isDeployData } = useIsDeployQuery({
     input: {
       book_url_slug: bookUrlSlug,
@@ -230,7 +241,6 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
     }
 
     const timeoutId = setTimeout(dispatchDeployEvent, 200)
-
     return () => {
       clearTimeout(timeoutId)
     }

apps/book-web/src/provider/CoreProvider.tsx

@@ -1,4 +1,5 @@
 import ReactQueryProvider from './ReactQueryProvider'
+import UrqlProvider from './UrqlProvider'
 
 type Props = {
   children: React.ReactNode
@@ -7,7 +8,9 @@ type Props = {
 function CoreProvider({ children }: Props) {
   return (
     <>
-      <ReactQueryProvider>{children}</ReactQueryProvider>
+      <ReactQueryProvider>
+        <UrqlProvider>{children}</UrqlProvider>
+      </ReactQueryProvider>
     </>
   )
 }

apps/book-web/src/provider/UrqlProvider.tsx

@@ -0,0 +1,32 @@
+import { createClient, subscriptionExchange, cacheExchange, fetchExchange, Provider } from 'urql'
+import { createClient as createWSClient, SubscribePayload } from 'graphql-ws'
+import { ENV } from '@/env'
+
+type Props = {
+  children: React.ReactNode
+}
+
+const wsClient = createWSClient({
+  url: `ws://${ENV.graphqlBookServerHost.replace(/^http(s)?:\/\//, '')}/graphql`,
+})
+
+export const urqlClient = createClient({
+  url: `${ENV.graphqlBookServerHost}/graphql`,
+  exchanges: [
+    cacheExchange,
+    fetchExchange,
+    subscriptionExchange({
+      forwardSubscription: (operation) => ({
+        subscribe: (sink) => ({
+          unsubscribe: wsClient.subscribe(operation as SubscribePayload, sink),
+        }),
+      }),
+    }),
+  ],
+})
+
+function UrqlProvider({ children }: Props) {
+  return <Provider value={urqlClient}>{children}</Provider>
+}
+
+export default UrqlProvider