supabase 实时订阅反应

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中，当组件被卸载时，返回语句中的任何代码都会被调用。

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();
}, []);