feat: Add WebSocket playground for real-time API testing

README.md

@@ -35,6 +35,7 @@ Dory is:
 - 🎨 Customizable via Tailwind and minimal theme overrides
 - 🌍 Deploy to Netlify, Vercel, S3, GitHub Pages — your call
 - 🌐 HTTP client for testing API endpoints (automatic inference from openapi.json)
+- 🔄 WebSocket client for testing real-time connections with message history and authentication
 
 ---
 
@@ -192,4 +193,4 @@ We’re actively improving Dory. Here’s what’s on deck:
 * [ ] 🎨 **Themes** — full theming support with a flexible theme API
 * [ ] 🌐 **Multi-language Support** — internationalization (i18n) & localization (l10n)
 * [ ] 🚀 **GraphQL Client** — integrated GraphQL playground and client support
-* [ ] 🔄 **WebSocket Client** — built-in WebSocket utilities for real-time API demos
+* [x] 🔄 **WebSocket Client** — built-in WebSocket utilities for real-time API demos

docs/features.mdx

@@ -438,3 +438,61 @@ E = mc^2
 <Icon icon="FileText" />
 <Icon icon="CheckCircle" />
 </Row>
+
+<br />
+<br />
+<br />
+
+## API Testing Components
+
+### HTTP API Playground
+
+Interactive playground for testing HTTP API endpoints with authentication, headers, and request/response handling.
+
+```mdx
+<APIPlayground
+  method="GET"
+  url="/api/users"
+  title="Get Users"
+  description="Retrieve a list of users"
+  baseUrl="https://jsonplaceholder.typicode.com"
+/>
+```
+
+### WebSocket Playground
+
+Interactive playground for testing WebSocket connections with real-time messaging capabilities.
+
+```mdx
+<WebSocketPlayground
+  url="/ws"
+  title="Echo WebSocket"
+  description="Connect to a WebSocket server and send/receive messages"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    }
+  ]}
+/>
+```
+
+<WebSocketPlayground
+  url="/ws"
+  title="Echo WebSocket"
+  description="Connect to a WebSocket server and send/receive messages in real-time"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    }
+  ]}
+/>
+
+The WebSocket playground provides:
+- Real-time connection management
+- Message history with timestamps
+- Custom headers and subprotocols
+- Text and binary message support
+- Multiple server endpoints
+- Connection status indicators

docs/websocket-playground-demo.mdx

@@ -0,0 +1,128 @@
+---
+title: 'WebSocket Playground Demo'
+description: 'Interactive WebSocket playground for testing real-time connections'
+---
+
+# WebSocket Playground Demo
+
+This page demonstrates the new WebSocket playground that allows you to test WebSocket connections directly from the documentation.
+
+## Basic WebSocket Connection
+
+Test a simple WebSocket connection:
+
+<WebSocketPlayground
+  url="/ws"
+  title="Echo WebSocket"
+  description="Connect to a WebSocket server and send/receive messages in real-time"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    },
+    {
+      url: "ws://localhost:8080",
+      description: "Local Development Server"
+    }
+  ]}
+/>
+
+## WebSocket with Subprotocols
+
+Test a WebSocket connection with specific subprotocols:
+
+<WebSocketPlayground
+  url="/graphql"
+  title="GraphQL WebSocket"
+  description="Connect to a GraphQL WebSocket server with subscriptions"
+  protocols={["graphql-ws", "graphql-transport-ws"]}
+  servers={[
+    {
+      url: "wss://api.example.com",
+      description: "GraphQL API Server"
+    }
+  ]}
+/>
+
+## Chat WebSocket
+
+Test a chat WebSocket with authentication headers:
+
+<WebSocketPlayground
+  url="/chat"
+  title="Chat WebSocket"
+  description="Connect to a chat server with authentication"
+  headers={{
+    "Authorization": "Bearer your-token-here",
+    "X-Client-Version": "1.0.0"
+  }}
+  protocols={["chat", "v1.0"]}
+  servers={[
+    {
+      url: "wss://chat.example.com",
+      description: "Chat Server"
+    }
+  ]}
+/>
+
+## Features
+
+The WebSocket playground provides:
+
+- **Real-time Connection Management**: Connect and disconnect from WebSocket servers
+- **Connection Status Indicator**: Visual feedback for connection state (connected, connecting, disconnected, error)
+- **Message History**: See all sent and received messages with timestamps
+- **Custom Headers**: Add headers for the WebSocket handshake (authentication, etc.)
+- **Subprotocol Support**: Specify WebSocket subprotocols for specialized connections
+- **Text and Binary Messages**: Send both text and binary data
+- **Multiple Servers**: Easy switching between different WebSocket endpoints
+- **Error Handling**: Clear error messages for connection and message failures
+
+## Usage in Documentation
+
+To add a WebSocket playground to your documentation, use the `WebSocketPlayground` component:
+
+```mdx
+<WebSocketPlayground
+  url="/ws"
+  title="My WebSocket"
+  description="Description of what this WebSocket does"
+  headers={{
+    "Authorization": "Bearer token",
+    "X-Custom-Header": "value"
+  }}
+  protocols={["chat", "v1.0"]}
+  servers={[
+    {
+      url: "wss://api.example.com",
+      description: "Production Server"
+    },
+    {
+      url: "ws://localhost:8080",
+      description: "Development Server"
+    }
+  ]}
+/>
+```
+
+## WebSocket vs HTTP
+
+Unlike HTTP requests, WebSocket connections are:
+
+- **Stateful**: The connection remains open for bidirectional communication
+- **Real-time**: Messages can be sent and received instantly
+- **Event-driven**: Both client and server can initiate message sending
+- **Lower overhead**: No need for repeated HTTP handshakes
+
+## Common Use Cases
+
+WebSocket playgrounds are perfect for:
+
+- **Real-time APIs**: Chat applications, live updates, notifications
+- **GraphQL Subscriptions**: Real-time data subscriptions
+- **Gaming**: Real-time multiplayer game communication
+- **IoT**: Device communication and monitoring
+- **Trading**: Real-time market data and order updates
+- **Collaborative Tools**: Real-time document editing, shared whiteboards
+
+The playground seamlessly integrates with your existing documentation and provides a comprehensive testing environment for WebSocket-based APIs.

src/mdx/mdx.tsx

@@ -18,6 +18,7 @@ export { Steps, Step } from './step';
 export { Table as table, Th as th, Td as td } from './table';
 export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
 export { APIPlayground } from './api-playground';
+export { WebSocketPlayground } from './websocket-playground';
 export { Source } from './source';
 
 export const wrapper = ({ children }: { children: preact.ComponentChildren }) => {