From 54164dc8723017eb45bf03dcaa9d00de9422de44 Mon Sep 17 00:00:00 2001 From: Francisco Pizarro Date: Tue, 10 Dec 2024 15:46:06 -0300 Subject: [PATCH 1/2] Add support for Server-Sent Events (SSE) in API Explorer and configuration --- demo/docusaurus.config.ts | 12 +++++ demo/examples/sse.yaml | 45 +++++++++++++++++++ .../src/theme/ApiExplorer/Request/index.tsx | 29 ++++++++++-- 3 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 demo/examples/sse.yaml diff --git a/demo/docusaurus.config.ts b/demo/docusaurus.config.ts index 51faf4345..c9f53e658 100644 --- a/demo/docusaurus.config.ts +++ b/demo/docusaurus.config.ts @@ -298,6 +298,18 @@ const config: Config = { hideSendButton: false, showSchemas: true, } satisfies OpenApiPlugin.Options, + sse: { + specPath: "examples/sse.yaml", + outputDir: "docs/sse", + sidebarOptions: { + groupPathsBy: "tag", + categoryLinkSource: "tag", + }, + template: "api.mustache", // Customize API MDX with mustache template + downloadUrl: "/sse.yaml", + hideSendButton: false, + showSchemas: true, + } satisfies OpenApiPlugin.Options, petstore31: { specPath: "examples/petstore-3.1.yaml", proxy: "https://cors.pan.dev", diff --git a/demo/examples/sse.yaml b/demo/examples/sse.yaml new file mode 100644 index 000000000..1238c6749 --- /dev/null +++ b/demo/examples/sse.yaml @@ -0,0 +1,45 @@ +openapi: 3.1.0 +info: + title: SSE Example API + version: 1.0.0 + description: An example API that provides server-sent events (SSE) for real-time data streaming. +servers: + - url: https://api.example.com + description: Production Server + - url: http://localhost:3001 + description: Local Development Server +paths: + /events: + get: + summary: Subscribe to Server-Sent Events + description: Streams real-time events to the client using Server-Sent Events (SSE). + operationId: getSSEEvents + responses: + "200": + description: Stream of server-sent events. + content: + text/event-stream: + schema: + type: object + properties: + event: + type: string + description: The type of the event. + data: + type: string + description: Payload of the event. + id: + type: string + description: Unique ID for the event. + example: + event: message + id: "1" + data: Hello, World! +components: + securitySchemes: + bearerAuth: + type: http + scheme: bearer + description: Bearer authentication using a token. +security: + - bearerAuth: [] diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx index 146110cde..e68b9f1df 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx @@ -95,14 +95,37 @@ function Request({ item }: { item: ApiItem }) { const methods = useForm({ shouldFocusError: false }); + const handleEventStream = async (res) => { + res.headers && dispatch(setHeaders(Object.fromEntries(res.headers))); + dispatch(setCode(res.status)); + + const reader = res.body.getReader(); + const decoder = new TextDecoder(); + let result = ""; + while (true) { + const { done, value } = await reader.read(); + if (done) break; + result += decoder.decode(value, { stream: true }); + dispatch(setResponse(result)); + } + }; + + const handleResponse = async (res) => { + dispatch(setResponse(await res.text())); + dispatch(setCode(res.status)); + res.headers && dispatch(setHeaders(Object.fromEntries(res.headers))); + }; + const onSubmit = async (data) => { dispatch(setResponse("Fetching...")); try { await delay(1200); const res = await makeRequest(postmanRequest, proxy, body); - dispatch(setResponse(await res.text())); - dispatch(setCode(res.status)); - res.headers && dispatch(setHeaders(Object.fromEntries(res.headers))); + if (res.headers.get("content-type")?.includes("text/event-stream")) { + await handleEventStream(res); + } else { + await handleResponse(res); + } } catch (e: any) { console.log(e); dispatch(setResponse("Connection failed")); From cf0aca7a031454de7db59af5072d683275898b1f Mon Sep 17 00:00:00 2001 From: dvaJi Date: Fri, 20 Dec 2024 00:12:53 -0300 Subject: [PATCH 2/2] remove local test files --- demo/docusaurus.config.ts | 12 ----------- demo/examples/sse.yaml | 45 --------------------------------------- 2 files changed, 57 deletions(-) delete mode 100644 demo/examples/sse.yaml diff --git a/demo/docusaurus.config.ts b/demo/docusaurus.config.ts index c9f53e658..51faf4345 100644 --- a/demo/docusaurus.config.ts +++ b/demo/docusaurus.config.ts @@ -298,18 +298,6 @@ const config: Config = { hideSendButton: false, showSchemas: true, } satisfies OpenApiPlugin.Options, - sse: { - specPath: "examples/sse.yaml", - outputDir: "docs/sse", - sidebarOptions: { - groupPathsBy: "tag", - categoryLinkSource: "tag", - }, - template: "api.mustache", // Customize API MDX with mustache template - downloadUrl: "/sse.yaml", - hideSendButton: false, - showSchemas: true, - } satisfies OpenApiPlugin.Options, petstore31: { specPath: "examples/petstore-3.1.yaml", proxy: "https://cors.pan.dev", diff --git a/demo/examples/sse.yaml b/demo/examples/sse.yaml deleted file mode 100644 index 1238c6749..000000000 --- a/demo/examples/sse.yaml +++ /dev/null @@ -1,45 +0,0 @@ -openapi: 3.1.0 -info: - title: SSE Example API - version: 1.0.0 - description: An example API that provides server-sent events (SSE) for real-time data streaming. -servers: - - url: https://api.example.com - description: Production Server - - url: http://localhost:3001 - description: Local Development Server -paths: - /events: - get: - summary: Subscribe to Server-Sent Events - description: Streams real-time events to the client using Server-Sent Events (SSE). - operationId: getSSEEvents - responses: - "200": - description: Stream of server-sent events. - content: - text/event-stream: - schema: - type: object - properties: - event: - type: string - description: The type of the event. - data: - type: string - description: Payload of the event. - id: - type: string - description: Unique ID for the event. - example: - event: message - id: "1" - data: Hello, World! -components: - securitySchemes: - bearerAuth: - type: http - scheme: bearer - description: Bearer authentication using a token. -security: - - bearerAuth: []