Building Real-Time Apps with PocketBase Subscriptions

Real-time features are no longer just a “nice to have” - users expect instant updates. Whether it’s a chat message, a notification, or a live collaboration tool, PocketBase makes implementing real-time functionality incredibly simple.

How PocketBase Real-Time Works

PocketBase uses Server-Sent Events (SSE) to push updates to connected clients. Unlike WebSockets, SSE is simpler to implement, works over standard HTTP, and is firewall-friendly.

When you subscribe to a collection or record, PocketBase sends an event whenever a record is:

• Created (create)
• Updated (update)
• Deleted (delete)

Setting Up a Subscription

Let’s build a simple real-time notification system.

The Code

import PocketBase from "pocketbase";

const pb = new PocketBase("https://your-app.pocketbasecloud.com");

// Subscribe to ALL changes in the 'notifications' collection
pb.collection("notifications").subscribe("*", function (e) {
  console.log(e.action); // 'create', 'update', or 'delete'
  console.log(e.record); // The record data

  if (e.action === "create") {
    showToast(`New notification: ${e.record.message}`);
  }
});

That’s it! 5 lines of code to enable real-time updates.

Targeted Subscriptions

You don’t always want to listen to everything. You can subscribe to a specific record:

// Subscribe to changes on a specific user profile
pb.collection("users").subscribe("RECORD_ID", function (e) {
  updateUserProfileUI(e.record);
});

Or you can use the filter option (available in newer SDK versions) to receive only relevant events, saving bandwidth.

Authentication and Security

Real-time subscriptions respect your API Rules. If a user doesn’t have permission to view a record, they won’t receive real-time updates for it.

For example, if your ‘notifications’ collection has a View Rule: user = @request.auth.id

Then user A will only receive realtime events for notifications belonging to them. You don’t need extra logic on the client to filter events - the server handles it securely.

Handling Connection Issues

The PocketBase SDK automatically handles reconnection if the internet drops. However, you might want to handle connection state in your UI:

// This is an example, SDK internals manage the connection automatically
// but you can maintain local state if needed.

When the client reconnects, you should probably re-fetch the latest data to ensure you didn’t miss anything while offline.

Pattern: Fetch then Subscribe

The most robust pattern for real-time apps is:

1. Fetch the initial list of data
2. Subscribe to real-time updates
3. Update the local list upon receiving events

// 1. Fetch initial data
let posts = await pb.collection("posts").getList(1, 50);

// 2. Subscribe
pb.collection("posts").subscribe("*", function (e) {
  if (e.action === "create") {
    // Add to list
    posts = [e.record, ...posts];
  }
  if (e.action === "update") {
    // Update item in list
    posts = posts.map((p) => p.id === e.record.id ? e.record : p);
  }
  if (e.action === "delete") {
    // Remove from list
    posts = posts.filter((p) => p.id !== e.record.id);
  }

  updateUI(posts);
});

Scaling Real-Time Connections

PocketBase is highly efficient with connections. A single small server on PocketBase Cloud can handle thousands of concurrent real-time connections.

If you are building a massive application (10k+ concurrent users), consider:

1. Optimizing your subscription logic (don’t subscribe to everything everywhere)
2. Upgrading your PocketBase Cloud server size (more RAM = more connections)

Conclusion

PocketBase democratizes real-time functionality. You don’t need complex Redis setups or separate WebSocket servers. It just works, right out of the box.

Start adding real-time features to your app today!