WebSocket Guides

.vitepress/sidebars/app/guides.ts

@@ -234,6 +234,10 @@ export const guidesSidebar: DefaultTheme.SidebarItem[] = [
         text: "Adding a Header",
         link: "/app/guides/match_replace_header",
       },
+      {
+        text: "Modifying WebSocket Messages",
+        link: "/app/guides/match_replace_websocket",
+      },
       {
         text: "Using Capturing Groups",
         link: "/app/guides/match_replace_capturing",
@@ -252,7 +256,7 @@ export const guidesSidebar: DefaultTheme.SidebarItem[] = [
     text: "Replay",
     items: [
       {
-        text: "Sending Requests to Replay",
+        text: "Sending HTTP Requests to Replay",
         link: "/app/guides/replay_requests",
       },
       {
@@ -267,6 +271,10 @@ export const guidesSidebar: DefaultTheme.SidebarItem[] = [
         text: "Using Environment Variables in Replay",
         link: "/app/guides/replay_environment_variables",
       },
+      {
+        text: "Sending WebSocket Messages",
+        link: "/app/guides/replay_websocket",
+      },
     ],
   },
   {

src/app/guides/match_replace_websocket.md

@@ -0,0 +1,31 @@
+---
+description: "A step-by-step guide to modifying WebSocket messages in Caido using the Match & Replace feature."
+---
+
+# Modifying WebSocket Messages
+
+To modify an outgoing or incoming WebSocket message, **click** on the `Section` drop-down menu and select either `Request Websocket` or `Response Websocket`.
+
+Next, select an option from the `Matcher` drop-down menu to specify what data to modify:
+
+- `Full`: The entire message.
+- `Regex`: Matches a value determined by a regular expression.
+- `String`: Matches a string value.
+
+Then, specify the replacement value in the `Replacer` input field.
+
+Select the traffic source/s and click on the `+ Add` button to add the rule to the Default Collection.
+
+<img alt="Adding a WebSocket rule." src="/_images/match_replace_websocket.png" center />
+
+::: tip
+Give rules descriptive names for quick identification of their purpose.
+:::
+
+To enable the rule, **click** on its associated checkbox. Applied rules will be listed in the `Active Rules` table.
+
+<img alt="The Active Rules table." src="/_images/match_replace_websocket_enable.png" center width=350 />
+
+To view the modified message, within the [WS History](/app/quickstart/ws_history.md) interface **click** on the `Original` button above a message and select `Tamper`.
+
+<img alt="Viewing the modified message." src="/_images/match_replace_websocket_tamper.png" center width=350 />

src/app/guides/replay_requests.md

@@ -2,7 +2,7 @@
 description: "A step-by-step guide to sending requests from other Caido interfaces to the Replay interface for manual request testing and modification."
 ---
 
-# Sending Requests to Replay
+# Sending HTTP Requests to Replay
 
 ::: tip <code><Icon icon="fas fa-video" /></code> Video Demonstration
 ---
@@ -11,7 +11,7 @@ description: "A step-by-step guide to sending requests from other Caido interfac
 </div>
 :::
 
-You can send requests from other interfaces to the Replay interface in various ways:
+You can send HTTP requests from other interfaces to the Replay interface in various ways:
 
 - By **right-clicking** on a request row in a traffic table or within a request pane, hovering your mouse cursor over `Send to Replay`, and selecting the Collection to include it in.
 
@@ -20,3 +20,7 @@ You can send requests from other interfaces to the Replay interface in various w
 - Or by selecting a request row or focusing a request pane and using the default keyboard shortcut `CTRL` + `R`.
 
 Requests in the Replay interface are referred to as "sessions". Each session is listed as a tab that stores the associated request.
+
+Replay sessions can also be created manually by **clicking** on the `+ New Session` button and entering a connection URL.
+
+<img alt="Creating a new Replay session manually." src="/_images/replay_manual_session.png" center>

src/app/guides/replay_websocket.md

@@ -0,0 +1,17 @@
+---
+description: "A step-by-step guide to sending WebSocket messages in Caido's Replay feature."
+---
+
+# Sending WebSocket Messages
+
+To send a WebSocket message in Replay, **click** on the <code><Icon icon="fas fa-chevron-down" /></code> attached to the `+ New Session` button and select <code><Icon icon="fas fa-arrow-right-arrow-left" /> WebSocket</code>.
+
+<img alt="Creating a new WebSocket Replaysession." src="/_images/replay_websocket.png" center width=350>
+
+Enter a connection URL and **click** on the `Connect` button to create a new WebSocket session. This will send the HTTP upgrade request to the server and establish a WebSocket connection.
+
+<img alt="Establishing the WebSocket connection." src="/_images/replay_websocket_upgrade.png" center>
+
+Once the connection is established, you can send messages to the server by entering text in the input field and **clicking** the <code><Icon icon="fas fa-paper-plane" /></code> button.
+
+<img alt="Sending a WebSocket message." src="/_images/replay_websocket_message.png" center>