diff --git a/content/800-guides/1200-prisma-postgres-realtime-on-cloudflare.mdx b/content/800-guides/1200-prisma-postgres-realtime-on-cloudflare.mdx index 184033dcfc..0e09802d7d 100644 --- a/content/800-guides/1200-prisma-postgres-realtime-on-cloudflare.mdx +++ b/content/800-guides/1200-prisma-postgres-realtime-on-cloudflare.mdx @@ -193,6 +193,7 @@ import { withAccelerate } from "@prisma/extension-accelerate"; import { withPulse } from "@prisma/extension-pulse/workerd"; import { Hono } from "hono"; import { upgradeWebSocket } from "hono/cloudflare-workers"; +import { requestId } from 'hono/request-id' // Define environment bindings type Bindings = { @@ -201,6 +202,8 @@ type Bindings = { }; const app = new Hono<{ Bindings: Bindings }>(); + +app.use('*', requestId()) ``` ### 3. Create a helper method to use `PrismaClient` in the application @@ -241,7 +244,7 @@ app.get( listeningToPulseStream = true; const pointStream = await prisma.points.stream({ - name: "points-stream", + name: `points-stream-${c.get('requestId')}`, create: {}, }); @@ -353,7 +356,9 @@ Run the development server: npm run dev ``` -Visit `https://localhost:8787` to see your app in action. You should see a form and scatter plot updating in real time. +Visit `https://localhost:8787` to see your app in action. You should see a form where, if you input data, the scatter plot updates in real time: + +![An demo of the app we built where a scatter plot updates in real-time](/img/guides/realtime-app-demo-ppg-cf-workers.gif) ## 5. Deploy the application to Cloudflare diff --git a/static/img/guides/realtime-app-demo-ppg-cf-workers.gif b/static/img/guides/realtime-app-demo-ppg-cf-workers.gif new file mode 100644 index 0000000000..70910e2faa Binary files /dev/null and b/static/img/guides/realtime-app-demo-ppg-cf-workers.gif differ