Merge pull request #15 from tomvanderlee/feature/websocketsv2.1.0

Feature/websockets

13 files changed, 774 insertions, 175 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index b1a4501..ad36add 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactElement, useContext, useEffect, useMemo, useState } from "react";
-import useRequests, { ReadyState, RequestResponse } from "~/hooks/useRequests";
+import useRequests from "~/hooks/useRequests";
 
 import styles from "~/components/App/App.module.scss";
 import RequestDetails from "~/components/RequestDetails/RequestDetails";
@@ -13,6 +13,8 @@ import Moon from "~/components/Icons/Moon";
 import Trash from "~/components/Icons/Trash";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import RequestList from "~/components/RequestList/RequestList";
+import { Call, ReadyState } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
 
 interface Config {
   url: string;
@@ -47,29 +49,14 @@ const statusTextMap: ReadyStateMap = {
 
 export default function App() {
   const { darkMode, toggle } = useContext(DarkModeContext);
-  const [config, setConfig] = useState<Config | null>(null);
-
-  const { calls, readyState, clear } = useRequests({
-    onConnect: async () => {
-      const response = await fetch(`http://${getHost()}/config/`);
-      const config = await response.json();
-      setConfig(config);
-    },
-  });
+  const { config, selectedCall, setSelectedCall, readyState, clear } =
+    useContext(ConnectionContext);
 
   useEffect(() => {
     const url = new URL(config?.url ?? "https://loading...");
     document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
   }, [readyState, config?.url]);
 
-  const [selectedRequestIndex, setSelectedRequestIndex] = useState<
-    number | null
-  >(null);
-  const selectedRequest = useMemo<RequestResponse | null>(
-    () => (selectedRequestIndex === null ? null : calls[selectedRequestIndex]),
-    [selectedRequestIndex, calls]
-  );
-
   const settingsMenu: (SettingsMenu | null)[] = [
     {
       onClick: toggle,
@@ -79,7 +66,7 @@ export default function App() {
     null,
     {
       onClick: () => {
-        setSelectedRequestIndex(null);
+        setSelectedCall(null);
         clear();
       },
       icon: <Trash />,
@@ -105,14 +92,15 @@ export default function App() {
                 </a>
               </Navbar.Text>
               <Navbar.Toggle aria-controls="settings" />
-              <Navbar.Collapse id="settings" className="ms-2">
+              <Navbar.Collapse id="settings" className="ms-2" role="button">
                 <Nav>
                   <NavDropdown align="end" title={<Sliders />}>
-                    {settingsMenu.map((item) => {
+                    {settingsMenu.map((item, index) => {
                       if (item !== null) {
                         const { onClick, icon, label } = item;
                         return (
                           <NavDropdown.Item
+                            key={label}
                             onClick={onClick}
                             className="d-flex align-items-center"
                           >
@@ -121,7 +109,7 @@ export default function App() {
                           </NavDropdown.Item>
                         );
                       } else {
-                        return <NavDropdown.Divider />;
+                        return <NavDropdown.Divider key={`item-${index}`} />;
                       }
                     })}
                   </NavDropdown>
@@ -133,14 +121,10 @@ export default function App() {
 
         <main className={styles.main}>
           <div className={classNames("border-end", styles.sidebar)}>
-            <RequestList
-              requests={calls}
-              selectedRequestIndex={selectedRequestIndex}
-              setSelectedRequestIndex={setSelectedRequestIndex}
-            />
+            <RequestList />
           </div>
           <div className={styles.details}>
-            <RequestDetails requestResponse={selectedRequest} />
+            <RequestDetails />
           </div>
         </main>
       </div>
diff --git a/src/components/Frames/Frames.module.scss b/src/components/Frames/Frames.module.scss
new file mode 100644
index 0000000..821f0b8
--- /dev/null
+++ b/src/components/Frames/Frames.module.scss
@@ -0,0 +1,9 @@
+.arrow {
+  &.outbound {
+    color: green;
+  }
+
+  &.inbound {
+    color: red;
+  }
+}
diff --git a/src/components/Frames/Frames.tsx b/src/components/Frames/Frames.tsx
new file mode 100644
index 0000000..83c4c96
--- /dev/null
+++ b/src/components/Frames/Frames.tsx
@@ -0,0 +1,75 @@
+import { Frame } from "~/types";
+import React, { PropsWithChildren, useContext } from "react";
+import { Col, ListGroup, Row } from "react-bootstrap";
+import classNames from "classnames";
+import styles from "./Frames.module.scss";
+import dayjs from "dayjs";
+import ReactJson from "react-json-view";
+import { DarkModeContext } from "~/contexts/DarkMode";
+
+function isJson(data: any): boolean {
+  try {
+    JSON.parse(data);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+interface FramesProps {
+  frames: Frame[];
+}
+
+export default function Frames({
+  frames,
+}: PropsWithChildren<FramesProps>): JSX.Element {
+  const { darkMode } = useContext(DarkModeContext);
+  return (
+    <ListGroup variant="flush" as="ul" className={"flex-grow-1"}>
+      {frames.length > 0 ? (
+        frames.map((frame) => {
+          // Inbound relative to the client
+          const inbound = frame.type !== "websocket_inbound";
+
+          const body =
+            frame.type !== "websocket_disconnect"
+              ? atob(frame.payload.body)
+              : null;
+
+          return (
+            <ListGroup.Item
+              as="li"
+              key={frame.payload.id}
+              className={classNames({
+                "border-bottom": true,
+              })}
+            >
+              <Row>
+                <Col className="flex-grow-0 d-flex align-items-center text-nowrap text-muted">
+                  {dayjs(frame.payload?.timestamp).format("HH:mm:ss.SSS")}
+                </Col>
+                <Col
+                  className={classNames(
+                    styles.arrow,
+                    "flex-grow-0 d-flex align-items-center flex-nowrap",
+                    {
+                      [styles.inbound]: inbound,
+                      [styles.outbound]: !inbound,
+                    }
+                  )}
+                >
+                  {inbound ? "▼" : "▲"}
+                </Col>
+                <Col className="flex-grow-1">{body}</Col>
+              </Row>
+            </ListGroup.Item>
+          );
+        })
+      ) : (
+        <div className={styles.noRequest}>
+          <p>No messages</p>
+        </div>
+      )}
+    </ListGroup>
+  );
+}
diff --git a/src/components/Icons/Sliders.tsx b/src/components/Icons/Sliders.tsx
index 66d6fac..3c9b38b 100644
--- a/src/components/Icons/Sliders.tsx
+++ b/src/components/Icons/Sliders.tsx
@@ -11,7 +11,7 @@ export default function Sliders() {
       viewBox="0 0 16 16"
     >
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"
       />
     </svg>
diff --git a/src/components/Icons/Trash.tsx b/src/components/Icons/Trash.tsx
index 6c0039b..cf03546 100644
--- a/src/components/Icons/Trash.tsx
+++ b/src/components/Icons/Trash.tsx
@@ -12,7 +12,7 @@ export default function Trash() {
     >
       <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
       />
     </svg>
diff --git a/src/components/RequestDetails/RequestDetails.tsx b/src/components/RequestDetails/RequestDetails.tsx
index f34ef6f..22b3fe2 100644
--- a/src/components/RequestDetails/RequestDetails.tsx
+++ b/src/components/RequestDetails/RequestDetails.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
-import { Headers, RequestResponse } from "~/hooks/useRequests";
+import { useCallback, useContext, useMemo, useState } from "react";
 import styles from "~/components/RequestDetails/RequestDetails.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import Content from "~/components/Content/Content";
 import { getHost } from "~/utils";
 import { Button, Card, Col, Container, Nav, Row, Table } from "react-bootstrap";
+import { Call, Headers, selectedCall } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
+import Frames from "~/components/Frames/Frames";
 
 interface TimingProps {
   timing: number;
@@ -49,37 +51,35 @@ function HeaderTable({ title, headers }: HeaderTableProps) {
   );
 }
 
-interface DetailsProps {
-  requestResponse: RequestResponse | null;
-}
+type Tab = "headers" | "request" | "response" | "messages";
 
-type Tab = "headers" | "request" | "response";
+export default function RequestDetails() {
+  const { selectedCall } = useContext(ConnectionContext);
 
-export default function RequestDetails({ requestResponse }: DetailsProps) {
   const [tab, selectTab] = useState<Tab>("headers");
   const [raw, setRaw] = useState(false);
 
   const resend = useCallback(
     async () =>
-      requestResponse !== null &&
+      selectedCall !== null &&
       fetch(`http://${getHost()}/resend/`, {
         method: "POST",
         body: JSON.stringify({
-          ...requestResponse.request,
+          ...selectedCall.request,
           id: undefined,
         }),
       }),
-    [requestResponse]
+    [selectedCall]
   );
 
-  return requestResponse !== null ? (
+  return selectedCall !== null ? (
     <div className={styles.details}>
       <div className={styles.header}>
         <Row>
           <Col>
             <Container fluid style={{ fontSize: "1.5em" }} className="py-3">
               <RequestSummary
-                requestResponse={requestResponse}
+                requestResponse={selectedCall}
                 className={styles.summary}
               />
             </Container>
@@ -98,18 +98,29 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
               <Nav.Item>
                 <Nav.Link eventKey="request">Request</Nav.Link>
               </Nav.Item>
-              <Nav.Item>
-                <Nav.Link
-                  eventKey="response"
-                  disabled={requestResponse.response === undefined}
-                >
-                  Response
-                </Nav.Link>
-              </Nav.Item>
+              {selectedCall.type === "RequestResponse" && (
+                <>
+                  <Nav.Item>
+                    <Nav.Link
+                      eventKey="response"
+                      disabled={selectedCall.response === undefined}
+                    >
+                      Response
+                    </Nav.Link>
+                  </Nav.Item>
+                </>
+              )}
+              {selectedCall.type === "WebsocketConnection" && (
+                <>
+                  <Nav.Item>
+                    <Nav.Link eventKey="response">Messages</Nav.Link>
+                  </Nav.Item>
+                </>
+              )}
             </Nav>
           </Col>
           <Col className="border-bottom px-3 " xs="auto">
-            <Timing timing={requestResponse.response?.timing ?? NaN} />
+            <Timing timing={selectedCall.response?.timing ?? NaN} />
             <Button
               variant="outline-primary"
               onClick={() => resend()}
@@ -125,21 +136,30 @@ export default function RequestDetails({ requestResponse }: DetailsProps) {
           <>
             <HeaderTable
               title="request headers"
-              headers={requestResponse.request.headers}
+              headers={selectedCall.request.headers}
             />
-            {requestResponse.response && (
-              <HeaderTable
-                title="response headers"
-                headers={requestResponse.response.headers}
-              />
-            )}
+
+            {selectedCall.type === "RequestResponse" &&
+              selectedCall.response !== undefined && (
+                <HeaderTable
+                  title="response headers"
+                  headers={selectedCall.response.headers}
+                />
+              )}
           </>
         )}
         {tab === "request" && (
-          <Content data={requestResponse.request} raw={raw} setRaw={setRaw} />
+          <Content data={selectedCall.request} raw={raw} setRaw={setRaw} />
         )}
-        {tab === "response" && requestResponse.response !== undefined && (
-          <Content data={requestResponse.response} raw={raw} setRaw={setRaw} />
+        {selectedCall.type === "RequestResponse" &&
+          tab === "response" &&
+          selectedCall.response !== undefined && (
+            <Content data={selectedCall.response} raw={raw} setRaw={setRaw} />
+          )}
+        {selectedCall.type === "WebsocketConnection" && tab === "response" && (
+          <Frames frames={selectedCall.frames} />
+          // <Content data={selectedCall.frames} raw={false} setRaw={setRaw} />
+          // <pre>{JSON.stringify(selectedCall.frames, undefined, 2)}</pre>
         )}
       </div>
     </div>
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index acef47a..82a6b21 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -11,27 +11,24 @@ import classNames from "classnames";
 import styles from "~/components/RequestList/RequestList.module.scss";
 import RequestSummary from "~/components/RequestSummary/RequestSummary";
 import * as React from "react";
-import { useCallback, useContext, useMemo, useState } from "react";
-import { Method, RequestResponse } from "~/hooks/useRequests";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { DarkModeContext } from "~/contexts/DarkMode";
 import Filter from "~/components/Icons/Filter";
-
-interface ListProps {
-  requests: RequestResponse[];
-  selectedRequestIndex: number | null;
-  setSelectedRequestIndex: (index: number) => void;
-}
+import { Call, Method } from "~/types";
+import { ConnectionContext } from "~/contexts/Connection";
 
 type EnabledMethods = {
   [method in Method]: boolean;
 };
 
-export default function RequestList({
-  requests,
-  selectedRequestIndex,
-  setSelectedRequestIndex,
-}: ListProps) {
+export default function RequestList() {
   const { darkMode } = useContext(DarkModeContext);
+  const {
+    calls: requests,
+    selectedCall,
+    setSelectedCall,
+  } = useContext(ConnectionContext);
+
   const [showFilterOptions, setShowFilterOptions] = useState(false);
   const [search, setSearch] = useState("");
   const [enableRegex, setEnableRegex] = useState(false);
@@ -73,7 +70,7 @@ export default function RequestList({
     () =>
       Object.entries(methods)
         .filter(([method, enabled]) => enabled)
-        .map(([method]) => method),
+        .map(([method]) => method) as Method[],
     [methods]
   );
 
@@ -97,16 +94,14 @@ export default function RequestList({
     } catch {}
 
     return requests
-      .map<[number, RequestResponse]>((request, index) => [index, request])
       .reverse()
       .filter(
-        ([index, request]) =>
-          enabledMethods.length > 0 === null ||
+        (request) =>
+          enabledMethods.length === 0 ||
           enabledMethods.includes(request.request.method)
       )
       .filter(
-        ([index, request]) =>
-          search === "" || searchRegex.test(request.request.path)
+        (request) => search === "" || searchRegex.test(request.request.path)
       );
   }, [requests, search, enabledMethods, enableRegex]);
 
@@ -124,7 +119,10 @@ export default function RequestList({
               </Dropdown.Item>
               <Dropdown.Divider />
               {Object.entries(methods).map(([method, enabled]) => (
-                <Dropdown.Item onClick={() => toggleMethods(method as Method)}>
+                <Dropdown.Item
+                  onClick={() => toggleMethods(method as Method)}
+                  key={method}
+                >
                   {method}
                 </Dropdown.Item>
               ))}
@@ -151,13 +149,14 @@ export default function RequestList({
         className={classNames(styles.list, "flex-grow-1")}
       >
         {filteredRequests.length > 0 ? (
-          filteredRequests.map(([index, requestResponse]) => {
-            const selected = selectedRequestIndex === index;
+          filteredRequests.map((requestResponse) => {
+            const selected =
+              selectedCall?.request.id === requestResponse.request.id;
             return (
               <ListGroup.Item
                 as="li"
-                onClick={() => setSelectedRequestIndex(index)}
-                key={`request-${index}`}
+                onClick={() => setSelectedCall?.(requestResponse)}
+                key={requestResponse.request.id}
                 className={classNames({
                   "bg-primary": selected,
                   "text-light": selected,
@@ -209,6 +208,7 @@ export default function RequestList({
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
               <Form.Check
+                key={method}
                 type="switch"
                 label={method}
                 checked={enabled}
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
index 49e6086..4e97676 100644
--- a/src/components/RequestSummary/RequestSummary.tsx
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -7,7 +7,7 @@ import dayjs from "dayjs";
 
 interface RequestSummaryProps {
   selected?: boolean;
-  requestResponse: RequestResponse;
+  requestResponse: Calls;
   showTime?: boolean;
 }
 
diff --git a/src/contexts/Connection.tsx b/src/contexts/Connection.tsx
new file mode 100644
index 0000000..42482e1
--- /dev/null
+++ b/src/contexts/Connection.tsx
@@ -0,0 +1,288 @@
+import * as React from "react";
+
+import {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  Call,
+  Frame,
+  Frames,
+  Historic,
+  ReadyState,
+  Request,
+  RequestResponseType,
+  Requests,
+  Response,
+  ResponsePayload,
+  Responses,
+  WebsocketConnect,
+  WebsocketConnected,
+  WebsocketConnectedPayload,
+  WebsocketDisconnectPayload,
+  WebsocketInboundPayload,
+  WebsocketOutboundPayload,
+  WebsocketType,
+} from "~/types";
+import { getHost } from "~/utils";
+
+interface Config {
+  url: string;
+}
+
+interface ConnectionApi {
+  config: Config | null;
+  calls: Call[];
+  selectedCall: Call | null;
+  setSelectedCall: (call: Call | null) => void;
+  readyState: ReadyState;
+  clear: () => void;
+}
+
+export const ConnectionContext = createContext<Partial<ConnectionApi>>(
+  {}
+) as Context<ConnectionApi>;
+
+export default function ConnectionProvider({
+  children,
+}: PropsWithChildren<any>): JSX.Element {
+  const [selectedCall, setSelectedCall] = useState<Call | null>(null);
+  const [config, setConfig] = useState<Config | null>(null);
+
+  const wsHost = useMemo(getHost, []);
+
+  const [initialConnection, setInitialConnection] = useState(true);
+  const [requests, setRequests] = useState<Requests>([]);
+  const [responses, setResponses] = useState<Responses>({});
+  const [websocketFrames, setWebsocketFrames] = useState<Frames>({});
+
+  const connect = useCallback(
+    () => new WebSocket(`ws://${wsHost}/inspect/`),
+    [wsHost]
+  );
+
+  const [ws, setWs] = useState<WebSocket>(() => connect());
+  const [readyState, setReadyState] = useState<ReadyState>(ws.readyState);
+
+  useEffect(() => {
+    setReadyState(ws.readyState);
+
+    const onClose = () => {
+      setReadyState(ws.readyState);
+      setWs(connect());
+    };
+
+    const onOpen = async () => {
+      const response = await fetch(`http://${getHost()}/config/`);
+      const config = await response.json();
+      setConfig(config);
+
+      setInitialConnection(false);
+      setReadyState(ws.readyState);
+    };
+
+    const onMessage = ({ data }: { data: string }) => {
+      const { type, payload } = JSON.parse(data) as
+        | Historic
+        | RequestResponseType
+        | WebsocketType;
+
+      switch (type) {
+        case "historic":
+          if (initialConnection) {
+            const requests = (
+              payload as (RequestResponseType | WebsocketType)[]
+            )
+              .filter(
+                ({ type }) => type === "request" || type == "websocket_connect"
+              )
+              .map((payload) => {
+                if (
+                  (payload as WebsocketConnect).payload.method === undefined
+                ) {
+                  (payload as Request | WebsocketConnect).payload.method =
+                    "GET";
+                }
+
+                return payload;
+              });
+            const responses = (
+              payload as (RequestResponseType | WebsocketType)[]
+            )
+              .filter(
+                ({ type }) =>
+                  type === "response" || type == "websocket_connected"
+              )
+              .map(({ type, ...item }) => {
+                if (type == "websocket_connected") {
+                  (item.payload as WebsocketConnectedPayload).status = 101;
+                }
+
+                return { type, ...item };
+              })
+              .reduce<{ [id: string]: Response | WebsocketConnected }>(
+                (out, item) => ({
+                  ...out,
+                  [item.payload.id]: item as Response | WebsocketConnected,
+                }),
+                {}
+              );
+            const frames = (payload as (RequestResponseType | WebsocketType)[])
+              .filter(
+                ({ type }) =>
+                  type == "websocket_inbound" ||
+                  type == "websocket_outbound" ||
+                  type == "websocket_disconnect"
+              )
+              .reduce<Frames>((out, item) => {
+                if (!out.hasOwnProperty(item.payload.id)) {
+                  out[item.payload.id] = [];
+                }
+
+                out[item.payload.id].push(item as Frame);
+                return out;
+              }, {});
+            setRequests((rqs) => [
+              ...rqs,
+              ...requests.map(
+                (payload) => payload as Request | WebsocketConnect
+              ),
+            ]);
+            setResponses((rps) => ({
+              ...rps,
+              ...responses,
+            }));
+            setWebsocketFrames((frms) => ({
+              ...frms,
+              ...frames,
+            }));
+          }
+          break;
+        case "request":
+        case "websocket_connect":
+          setRequests((rqs) => [
+            ...rqs,
+            {
+              type,
+              payload:
+                type === "request"
+                  ? payload
+                  : {
+                      ...payload,
+                      method: "GET",
+                    },
+            } as Request | WebsocketConnect,
+          ]);
+          break;
+        case "response":
+        case "websocket_connected":
+          if (type == "websocket_connected") {
+            (payload as WebsocketConnectedPayload).status = 101;
+          }
+          setResponses((rps) => ({
+            ...rps,
+            [(payload as ResponsePayload | WebsocketConnectedPayload).id]: {
+              type,
+              payload,
+            } as Response | WebsocketConnected,
+          }));
+          break;
+        case "websocket_inbound":
+        case "websocket_outbound":
+        case "websocket_disconnect":
+          setWebsocketFrames((frms) => {
+            const id = (
+              payload as
+                | WebsocketInboundPayload
+                | WebsocketOutboundPayload
+                | WebsocketDisconnectPayload
+            ).id;
+
+            const newFrms = { ...frms };
+
+            if (!newFrms.hasOwnProperty(id)) {
+              newFrms[id] = [];
+            }
+
+            // @ts-ignore
+            newFrms[id].push({
+              type,
+              payload: payload as
+                | WebsocketInboundPayload
+                | WebsocketOutboundPayload
+                | WebsocketDisconnectPayload,
+            });
+
+            return newFrms;
+          });
+          break;
+      }
+    };
+
+    ws.addEventListener("message", onMessage);
+    ws.addEventListener("close", onClose);
+    ws.addEventListener("open", onOpen);
+
+    return () => {
+      ws.removeEventListener("message", onMessage);
+      ws.removeEventListener("close", onClose);
+      ws.removeEventListener("open", onOpen);
+    };
+  }, [ws]);
+
+  const calls = useMemo<Call[]>(
+    () =>
+      requests.map((request) => {
+        let call: Call;
+        if (request.type === "request") {
+          call = {
+            type: "RequestResponse",
+            request: request.payload,
+            response: responses[request.payload.id]?.payload as ResponsePayload,
+          };
+        } else {
+          call = {
+            type: "WebsocketConnection",
+            request: request.payload,
+            response: responses[request.payload.id]
+              ?.payload as WebsocketConnectedPayload,
+            frames: websocketFrames[request.payload.id] ?? [],
+          };
+        }
+
+        if (
+          selectedCall !== null &&
+          selectedCall.request.id === call.request.id
+        ) {
+          setSelectedCall(call);
+        }
+
+        return call;
+      }),
+    [requests, responses, websocketFrames]
+  );
+
+  return (
+    <ConnectionContext.Provider
+      value={{
+        config,
+        calls,
+        selectedCall,
+        setSelectedCall,
+        readyState,
+        clear: () => {
+          setRequests([]);
+          setResponses({});
+          setWebsocketFrames({});
+        },
+      }}
+    >
+      {children}
+    </ConnectionContext.Provider>
+  );
+}
diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
index 4326fe9..fd536b2 100644
--- a/src/contexts/DarkMode.tsx
+++ b/src/contexts/DarkMode.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import {
   Context,
   createContext,
-  ReactNode,
+  PropsWithChildren,
   useEffect,
   useMemo,
   useState,
@@ -17,11 +17,8 @@ interface DarkModeApi {
 export const DarkModeContext = createContext<Partial<DarkModeApi>>(
   {}
 ) as Context<DarkModeApi>;
-interface DarkModeProviderProps {
-  children: ReactNode;
-}
 
-export default function DarkModeProvider({ children }: DarkModeProviderProps) {
+export default function DarkModeProvider({ children }: PropsWithChildren<any>) {
   const themeConfig = useMemo(() => new ThemeConfig(), []);
   const [darkMode, setDarkMode] = useState(
     () => themeConfig.getTheme() === "dark"
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index 1361949..3135aa2 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -1,68 +1,32 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getHost } from "~/utils";
-
-export type Headers = [string, string][];
-export type Method =
-  | "GET"
-  | "HEAD"
-  | "POST"
-  | "PUT"
-  | "DELETE"
-  | "CONNECT"
-  | "OPTIONS"
-  | "TRACE"
-  | "PATCH";
-
-export interface RequestPayload {
-  id: string;
-  timestamp: string;
-  body: string;
-  headers: Headers;
-  method: Method;
-  path: string;
-}
-
-interface Request {
-  type: "request";
-  payload: RequestPayload;
-}
-
-export interface ResponsePayload {
-  id: string;
-  timing: number;
-  body: string;
-  headers: Headers;
-  status: number;
-}
-
-interface Response {
-  type: "response";
-  payload: ResponsePayload;
-}
-
-interface Historic {
-  type: "historic";
-  payload: (Request | Response)[];
-}
-
-export interface RequestResponse {
-  request: RequestPayload;
-  response?: ResponsePayload;
-}
-
-export enum ReadyState {
-  CONNECTING = 0,
-  OPEN = 1,
-  CLOSING = 2,
-  CLOSED = 3,
-}
+import {
+  Call,
+  Frame,
+  Frames,
+  Historic,
+  ReadyState,
+  Request,
+  RequestResponseType,
+  Requests,
+  Response,
+  ResponsePayload,
+  Responses,
+  WebsocketConnect,
+  WebsocketConnected,
+  WebsocketConnectedPayload,
+  WebsocketDisconnectPayload,
+  WebsocketInboundPayload,
+  WebsocketOutboundPayload,
+  WebsocketType,
+} from "~/types";
 
 export interface useRequestsProps {
   onConnect: () => Promise<void>;
 }
 
 export interface UseRequests {
-  calls: RequestResponse[];
+  calls: Call[];
   readyState: ReadyState;
   clear: () => void;
 }
@@ -73,8 +37,9 @@ export default function useRequests({
   const wsHost = useMemo(getHost, []);
 
   const [initialConnection, setInitialConnection] = useState(true);
-  const [requests, setRequests] = useState<RequestPayload[]>([]);
-  const [responses, setResponses] = useState<ResponsePayload[]>([]);
+  const [requests, setRequests] = useState<Requests>([]);
+  const [responses, setResponses] = useState<Responses>({});
+  const [websocketFrames, setWebsocketFrames] = useState<Frames>({});
 
   const connect = useCallback(
     () => new WebSocket(`ws://${wsHost}/inspect/`),
@@ -96,36 +61,140 @@ export default function useRequests({
       setInitialConnection(false);
       setReadyState(ws.readyState);
     };
-    const onMessage = ({ data }) => {
+    const onMessage = ({ data }: { data: string }) => {
       const { type, payload } = JSON.parse(data) as
         | Historic
-        | Request
-        | Response;
+        | RequestResponseType
+        | WebsocketType;
 
       switch (type) {
         case "historic":
           if (initialConnection) {
-            const requests = (payload as (Request | Response)[]).filter(
-              ({ type }) => type === "request"
-            );
-            const responses = (payload as (Request | Response)[]).filter(
-              ({ type }) => type === "response"
-            );
+            const requests = (
+              payload as (RequestResponseType | WebsocketType)[]
+            )
+              .filter(
+                ({ type }) => type === "request" || type == "websocket_connect"
+              )
+              .map((payload) => {
+                if (
+                  (payload as WebsocketConnect).payload.method === undefined
+                ) {
+                  (payload as Request | WebsocketConnect).payload.method =
+                    "GET";
+                }
+
+                return payload;
+              });
+            const responses = (
+              payload as (RequestResponseType | WebsocketType)[]
+            )
+              .filter(
+                ({ type }) =>
+                  type === "response" || type == "websocket_connected"
+              )
+              .map(({ type, ...item }) => {
+                if (type == "websocket_connected") {
+                  (item.payload as WebsocketConnectedPayload).status = 101;
+                }
+
+                return { type, ...item };
+              })
+              .reduce<{ [id: string]: Response | WebsocketConnected }>(
+                (out, item) => ({
+                  ...out,
+                  [item.payload.id]: item as Response | WebsocketConnected,
+                }),
+                {}
+              );
+            const frames = (payload as (RequestResponseType | WebsocketType)[])
+              .filter(
+                ({ type }) =>
+                  type == "websocket_inbound" ||
+                  type == "websocket_outbound" ||
+                  type == "websocket_disconnect"
+              )
+              .reduce<Frames>((out, item) => {
+                if (!out.hasOwnProperty(item.payload.id)) {
+                  out[item.payload.id] = [];
+                }
+
+                out[item.payload.id].push(item as Frame);
+                return out;
+              }, {});
             setRequests((rqs) => [
               ...rqs,
-              ...requests.map(({ payload }) => payload as RequestPayload),
+              ...requests.map(
+                (payload) => payload as Request | WebsocketConnect
+              ),
             ]);
-            setResponses((rps) => [
+            setResponses((rps) => ({
               ...rps,
-              ...responses.map(({ payload }) => payload as ResponsePayload),
-            ]);
+              ...responses,
+            }));
+            setWebsocketFrames((frms) => ({
+              ...frms,
+              ...frames,
+            }));
           }
           break;
         case "request":
-          setRequests((rqs) => [...rqs, payload as RequestPayload]);
+        case "websocket_connect":
+          setRequests((rqs) => [
+            ...rqs,
+            {
+              type,
+              payload:
+                type === "request"
+                  ? payload
+                  : {
+                      ...payload,
+                      method: "GET",
+                    },
+            } as Request | WebsocketConnect,
+          ]);
           break;
         case "response":
-          setResponses((rps) => [...rps, payload as ResponsePayload]);
+        case "websocket_connected":
+          if (type == "websocket_connected") {
+            (payload as WebsocketConnectedPayload).status = 101;
+          }
+          setResponses((rps) => ({
+            ...rps,
+            [(payload as ResponsePayload | WebsocketConnectedPayload).id]: {
+              type,
+              payload,
+            } as Response | WebsocketConnected,
+          }));
+          break;
+        case "websocket_inbound":
+        case "websocket_outbound":
+        case "websocket_disconnect":
+          setWebsocketFrames((frms) => {
+            const id = (
+              payload as
+                | WebsocketInboundPayload
+                | WebsocketOutboundPayload
+                | WebsocketDisconnectPayload
+            ).id;
+
+            const newFrms = { ...frms };
+
+            if (!newFrms.hasOwnProperty(id)) {
+              newFrms[id] = [];
+            }
+
+            // @ts-ignore
+            newFrms[id].push({
+              type,
+              payload: payload as
+                | WebsocketInboundPayload
+                | WebsocketOutboundPayload
+                | WebsocketDisconnectPayload,
+            });
+
+            return newFrms;
+          });
           break;
       }
     };
@@ -141,19 +210,37 @@ export default function useRequests({
     };
   }, [ws]);
 
+  const calls = useMemo<Call[]>(
+    () =>
+      requests.map((request) => {
+        switch (request.type) {
+          case "request":
+            return {
+              type: "RequestResponse",
+              request: request.payload,
+              response: responses[request.payload.id]
+                ?.payload as ResponsePayload,
+            };
+          case "websocket_connect":
+            return {
+              type: "WebsocketConnection",
+              request: request.payload,
+              response: responses[request.payload.id]
+                ?.payload as WebsocketConnectedPayload,
+              frames: websocketFrames[request.payload.id] ?? [],
+            };
+        }
+      }),
+    [requests, responses, websocketFrames]
+  );
+
   return {
-    calls: useMemo<RequestResponse[]>(
-      () =>
-        requests.map((request) => ({
-          request: request,
-          response: responses.find(({ id }) => id === request.id),
-        })),
-      [requests, responses]
-    ),
+    calls,
     readyState,
     clear: () => {
       setRequests([]);
-      setResponses([]);
+      setResponses({});
+      setWebsocketFrames({});
     },
   };
 }
diff --git a/src/index.tsx b/src/index.tsx
index d83fd38..a2c18e3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,11 +7,14 @@ import DarkModeProvider from "./contexts/DarkMode";
 
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
+import ConnectionProvider from "~/contexts/Connection";
 dayjs.extend(localizedFormat);
 
 ReactDOM.render(
   <DarkModeProvider>
-    <App />
+    <ConnectionProvider>
+      <App />
+    </ConnectionProvider>
   </DarkModeProvider>,
   document.getElementById("root")
 );
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..0e11bee
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,136 @@
+export type Headers = [string, string][];
+export type Method =
+  | "GET"
+  | "HEAD"
+  | "POST"
+  | "PUT"
+  | "DELETE"
+  | "CONNECT"
+  | "OPTIONS"
+  | "TRACE"
+  | "PATCH";
+
+export interface RequestPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+  headers: Headers;
+  method: Method;
+  path: string;
+}
+
+export interface Request {
+  type: "request";
+  payload: RequestPayload;
+}
+
+export interface ResponsePayload {
+  id: string;
+  timing: number;
+  body: string;
+  headers: Headers;
+  status: number;
+}
+
+export interface Response {
+  type: "response";
+  payload: ResponsePayload;
+}
+
+export type RequestResponseType = Request | Response;
+
+export interface WebsocketConnectPayload {
+  method: "GET";
+  id: string;
+  headers: Headers;
+  path: string;
+  timestamp: string;
+}
+
+export interface WebsocketConnect {
+  type: "websocket_connect";
+  payload: WebsocketConnectPayload;
+}
+
+export interface WebsocketConnectedPayload {
+  id: string;
+  timing: number;
+  status: 101;
+}
+
+export interface WebsocketConnected {
+  type: "websocket_connected";
+  payload: WebsocketConnectedPayload;
+}
+
+export interface WebsocketInboundPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+}
+
+interface WebsocketInbound {
+  type: "websocket_inbound";
+  payload: WebsocketInboundPayload;
+}
+
+export interface WebsocketOutboundPayload {
+  id: string;
+  timestamp: string;
+  body: string;
+}
+
+interface WebsocketOutbound {
+  type: "websocket_outbound";
+  payload: WebsocketOutboundPayload;
+}
+
+export interface WebsocketDisconnectPayload {
+  id: string;
+  timestamp: string;
+  close_code: number;
+}
+
+interface WebsocketDisconnect {
+  type: "websocket_disconnect";
+  payload: WebsocketDisconnectPayload;
+}
+
+export type WebsocketType =
+  | WebsocketConnect
+  | WebsocketConnected
+  | WebsocketInbound
+  | WebsocketOutbound
+  | WebsocketDisconnect;
+
+export interface Historic {
+  type: "historic";
+  payload: (RequestResponseType | WebsocketType)[];
+}
+
+export interface RequestResponse {
+  type: "RequestResponse";
+  request: RequestPayload;
+  response?: ResponsePayload;
+}
+
+export type Frame = WebsocketDisconnect | WebsocketInbound | WebsocketOutbound;
+export interface WebsocketConnection {
+  type: "WebsocketConnection";
+  request: WebsocketConnectPayload;
+  response?: WebsocketConnectedPayload;
+  frames?: Frame[];
+}
+
+export type Call = RequestResponse | WebsocketConnection;
+
+export type Requests = Array<Request | WebsocketConnect>;
+export type Responses = { [id: string]: Response | WebsocketConnected };
+export type Frames = { [id: string]: Frame[] };
+
+export enum ReadyState {
+  CONNECTING = 0,
+  OPEN = 1,
+  CLOSING = 2,
+  CLOSED = 3,
+}