Quickstart

Get your app's credentials

Sign in and create an organisation. It comes with a first app, called Production, and shows its credentials once. Put them in your backend's environment:

The public key is safe in client code. The secret signs tokens and publishes events: keep it on your server and never ship it to browsers. Bundlers only expose variables with their prefix to the browser, so name the public key accordingly (NEXT_PUBLIC_THUNDERCLAP_KEY with Next.js, VITE_THUNDERCLAP_KEY with Vite).

Install the SDKs

npm install @thunderclapjs/client   # in your frontend
npm install @thunderclapjs/server   # in your backend

Subscribe in the browser

The client connects as soon as it's created, and keeps its subscriptions across network drops and reconnects.

import { Thunderclap } from "@thunderclapjs/client";

const thunderclap = new Thunderclap({ key: process.env.NEXT_PUBLIC_THUNDERCLAP_KEY });

const room = thunderclap.subscribe("room-42");
room.bind("message", (data, meta) => {
  console.log("new message", data, "sequence", meta.seq);
});

Publish from your server

import { ThunderclapServer } from "@thunderclapjs/server";

const thunderclap = new ThunderclapServer({
  appId: process.env.THUNDERCLAP_APP_ID,
  secret: process.env.THUNDERCLAP_SECRET,
});

await thunderclap.publish({
  channel: "room-42",
  data: { text: "Hello!", author: "ada" },
});

Every subscriber of room-42 receives the event. Without an event name, it's called message, the one the client binds above. Watch it arrive in the dashboard's Debug tab, which can also publish test events.