使用 Next.js、Socket.io 和 Prisma Postgres 建構即時應用程式

如果您在應用程式中使用 Prisma 進行資料存取，並且需要一些即時功能，那麼 Prisma Postgres 可能正是您所需要的。在本教學中，我們將探索 Prisma Postgres，以及如何使用它將資料庫中的事件串流到我們的應用程式，以便在資料變更時收到通知。在我們的逐步教學中，我們將使用一個名為 PrismaHut 的示範應用程式。

查看本教學所依據的範例應用程式，以便跟著程式碼一起學習！

我們要建構什麼？

將 PrismaHut 想像成廚師的數位看板，用於追蹤他們需要準備的訂單。當有人透過行動應用程式下訂單，或當資料從其他來源進入資料庫訂單表時，我們希望該訂單立即顯示給廚師。我們的旅程從這裡開始 – 沒有設定資料庫，看板上也沒有任何訂單。讓我們深入研究並改變現狀。

在 Prisma Data Platform 上建立新專案

取得新 Postgres 資料庫最簡單的方式是使用 Prisma Data Platform，特別是 Prisma Postgres。

設定 Prisma Postgres 專案

1. 前往 Prisma Data Platform

首先導航到 console.prisma.io。在這裡，我們將設定新的專案。

2. 建立新專案

讓我們將專案命名為「PrismaHut」。我們在這裡想要的起點是 Prisma Postgres。作為一個無伺服器資料庫，Prisma Postgres 具有零冷啟動，並避免了其他與無伺服器相關的問題。對於我們的區域，我們將堅持使用美國東部。點擊「建立專案」以啟動新的執行個體。

設定應用程式

擷取設定金鑰

專案建立完成後，它將開始佈建，我們將收到一組金鑰以供使用。將資料庫 URL 和 Pulse API 金鑰複製到您的剪貼簿。我們將把這些貼到應用程式的環境檔案中。

資料庫建模、遷移和植入

在我們的設定連線後（請確保檢查狀態以確認連線），讓我們執行遷移以填充我們的資料庫。

將模型新增至 Prisma Schema

我們將針對此應用程式使用四個表，其中最重要的是 Order 表。其他表將使用有關要訂購的項目、其規格等的資料來支援我們的訂單。

讓我們將這些模型新增至 schema

執行遷移

我們現在可以執行遷移，將這些模型放入資料庫中的表中。在終端機中執行以下命令

植入資料庫

讓我們植入資料庫以取得一些初始資料。在 prisma 目錄中建立一個 seed.ts 檔案，並新增資料以植入資料庫

在放置植入檔案後，讓我們執行 db seed 命令以植入資料庫

執行植入命令將使用 seed.ts 中描述的範例資料填充資料庫。

使用 Prisma Studio 可視化和操作資料

若要可視化我們的資料，請返回 Prisma Data Platform 並從左側選單中選取 Studio。我們可以直接在瀏覽器中看到 Prisma Studio，它提供我們表格的視圖，例如訂單和產品。

• 訂單表：顯示您植入的訂單。
• 產品表：查看披薩和雞翅資料。

在應用程式中提取訂單

當應用程式載入時，我們需要一個端點來擷取訂單。這應該在 /orders 端點中發生，我們從資料庫擷取訂單，依建立日期排序它們，並準備顯示規格、產品詳細資訊等。

設定 Prisma Pulse

Prisma Pulse 允許我們對資料庫中發生的變更做出反應。在我們的資料庫中發生的每個單一操作都可以作為一個事件浮出表面，我們可以在任何使用 Prisma Client 對該資料庫執行的位置監聽該事件。

使用 Pulse 對變更做出反應提供了幾個優勢，包括

1. 可擴展性：水平擴展我們的應用程式更容易，因為我們不必擔心某些執行個體接收資料變更而其他執行個體沒有接收資料變更
2. 來自任何地方的資料庫變更：來自主要應用程式以外位置的資料庫變更仍然可以在我們的應用程式中浮出表面。例如，如果我們直接修改資料庫，事件仍會浮出表面。

安裝擴充功能

讓我們為 Prisma Pulse 新增必要的擴充功能。我們可以透過 npm 安裝它

整合 withPulse 到 Prisma Client 中

在我們的 index.ts 檔案中，我們需要匯入 withPulse 並擴充我們的 PrismaClient 執行個體以使用它。這是我們傳遞 Pulse apiKey 的位置

監聽資料庫事件

讓我們建立一個名為 streamOrders 的 async 函數，以使用 stream 方法。我們需要定義我們想要捕獲的事件。例如，如果我們對新訂單感興趣，我們可以僅監聽建立事件。

接下來，讓我們在伺服器啟動區塊中啟動 streamOrders。

將事件橋接到瀏覽器

使用 Socket.IO

使用 Socket.IO 新增自訂事件處理程序以進行即時訂單更新。

1. 定義事件監聽器

   在我們的伺服器中

2. 在資料庫變更時發射事件

   當 Pulse 捕獲新事件時，使用 Socket.IO 發射它

驗證即時更新

我們可以透過重新整理植入的資料或使用 Prisma Studio 之類的介面來測試與新訂單條目的連線。例如，在 Prisma Studio 中，我們可以插入一個新條目，這將立即將資料庫建立事件推送到我們的應用程式，而無需輪詢更新。

結論

在建構即時應用程式時，有很多注意事項。確保應用程式擴展時一致性的最佳方法之一是讓資料庫將事件報告給我們的應用程式，因為資料會發生變更。

Prisma Postgres 讓我們可以輕鬆設定一個資料庫，該資料庫還可以將資料變更直接串流到我們的應用程式。設定新的 Prisma Postgres 專案只需點擊幾下即可完成，資料庫會在幾秒鐘內啟動。

立即查看 Prisma Postgres，看看您如何快速輕鬆地開始在您的應用程式中使用即時功能！