add asyncapi playground

Author: hahnbeelee

api-playground/asyncapi/playground.mdx

@@ -1,11 +1,5 @@
 ---
-title: "Websockets Playground"
+title: "Playground"
 description: "Enable users to interact with your websockets"
+asyncapi: "/asyncapi.yaml channelOne"
 ---
-
-Autogenerating pages from your AsyncAPI schema will create pages for each channel that display message data that can be sent and received. In the API Playground for websockets, you can connect to websocket servers to send and receive messages.
-
-![](https://picsum.photos/600/400)
-(this should be a nice image of messages in the API playground)
-
-The API Playground for websockets is enabled by default, but automatically disabled if security schemes are required in the schema. Learn more about playground settings [here](settings/global#param-playground).

asyncapi.yaml

@@ -0,0 +1,80 @@
+asyncapi: 3.0.0
+info:
+  title: Test websocket schema
+  version: 1.0.0
+  description: This is a test websocket API.
+channels:
+  channelOne:
+    title: Test channel
+    description: >-
+      This is a websocket channel.
+
+      It can have _markdown_ in the description.
+
+      * Use the "echo-websocket.hoppscotch.io" server to receive timestamped messages every second.
+      
+      * Use the "echo.websocket.org" server to send test messages to the websocket. This server will echo back any messages you send to it.
+
+    address: /
+    messages:
+      TestMessage:
+        $ref: '#/components/messages/TestMessage'
+      Timestamp:
+        $ref: '#/components/messages/Timestamp'
+servers:
+  echo-websocket:
+    host: echo-websocket.hoppscotch.io
+    protocol: wss
+  echo:
+    host: echo.websocket.org
+    protocol: wss
+operations:
+  sendTestMessage:
+    action: receive
+    channel:
+      $ref: '#/channels/channelOne'
+    messages:
+      - $ref: '#/channels/channelOne/messages/TestMessage'
+  receiveTestMessage:
+    action: send
+    channel:
+      $ref: '#/channels/channelOne'
+    messages:
+      - $ref: '#/channels/channelOne/messages/TestMessage'
+  receiveTimestamp:
+    action: send
+    channel:
+      $ref: '#/channels/channelOne'
+    messages:
+      - $ref: '#/channels/channelOne/messages/Timestamp'
+components:
+  messages:
+    TestMessage:
+      title: Test message
+      description: Test message sent to the echo server
+      payload:
+        type: object
+        properties:
+          text:
+            type: string
+            description: The text of your message
+          subtext:
+            type: string
+            description: Optional second message field
+          from:
+            type: string
+            description: The name of the sender
+        required:
+          - text
+    Timestamp:
+      title: Timestamp
+      description: Timestamp message sent from echo hoppscotch server
+      payload:
+        schema:
+          $ref: '#/components/schemas/Timestamp'
+  schemas:
+    Timestamp:
+      type: string
+      description: Timestamp message sent from echo hoppscotch server
+      examples:
+        - '22:02:27 GMT+0000 (Coordinated Universal Time)'