事象

ある日、Supabaseのローカル環境でBroadcastによるバックエンドからフロントエンドへのRealtime通信が疎通しなくなりました。

const client = createClient<Database>(
    Deno.env.get("SUPABASE_URL")!,
    Deno.env.get("SUPABASE_ANON_KEY")!,
    {
      auth: {
        persistSession: false,
        autoRefreshToken: false,
      },
      global: { headers: { Authorization: `Bearer ${jwt}` } },
    },
);

await client.channel("rooms").send({
  type: "broadcast",
  event: "room:created",
  payload: room,
}).then((res) => {
  console.log("room:created", res);
});

上記のように実装していたのですが、send後のログでレスポンスが room:created error となっていました。

解消法

以下のように、クライアントを作成した後に client.realtime.connect(); を追加してあげるだけで解消しました。

const client = createClient<Database>(
    Deno.env.get("SUPABASE_URL")!,
    Deno.env.get("SUPABASE_ANON_KEY")!,
    {
      auth: {
        persistSession: false,
        autoRefreshToken: false,
      },
      global: { headers: { Authorization: `Bearer ${jwt}` } },
    },
);

client.realtime.connect();

await client.channel("rooms").send({
  type: "broadcast",
  event: "room:created",
  payload: room,
}).then((res) => {
  console.log("room:created", res);
});

以前はもとの実装で問題なく動作しており、本番環境でも同じ事象は見られなかったので、ローカル環境変数の設定ミスを疑ってかなり時間をムダにしました。
同じ事象が起きている誰かの助けになればと思い供養