Commit everything

src/App.js

@@ -8,6 +8,7 @@ export const BaseURL = 'http://localhost:8000';
 function App() {
   return (
     <div className="app">
+      <h1>Backend listeners</h1>
       <ServerSentEvents />
       <FetchWithPolling />
     </div>

src/components/Polling.js

@@ -4,6 +4,7 @@ import { Table } from './Table';
 
 export const FetchWithPolling = () => {
   const [stockPrices, setStockPrices] = useState([]);
+  const [numOfConnections, setNumOfConnections] = useState(0);
 
   const fetchStockPrice = () => {
     fetch(`${BaseURL}/realtime-price-polling`).then((res) => res.json().then((result) => setStockPrices(result.data)));
@@ -13,16 +14,18 @@ export const FetchWithPolling = () => {
     fetchStockPrice();
     const pollingInterval = setInterval(() => {
       fetchStockPrice();
+      setNumOfConnections(numOfConnections + 1)
     }, 5000); // poll every 5 seconds
 
     return () => {
       clearInterval(pollingInterval);
     };
-  }, []);
+  }, [numOfConnections]);
 
   return (
     <div>
-      <h1>Polling</h1>
+      <h2>Polling</h2>
+      <p>Connections: {numOfConnections}</p>
       <Table stockPrices={stockPrices} />
     </div>
   );

src/components/ServerSentEvents.js

@@ -38,7 +38,7 @@ export const ServerSentEvents = () => {
 
   return (
     <div>
-      <h1>Server Sent Events</h1>
+      <h2>Server Sent Events</h2>
       <Table stockPrices={stockPrices} />
     </div>
   );

src/components/WebSocket.js

@@ -0,0 +1,5 @@
+
+
+export const WebSocket = () => {
+
+}