supabase实时订阅react

Question

每当有新数据发布到 SUPABASE 表时，我都会尝试显示该表的最后一个值。

我正在使用react，目前只是尝试将数据记录到控制台，但我没有得到任何东西。

我的代码：

import { supabase } from "../supabase";
import { useEffect } from "react";

const Realtime = () => {
  useEffect(() => {
  const taskListener = supabase
    .channel("public:data")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "data" },
      (payload) => {
        console.log("Change received!", payload);
      }
    )
    .subscribe();

  taskListener.unsubscribe();
}, []);
return <h1>Realtime</h1>;
};

export default Realtime;

这是我第一次真正接触后端，所以这对我来说都是全新的，所以如果有人可以帮助解释为什么我可能在控制台中看不到任何内容，或者可以向我指出在线资源，我将不胜感激。

PS，如果有人想运行代码，这是我的存储库：https://github.com/CO2Sesnsor/breathe-front-end

• http://localhost:3000/postdata - 是我用来手动发布数据的路径
• http://localhost:3000/realtime - 是我尝试将有效负载记录到的路线

Answer 1

您订阅实时监听器后立即取消订阅，这似乎就是原因。

要解决此问题，您需要返回

unsubscribe()

调用。在

useEffect

中，卸载组件时会调用 return 语句中的任何代码。

useEffect(() => {
  const taskListener = supabase
    .channel("public:data")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "data" },
      (payload) => {
        console.log("Change received!", payload);
      }
    )
    .subscribe();

  // add return right here!
  return taskListener.unsubscribe();
}, []);

Answer 2

useEffect

清理逻辑需要是惰性的 - 即在回调中 - 否则它将在其之前的内容之后立即执行。所以你需要：

return () => taskListener.unsubscribe();