支持实时订阅react

Question

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

我正在使用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;

这是我第一次接触后端，所以这对我来说是非常新鲜的，所以如果有人能帮我解释一下为什么我可能在我的控制台里看不到任何东西，或者可以指给我这样的在线资源，这将是非常感谢的。

如果有人想要运行代码，这是我的回购：https://github.com/CO2Sesnsor/breathe-front-end

• http://localhost:3000/postdata -是我用来手动发布数据from
• 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();
}, []);