diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..e9ce59b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,55 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' +import { useState, useEffect } from 'react' import './App.css' function App() { - const [count, setCount] = useState(0) + const [message, setMessage] = useState(''); + const [sseMessage, setSseMessage] = useState(''); + + const sendMessage = async () => { + try { + const response = await fetch("http://localhost:8000/message", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ message }), + }); + const data = await response.json(); + console.log(data); + } catch (error) { + console.error("Error sending message: ", error); + } + }; + + useEffect(() => { + const eventSource = new EventSource("http://localhost:8000/sse"); + + eventSource.onmessage = (event) => { + setSseMessage(event.data); + }; + + return () => { + eventSource.close(); + }; + }); return ( - <> +
- - Vite logo - - - React logo - + setMessage(e.target.value)} + placeholder="Enter a message" + /> +
-

Vite + React

-
- -

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

+
+

Message from Server (SSE):

+

{sseMessage}

-

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

- - ) +
+ ); } export default App