fixup! Add pub-sub history rewind example

Author: GregHolmes

examples/pub-sub-rewind/javascript/src/script.ts

@@ -168,10 +168,21 @@ async function updateRandomOdds() {
     return;
   }
 
+  let running = true;
+  window.addEventListener('beforeunload', () => {
+    running = false;
+  });
+
   for (let i = 0; i < 20; i++) {
+    if (!running) break;
     const delayTime = 5000;
     await new Promise((resolve) => {
-      setTimeout(resolve, delayTime);
+      const timeoutId = setTimeout(resolve, delayTime);
+      // Allow for cleanup
+      return () => {
+        clearTimeout(timeoutId);
+        running = false;
+      };
     });
 
     const markets = ['homeWin', 'draw', 'awayWin', 'nextGoal'];
@@ -190,6 +201,8 @@ async function updateRandomOdds() {
     });
 
     newOdds.match.timestamp = new Date().toISOString();
-    await channel.publish('odds', newOdds);
+    if (running) {
+      await channel.publish('odds', newOdds);
+    }
   }
 }

examples/pub-sub-rewind/javascript/tailwind.config.js

@@ -1,12 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};

examples/pub-sub-rewind/react/src/app/odds/page.tsx

@@ -53,12 +53,18 @@ function LiveMatch({ channelName }: { channelName: string }) {
   });
 
   useEffect(() => {
-    const updateRandomOdds = async () => {
-      if (!matchData) return;
+    if (!matchData) return;
+    let isMounted = true;
 
+    const updateRandomOdds = async () => {
       for (let i = 0; i < 20; i++) {
+        if (!isMounted) break;
+
         const delay = Math.floor(Math.random() * 3000) + 2000;
-        await new Promise(resolve => setTimeout(resolve, delay));
+        await new Promise(resolve => {
+          const timeoutId = setTimeout(resolve, delay);
+          return () => clearTimeout(timeoutId);
+        });
 
         const markets = ['homeWin', 'draw', 'awayWin', 'nextGoal'];
         const numMarketsToUpdate = Math.floor(Math.random() * 3) + 1;
@@ -76,12 +82,18 @@ function LiveMatch({ channelName }: { channelName: string }) {
         });
 
         newOdds.match.timestamp = new Date().toISOString();
-        await channel.publish('odds', newOdds);
+        if (isMounted) {
+          await channel.publish('odds', newOdds);
+        }
       }
     };
 
     updateRandomOdds();
-  }, [matchData?.match.homeTeam]);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [matchData, channel]);
 
   return (
     <div className="min-h-screen bg-gray-100 p-8">

examples/pub-sub-rewind/react/src/app/page.tsx

@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 export default function Home() {
+  const [alerts, setAlerts] = useState<Array<{id: number, message: string}>>([]);
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const searchParams = useSearchParams();
@@ -59,16 +60,13 @@ export default function Home() {
       currentOdds.match.timestamp = new Date().toISOString();
       await channel.publish('odds', currentOdds);
 
-      // Show alert for each publish
-      const alert = document.createElement('div');
-      alert.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg transition-opacity duration-500';
-      alert.textContent = `Update ${i + 1}/10: New odds published`;
-      document.body.appendChild(alert);
+      // Use React state for alerts
+      const alertMessage = `Update ${i + 1}/10: New odds published`;
+      setAlerts(prev => [...prev, { id: Date.now(), message: alertMessage }]);
 
       // Remove alert after 2 seconds
       setTimeout(() => {
-        alert.style.opacity = '0';
-        setTimeout(() => alert.remove(), 500);
+        setAlerts(prev => prev.filter(alert => alert.id !== Date.now()));
       }, 2000);
 
       await new Promise(resolve => setTimeout(resolve, 1000));
@@ -97,6 +95,14 @@ export default function Home() {
           </button>
         </div>
       </div>
+      {alerts.map(alert => (
+        <div
+          key={alert.id}
+          className="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg transition-opacity duration-500"
+        >
+          {alert.message}
+        </div>
+      ))}
     </div>
   );
 }