Build a Real-Time App with Next.js, Socket.io & Prisma Postgres

If you're using Prisma for data access in your application and you've got a need for some real-time features, then Prisma Postgres could be just what you need. In this tutorial, we'll explore Prisma Postgres and how to use it to stream events from our database to our applications whenever data changes occur. For our walkthrough, we'll work on a demo application called PrismaHut.

Check out the sample application that this tutorial is based on to follow along with the code!

What are we building?

Imagine PrismaHut as a digital board for cooks, keeping track of what orders they need to prepare. When someone places an order via a mobile app or when data enters the database orders table from another source, we want that order to show up immediately for the cooks. Our journey starts here – with no database set up and no orders on the board. Let's dive in and change that.

Create a new project on the Prisma Data Platform

The easiest way to get a new Postgres database is to use the Prisma Data Platform, specifically Prisma Postgres.

Set up a Prisma Postgres project

1. Head to Prisma Data Platform

Start by navigating to console.prisma.io. Here, we'll set up our new project.

2. Create a New Project

Let's name the project "PrismaHut". The starting point we want here is Prisma Postgres. Being a serverless database, Prisma Postgres has zero cold starts and avoids other serverless-related issues. For our region, we'll stick with US East. Hit “Create project” to kick off the new instance.

Configure the application

Fetch Configuration Keys

Once the project is created, it will start provisioning, and we'll receive a set of keys to work with. Copy the database URL and Pulse API key to your clipboard. We'll paste these into our application’s environment file.

Database modelling, migrations and seeding

With our setup connected (ensure you check the status to confirm connection), let's run migrations to populate our database.

Add Models to the Prisma Schema

We’ll work with four tables for this app, the most important of which is the Order table. The other tables will support our orders with data about which items are to be ordered, their specifications, and more.

Let’s add these models to the schema:

Run Migrations

We can now run migrations to get these models into tables in our database. Run the following command in the terminal:

Seed the Database

Let’s seed the database to get some initial data in place. Create a seed.ts file in the prisma directory and add data to seed the database:

With the seed file in place, let's run the db seed command to seed the database:

Running the seed command will populate the database with the sample data described in seed.ts.

Visualize and manipulate data with Prisma Studio

To visualize our data, return to the Prisma Data Platform and select Studio from the left-hand menu. We can see Prisma Studio directly in the browser, offering a view of our tables, such as orders and products.

• Orders Table: Displays your seeded orders.
• Products Table: Check out the pizza and wings data.

Fetch Orders in the application

We'll need an endpoint to retrieve the orders when the application loads. This should happen in the /orders endpoint where we fetch orders from the database, sort them by the creation date and prepare to show specifications, product details, etc.

Set up Prisma Pulse

Prisma Pulse allows us to react to changes that occur in our databases. Every single operation that takes place in our database can be surfaced as an event that can be listened to anywhere that we use Prisma Client against that database.

Using Pulse to react to changes offers several advantages, including:

1. Scalability: It's easier to horizontally scale our applications because we don't need to worry about certain instances receiving data changes and others not
2. Database changes from anywhere: Database changes that come from places other than our main application can still be surfaced in our applications. For example, if we directly modify the database, the event will still be surfaced.

Install the Extension

Let's add the necessary extension for Prisma Pulse. We can install it with npm:

Integrate withPulse in Prisma Client

In our index.ts file, we need to import withPulse and extend our PrismaClient instance to use it. This is where we pass our Pulse apiKey:

Listen to database events

Let’s create an async function named streamOrders to utilize the stream method. We’ll need to define what events we want to capture. For example, we can listen only for creation events if we’re interested in new orders.

Next, let’s initiate streamOrders in the server start block.

Bridge events to the browser

Using Socket.IO

Add a custom event handler using Socket.IO for real-time order updates.

1. Define Event Listener

   In our server:

2. Emit Events on Database Changes

   When a new event is captured by Pulse, use Socket.IO to emit it:

Validate real-time updates

We can test the connection with a new order entry either by refreshing the seeded data or using an interface like Prisma Studio. For example, in Prisma Studio we can insert a new entry which will instantly push a database create event to our application without any need to poll for updates.

Conclusion

There are a lot of gotchas when it comes to building real-time applications. One of the best ways to ensure consistency as our applications scale is to have events reported from our databases to our applications as data changes occur.

Prisma Postgres allows us to easily set up a database that can also stream data changes directly to our applications. Setting up a new Prisma Postgres project can be done in just a couple clicks and the database spins up in seconds.

Check out Prisma Postgres today to see how you can get started with real time features in your application quickly and easily!