Test Pusher Channels webhooks locally

Receive Pusher Channels events such as channel_occupied on your laptop while you build, with a public HTTPS URL Pusher can reach.

Horizon has no Pusher integration. Pusher posts webhooks to a public URL, and Horizon provides that URL.

Before you beginCopy Anchor Link

• Node.js 18 or later
• A Horizon account and the CLI (see Getting started)
• A reserved subdomain for -s. Reserve one on the Subdomains page.
• A Pusher Channels app
• A Next.js app that uses the App Router and runs on port 3000

npm install pusher

import Pusher from "pusher";

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID ?? "",
  key: process.env.PUSHER_KEY ?? "",
  secret: process.env.PUSHER_SECRET ?? "",
  cluster: process.env.PUSHER_CLUSTER ?? "",
});

export async function POST(request: Request) {
  const rawBody = await request.text();
  const webhook = pusher.webhook({
    headers: Object.fromEntries(request.headers),
    rawBody,
  });

  if (!webhook.isValid()) {
    return new Response("Invalid signature", { status: 401 });
  }

  for (const event of webhook.getEvents()) {
    console.log(`Received Pusher event: ${event.name} on ${event.channel}`);
  }

  return new Response("ok", { status: 200 });
}

PUSHER_APP_ID=replace-with-your-app-id
PUSHER_KEY=replace-with-your-key
PUSHER_SECRET=replace-with-your-secret
PUSHER_CLUSTER=replace-with-your-cluster

npm run dev

hrzn tunnel http://localhost:3000 -s my-app

HORIZON: Tunnel connected
  URL          https://my-app.hrzn.run (reserved)
  Forwarding   http://localhost:3000
  Request log  https://hrzn.run/dashboard/tunnels/my-app

import Pusher from "pusher-js";

const client = new Pusher("your-key", { cluster: "your-cluster" });
client.subscribe("my-channel");

Check it worksCopy Anchor Link

The Horizon terminal prints one line for the request:

  POST    200  /api/webhooks/pusher

Your app terminal prints:

Received Pusher event: channel_occupied on my-channel

Pusher sends channel_vacated up to three seconds after the last client leaves.

TroubleshootingCopy Anchor Link

The route returns 401Copy Anchor Link

The Horizon line shows [401]. The key or signature check failed.

• Check that PUSHER_KEY and PUSHER_SECRET belong to the app that owns the webhook. The helper compares X-Pusher-Key with your key.
• Restart npm run dev after you edit .env.local.
• Read the body with request.text(). Pusher signs the exact bytes.
• The helper also checks that the content type is JSON.

Nothing reaches your appCopy Anchor Link

Check that the Webhook URL ends with /api/webhooks/pusher and that the event type matches what you trigger. Check that the Horizon terminal is still running.

The URL changed after a restartCopy Anchor Link

You started the tunnel without -s, so Horizon gave you a new random subdomain. Restart with -s my-app and the URL stays the same. -s needs a subdomain you reserved, see Pricing.

Next stepsCopy Anchor Link

• Read Pusher's webhooks reference for every event type.
• See Pricing to reserve a subdomain so your URL never changes.