From 63c053b38ce3ab3c3a94cda620da930f4e8615bd Mon Sep 17 00:00:00 2001 From: Blake Matthes Date: Fri, 25 Jul 2025 12:13:47 -0500 Subject: [PATCH] docs(wss): more ws stuff --- frontend/src/App.tsx | 66 ++++++++++++++++++---------------- frontend/src/WebSocketTest.tsx | 41 +++++++++++++++++++++ 2 files changed, 77 insertions(+), 30 deletions(-) create mode 100644 frontend/src/WebSocketTest.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3d7ded3..f84b58f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,35 +1,41 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import { useState } from "react"; +import reactLogo from "./assets/react.svg"; +import viteLogo from "/vite.svg"; +import "./App.css"; +import WebSocketViewer from "./WebSocketTest"; function App() { - const [count, setCount] = useState(0) + const [count, setCount] = useState(0); - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) + return ( + <> +
+ + Vite logo + + + React logo + +
+

Vite + React

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the Vite and React logos to learn more +

+ + + ); } -export default App +export default App; diff --git a/frontend/src/WebSocketTest.tsx b/frontend/src/WebSocketTest.tsx new file mode 100644 index 0000000..f617a7d --- /dev/null +++ b/frontend/src/WebSocketTest.tsx @@ -0,0 +1,41 @@ +import { useEffect, useRef } from "react"; + +const WebSocketViewer = () => { + const ws = useRef(null); + + useEffect(() => { + // Connect to your Go backend WebSocket endpoint + ws.current = new WebSocket( + (window.location.protocol === "https:" ? "wss://" : "ws://") + + window.location.host + + "/lst/api/logger/logs" + ); + + ws.current.onopen = () => { + console.log("[WebSocket] Connected"); + }; + + ws.current.onmessage = (event: any) => { + console.log("[WebSocket] Message received:", event.data); + }; + + ws.current.onerror = (error: any) => { + console.error("[WebSocket] Error:", error); + }; + + ws.current.onclose = () => { + console.log("[WebSocket] Disconnected"); + }; + + // Cleanup on unmount + return () => { + if (ws.current) { + ws.current.close(); + } + }; + }, []); + + return
Check the console for WebSocket messages
; +}; + +export default WebSocketViewer;