2025年1月6日

使用 Next.js、Socket.io 和 Prisma Postgres 构建实时应用程序

在本教程中,我们将探索 Prisma Postgres,以及如何在数据发生更改时使用它将事件从数据库流式传输到我们的应用程序。

如果你在应用程序中使用 Prisma 进行数据访问,并且需要一些实时功能,那么 Prisma Postgres 可能正是你所需要的。在本教程中,我们将探索 Prisma Postgres,以及如何在数据发生更改时使用它将事件从数据库流式传输到我们的应用程序。在我们的演练中,我们将使用一个名为PrismaHut的演示应用程序。

查看本教程所基于的示例应用程序,以便跟进代码!

我们正在构建什么?

PrismaHut想象成厨师的数字看板,跟踪他们需要准备的订单。当有人通过移动应用程序下订单,或者当数据从其他来源进入数据库订单表时,我们希望该订单立即显示给厨师。我们的旅程从这里开始 - 没有设置数据库,也没有订单在看板上。让我们深入研究并改变这种情况。

在 Prisma 数据平台上创建一个新项目

获取新 Postgres 数据库的最简单方法是使用 Prisma 数据平台,特别是 Prisma Postgres。

设置 Prisma Postgres 项目

  1. 前往 Prisma 数据平台

首先导航到console.prisma.io。在这里,我们将设置我们的新项目。

  1. 创建一个新项目

让我们将项目命名为“PrismaHut”。我们这里想要的起点是Prisma Postgres。作为无服务器数据库,Prisma Postgres 没有冷启动,并避免了其他与无服务器相关的问题。对于我们的区域,我们将坚持使用美国东部。点击“创建项目”以启动新实例。

配置应用程序

获取配置密钥

创建项目后,它将开始配置,我们将收到一组用于工作的密钥。将数据库 URL 和 Pulse API 密钥复制到剪贴板。我们会将它们粘贴到应用程序的环境文件中。

数据库建模、迁移和种子数据

连接设置后(请确保检查状态以确认连接),让我们运行迁移以填充我们的数据库。

将模型添加到 Prisma 模式

我们将为这个应用程序使用四个表,其中最重要的是Order表。其他表将通过有关要订购的商品、它们的规格等数据来支持我们的订单。

让我们将这些模型添加到模式中

运行迁移

我们现在可以运行迁移,将这些模型放入数据库中的表中。在终端中运行以下命令

种子数据库

让我们种子数据库以获取一些初始数据。在prisma目录中创建一个seed.ts文件,并添加数据以种子数据库

在种子文件到位后,让我们运行db seed命令来种子数据库

运行种子命令将使用seed.ts中描述的示例数据填充数据库。

使用 Prisma Studio 可视化和操作数据

要可视化我们的数据,请返回到 Prisma 数据平台,并从左侧菜单中选择Studio。我们可以直接在浏览器中看到 Prisma Studio,其中提供了我们的表(例如订单和产品)的视图。

  • 订单表:显示你的种子订单。
  • 产品表:查看披萨和鸡翅数据。

在应用程序中获取订单

当应用程序加载时,我们需要一个端点来检索订单。这应该发生在/orders端点中,我们从数据库中获取订单,按创建日期对它们进行排序,并准备显示规格、产品详细信息等。

设置 Prisma Pulse

Prisma Pulse 允许我们对数据库中发生的更改做出反应。我们在数据库中进行的每一次操作都可以作为事件呈现,我们可以在任何使用 Prisma Client 对该数据库的地方监听该事件。

使用 Pulse 对更改做出反应有几个优点,包括

  1. 可扩展性:更容易水平扩展我们的应用程序,因为我们无需担心某些实例接收数据更改,而另一些实例则没有
  2. 来自任何地方的数据库更改:来自我们主应用程序以外的地方的数据库更改仍然可以在我们的应用程序中显示。例如,如果我们直接修改数据库,该事件仍然会显示出来。

安装扩展

让我们为 Prisma Pulse 添加必要的扩展。我们可以使用 npm 安装它

在 Prisma Client 中集成withPulse

在我们的index.ts文件中,我们需要导入withPulse并扩展我们的PrismaClient实例以使用它。这是我们传递 Pulse apiKey的地方

监听数据库事件

让我们创建一个名为streamOrdersasync函数,以利用流方法。我们需要定义要捕获的事件。例如,如果我们对新订单感兴趣,则可以仅监听创建事件。

接下来,让我们在服务器启动块中启动streamOrders

将事件桥接到浏览器

使用Socket.IO

使用Socket.IO为实时订单更新添加自定义事件处理程序。

  1. 定义事件侦听器

    在我们的服务器中

  2. 在数据库更改时发出事件

    当 Pulse 捕获到新事件时,使用 Socket.IO 发射它

验证实时更新

我们可以通过刷新种子数据或使用像 Prisma Studio 这样的界面来测试与新订单条目的连接。例如,在 Prisma Studio 中,我们可以插入一个新条目,它会立即将数据库创建事件推送到我们的应用程序,而无需轮询更新。

结论

在构建实时应用程序时,有很多需要注意的地方。确保应用程序在扩展时保持一致性的最佳方法之一,是让数据库在数据发生更改时将事件报告给我们的应用程序。

Prisma Postgres 使我们能够轻松设置一个数据库,该数据库还可以将数据更改直接流式传输到我们的应用程序。只需点击几下即可设置一个新的 Prisma Postgres 项目,数据库会在几秒钟内启动。

立即查看 Prisma Postgres,了解如何快速轻松地在您的应用程序中开始使用实时功能!

不要错过下一篇文章!

注册 Prisma 新闻通讯