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