Realtime — Cookbook

import Pusher from "pusher-js";

// Stock pusher-js — the one changed line is wsHost.
const pusher = new Pusher("<APP_KEY>", {
  wsHost: "realtime.clutchcall.dev",
  wsPort: 443,
  forceTLS: true,
  enabledTransports: ["ws", "wss"],
  cluster: "",           // required by pusher-js's types; ignored when wsHost is set
});

const channel = pusher.subscribe("orders");

channel.bind("order.created", (data) => {
  console.log("new order", data);
});

// Lifecycle you can hook if you want it:
pusher.connection.bind("state_change", ({ current }) => {
  console.log("connection:", current); // connecting → connected → …
});

import Pusher from "pusher-js";

const pusher = new Pusher("<APP_KEY>", {
  wsHost: "realtime.clutchcall.dev",
  wsPort: 443,
  forceTLS: true,
  cluster: "",
  // Auth endpoint your server hosts (see "Private channels" below).
  channelAuthorization: { endpoint: "/pusher/auth" },
});

const presence = pusher.subscribe("presence-room-42");

// Render the whole roster once, on join.
presence.bind("pusher:subscription_succeeded", (members) => {
  const roster = [];
  members.each((m) => roster.push({ id: m.id, ...m.info }));
  console.log("me:", members.me.id, members.me.info);
  render(roster);
});

// Keep it in sync.
presence.bind("pusher:member_added", (member) => {
  console.log("joined:", member.id, member.info);
  render(currentRoster().concat({ id: member.id, ...member.info }));
});

presence.bind("pusher:member_removed", (member) => {
  console.log("left:", member.id);
  render(currentRoster().filter((m) => m.id !== member.id));
});

import express from "express";
import Pusher from "pusher";

const pusher = new Pusher({
  appId: process.env.APP_ID,
  key: process.env.APP_KEY,
  secret: process.env.APP_SECRET,   // never ships to the browser
  host: "realtime.clutchcall.dev",
  useTLS: true,
});

const app = express();
app.use(express.urlencoded({ extended: false })); // pusher-js posts form-encoded

app.post("/pusher/auth", (req, res) => {
  const { socket_id, channel_name } = req.body;

  // 1. Your own authorization — is req.user allowed on this channel?
  const user = req.user; // from your session/JWT middleware
  if (!user || !mayAccess(user, channel_name)) {
    return res.status(403).send("forbidden");
  }

  // 2. Presence channels also carry the member payload.
  if (channel_name.startsWith("presence-")) {
    const presenceData = {
      user_id: String(user.id),
      user_info: { name: user.name, avatar: user.avatarUrl },
    };
    return res.send(
      pusher.authorizeChannel(socket_id, channel_name, presenceData)
    );
  }

  // 3. Plain private channel.
  res.send(pusher.authorizeChannel(socket_id, channel_name));
});

app.listen(3000);

import os
from flask import Flask, request, jsonify
import pusher

pusher_client = pusher.Pusher(
    app_id=os.environ["APP_ID"],
    key=os.environ["APP_KEY"],
    secret=os.environ["APP_SECRET"],
    host="realtime.clutchcall.dev",
    ssl=True,
)

app = Flask(__name__)

@app.post("/pusher/auth")
def pusher_auth():
    socket_id = request.form["socket_id"]
    channel = request.form["channel_name"]

    user = current_user()  # from your session
    if user is None or not may_access(user, channel):
        return "forbidden", 403

    if channel.startswith("presence-"):
        payload = pusher_client.authenticate(
            channel=channel,
            socket_id=socket_id,
            custom_data={
                "user_id": str(user.id),
                "user_info": {"name": user.name},
            },
        )
    else:
        payload = pusher_client.authenticate(channel=channel, socket_id=socket_id)

    return jsonify(payload)

import Pusher from "pusher";

const pusher = new Pusher({
  appId: process.env.APP_ID,
  key: process.env.APP_KEY,
  secret: process.env.APP_SECRET,
  host: "realtime.clutchcall.dev",
  useTLS: true,
});

await pusher.trigger("orders", "order.created", {
  id: 42,
  total: 19.99,
});

// Fan the same event to several channels at once:
await pusher.trigger(["orders", "private-admin"], "order.created", { id: 42 });

pusher_client.trigger("orders", "order.created", {"id": 42, "total": 19.99})

# Publish over the REST API on the control-plane host. Pusher's REST calls are
# signed (auth_key + auth_signature + body_md5); the server libraries above build
# that signature for you, and the console's Event Creator prints a ready-to-run,
# already-signed cURL you can copy.
curl -X POST "https://portal.clutchcall.dev/apps/<APP_ID>/events" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "order.created",
    "channel": "orders",
    "data": "{\"id\":42,\"total\":19.99}"
  }'

const presence = pusher.subscribe("presence-room-42");

presence.bind("pusher:subscription_succeeded", () => {
  // Now safe to emit client events on this channel.
  presence.trigger("client-typing", { userId: "u_42", typing: true });
});

// Everyone else on the channel receives it:
presence.bind("client-typing", (data) => {
  console.log(`${data.userId} is typing`, data.typing);
});

import express from "express";
import crypto from "crypto";

const app = express();

// Capture the RAW body — the signature is over exact bytes, so verify before JSON.parse.
app.post(
  "/hooks/realtime",
  express.raw({ type: "application/json" }),
  (req, res) => {
    const signature = req.get("X-Pusher-Signature") ?? "";
    const expected = crypto
      .createHmac("sha256", process.env.WEBHOOK_SECRET)
      .update(req.body) // req.body is a Buffer here
      .digest("hex");

    const ok =
      signature.length === expected.length &&
      crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
    if (!ok) return res.status(401).end();

    const { time_ms, events } = JSON.parse(req.body.toString("utf8"));
    for (const e of events) {
      switch (e.name) {
        case "channel_occupied":
          console.log("first subscriber on", e.channel);
          break;
        case "channel_vacated":
          console.log("last subscriber left", e.channel);
          break;
        case "member_added":
          console.log("member", e.user_id, "joined", e.channel);
          break;
        case "member_removed":
          console.log("member", e.user_id, "left", e.channel);
          break;
      }
    }

    res.status(200).end(); // ack fast; do work off the request path
  }
);

app.listen(3000);

import hmac, hashlib, os, json
from flask import Flask, request

app = Flask(__name__)

@app.post("/hooks/realtime")
def realtime_hook():
    body = request.get_data()  # raw bytes
    signature = request.headers.get("X-Pusher-Signature", "")
    expected = hmac.new(
        os.environ["WEBHOOK_SECRET"].encode(), body, hashlib.sha256
    ).hexdigest()
    if not hmac.compare_digest(signature, expected):
        return "", 401

    payload = json.loads(body)
    for e in payload["events"]:
        print(e["name"], e.get("channel"), e.get("user_id"))
    return "", 200