# Quickstart

Connect a browser to a channel and publish an event to it from your server. You need an app's credentials and Node.js 22 or later.

### Get your app's credentials

[Sign in](https://thunderclap.dev/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:

```dotenv
THUNDERCLAP_APP_ID=app_...
THUNDERCLAP_KEY=pk_...
THUNDERCLAP_SECRET=sk_...
```

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

```sh
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.

```ts title="client.ts"
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

```ts title="server.ts"
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.

## Next steps

-   [Private channels](https://thunderclap.dev/docs/guides/private-channels.md): restrict who can subscribe.
-   [Presence](https://thunderclap.dev/docs/guides/presence.md): show who is online.
-   [Missed messages](https://thunderclap.dev/docs/guides/missed-messages.md): backfill what a client missed while offline.
-   [API reference](https://thunderclap.dev/docs/reference/client.md): every option and method.