Build Real-time Applications with the new "watch" API in Deno KV

Deno KV, our ACID-compliant key-value database built right into the runtime, was a big step towards our vision of radically simplifying cloud development by removing boilerplate and configuration. Instead of juggling API keys and provisioning a database, you can connect to a database in a single line of code:

const kv = await Deno.openKv();

We’ve continued to ship a ton of features for Deno KV, such as an open source self-hostable server, the ability to remotely connect to a managed Deno KV instance, and continuous backup to object storage. But today, we’re introducing a new feature that will simplify building an entire class of real time applications - kv.watch:

let seen = "";
for await (const [messageId] of kv.watch([["last_message_id", roomId]])) {
  const newMessages = await Array.fromAsync(kv.list({
    start: ["messages", roomId, seen, ""],
    end: ["messages", roomId, messageId, ""],
  });
  
  await websocket.write(JSON.stringify(newMessages));
  seen = messageId;
}

Supported as of Deno 1.38.5 and on Deno Deploy, kv.watch allows you to listen to changes to your Deno KV keys, which simplifies building:

• real-time UI updates, such as social media newsfeeds or notifications
• chat applications or chat rooms like Slack and Discord
• collaborative editors like Google Docs

In this blog post, we’ll go over:

• The new .watch() function
• Building real-time updates
• Watching for updates on Deno Deploy
• More use cases and examples
• What’s next

The new .watch() 👀 function

The new .watch() function accepts an array of keys, and returns a ReadableStream that emits a new value anytime the watched keys change their versionstamp.

In the below example, we watch for updates on keys ["foo"] and ["bar"]:

const db = await Deno.openKv();

const stream = db.watch([["foo"], ["bar"]]);
for await (const entries of stream) {
  entries[0].key; // ["foo"]
  entries[0].value; // "bar"
  entries[0].versionstamp; // "00000000000000010000"
  entries[1].key; // ["bar"]
  entries[1].value; // null
  entries[1].versionstamp; // null
}

Note that the most keys you can pass in a single kv.watch call is 10.

In order to add kv.watch into a site or app, you would need to use it with server-side events or websockets.

Building real-time updates

For a more practical example, the code below uses kv.watch to listen to changes to the post’s comments and like counts, then dispatches them to the client with server-sent events:

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const app = new Application();
const router = new Router();

// Send server side event on every activity on this blog post.
router.get("/api/blog_post_updates", async (ctx) => {
  const target = ctx.sendEvents();
  const postId = ctx.url.searchParams.get("post_id");
  for await (
    const [{ value: lastCommentId }, { value: likeCount }] of kv.watch([
      ["lastCommentId", postId],
      ["likeCount", postId],
    ])
  ) {
    target.dispatchMessage({ lastCommentId, likeCount });
  }
});

app.use(router.routes());
await app.listen({ port: 80 });

The client needs to create a connection at the endpoint /api/blog_post_updates. Then, the client will receive server-side events with new comments and like count, which it can render in HTML. The UI will then render updates without requiring a page reload.

Watching for updates on Deno Deploy

Deno KV on Deno Deploy is an all-in-one solution for scalable, reliable and ACID-compliant storage, with all the necessary primitives for building modern applications:

• Queues
• Cron tasks
• Read replicas
• Backing up to S3
• and now, efficient change notification with kv.watch()!

No matter which region an isolate is running in, kv.watch change notifications are delivered to the isolate with minimal latency. With our high-performance transaction processing architecture built on top of FoundationDB, kv.watch scales to hundreds of thousands of concurrent clients.

Pricing

There’s no change to the pricing for Deno KV on Deno Deploy. However, every time an entry is returned in the ReadableStream response from kv.watch, it is considered a “read”.

More use cases and examples

To provide more examples on using kv.watch, we have updated our Deno KV showcase apps to include KV watch:

• Multiplayer Tic-Tac-Toe (source, demo)
• Shared Todo list (source, demo)

These examples give you an idea of the real-time or multi-user collaboration applications that you can build with Deno KV watch.

For more resources:

• API reference
• Manual on kv.watch

What’s next

Deno KV, alongside other cloud primitives such as Deno Queues and Deno Cron, are built right into the runtime, which allows you to build faster without worrying about configuration, provisioning, or scaling infrastructure. Deno KV’s new kv.watch further simplifies building real-time applications by letting you detect changes to Deno KV.

We’re always open to feedback and feature requests! Feel free to join our growing Discord or create an issue here.

We just launched Deno Cron! 🦕🕒

Create scheduled jobs on Deno Deploy in minutes.