React realtime

Hi

I am currently making a CO2 sensor as part of a group in uni and I am on the software. I have built an api using express to allow the firmware team to send the data to decimal values from sensors to my table, and have hosted the api so that they have an endpoint to hit. (the endpoint they are hitting: https://breathe-e3q1bdaku-breathe.vercel.app/api/data)

The posting is working just find, but on the front end (react) I need to read the most recent CO2 and VOC values. Currently I am simply getting all the data in the table every second by calling a get method I wrote in the API. However, I now realise that this is a very bad way of doing things as when I tried to write a mailer (which is meant to send an email alert when the reading values get too high) I am sending an email every second for as long as the value is too high. This has lead me to look into use the realtime functionality with supabase to overcome the issue.

From online resources I am understanding that to use realtime, I need to actually access my table on my front end, so I have created a client to access on my react app as well. I have made a supabase.js file which is inside my src folder containing this code https://github.com/CO2Sesnsor/breathe-front-end/blob/main/src/supabase.js

I have also made another component for testing realtime called realtime.js (code: https://github.com/CO2Sesnsor/breathe-front-end/tree/main/src/components/realtime.js). Inside the file this is my code to try and read the table values as it is updated. When running the code locally on the /realtime route I am getting the errors in the attached image. From what I have read on other forums this seems like it is most likely to do with the version of supabase I am using. But I can't seem to find any way to fix it

Any help is greatly appreciated

PS. This is my first time touching backend so its also likely Im just doing this wrong, in that case could someone please guide me on how to use realtime with react and express

GitHub

breathe-front-end/supabase.js at main · CO2Sesnsor/breathe-front-end

Contribute to CO2Sesnsor/breathe-front-end development by creating an account on GitHub.

garyaustin•11/26/22, 3:20 PM

Can you show your code making the call?

hasinOP•11/26/22, 3:21 PM

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

const Realtime = () => {
  const handleNewTask = (payload) => {
    console.log("reading......");
  };

  useEffect(() => {
    const taskListener = supabase
      .from("data")
      .on("INSERT", (payload) => handleNewTask(payload.new))
      .subscribe();

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

export default Realtime;

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

const Realtime = () => {
  const handleNewTask = (payload) => {
    console.log("reading......");
  };

  useEffect(() => {
    const taskListener = supabase
      .from("data")
      .on("INSERT", (payload) => handleNewTask(payload.new))
      .subscribe();

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

export default Realtime;

garyaustin•11/26/22, 3:23 PM

Are you on v1 of supabase.js?
This is 2.x.x way: https://supabase.com/docs/reference/javascript/subscribe

Supabase Documentation

on().subscribe()

Ggaryaustin Are you on v1 of supabase.js? This is 2.x.x way: https://supabase.com/docs/refe...

hasinOP•11/26/22, 3:24 PM

im not sure, i googled how to check but couldnt find a way

garyaustin•11/26/22, 3:25 PM

You can look in the supabase object returned on init. It will be in that. How are you installing.

hasinOP•11/26/22, 3:26 PM

i just ran

npm i @supabase/supabase-js

npm i @supabase/supabase-js

Ggaryaustin You can look in the supabase object returned on init. It will be in that. How ...

hasinOP•11/26/22, 3:28 PM

do you mean when i run npm init?

garyaustin•11/26/22, 3:30 PM

No when you run createClient. But that npm call will probably load the latest version so you need to be using the v2 guides.

hasinOP•11/26/22, 3:31 PM

can you tell me more about running createClient because when I was looking online nothing was mentioned about that in what I read

garyaustin•11/26/22, 3:33 PM

https://supabase.com/docs/reference/javascript/initializing
There are also lots of guides in the main docs.

Supabase Documentation

Initializing

hasinOP•11/26/22, 3:58 PM

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;

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;

hasinOP•11/26/22, 3:58 PM

I have updated my code which has removed my errors

hasinOP•11/26/22, 3:58 PM

however, when posting data nothing is being logged to the console @garyaustin

garyaustin•11/26/22, 4:13 PM

Do you meet select RLS for the table?
Do you have a signed in user or are you doing this as anon?
You can add .subscribe (status=>console.log(status)) to get more info on the connection.
Also it takes seconds for the connection to start working.

hasinOP•11/26/22, 4:27 PM

for status it says closed when i log it

hasinOP•11/26/22, 4:28 PM

and I dont have RLS selected as when i turned it on it messed up the endpoint I was hosting

garyaustin•11/26/22, 4:47 PM

RLS off is fine.
Closed is not good. I'm surprised it did not show an error though. SUBSCRIBED is the message you should see if it is good.

This is running on a browser?

Here is a test console you can make sure your instance is running realtime correctly.
https://realtime.supabase.com/inspector/new

You did set up realtime on the table?

hasinOP•11/26/22, 4:47 PM

yep i turned realtime on in the settings

hasinOP•11/26/22, 4:48 PM

currently Im runnining it on local host as my code isnt hosted

garyaustin•11/26/22, 4:48 PM

AH. That is probably the issue.

garyaustin•11/26/22, 4:48 PM

You are running Supabase in a docker?

hasinOP•11/26/22, 4:50 PM

nope

hasinOP•11/26/22, 4:50 PM

all ive done is createClient and gone from there

Hhasin nope

hasinOP•11/26/22, 4:50 PM

actually im not even sure, like I said this is my first time doing any backend

garyaustin•11/26/22, 4:51 PM

Where is your supabase instance?

hasinOP•11/26/22, 4:51 PM

sorry but what do you mean by instance?

Tobias•11/26/22, 4:52 PM

Where do you host it

garyaustin•11/26/22, 4:52 PM

Are you using supabase database from the cloud or are you running it on your machine?

hasinOP•11/26/22, 4:52 PM

https://breathe-e3q1bdaku-breathe.vercel.app/api/data

hasinOP•11/26/22, 4:53 PM

i wrote a basic api using express which has this endpoint ^

hasinOP•11/26/22, 4:53 PM

but from my understanding what ive done is still using it on the cloud

garyaustin•11/26/22, 4:53 PM

Not asking where your app is. How do you get to the dashboard for supabase. Where you set up tables and such.

hasinOP•11/26/22, 4:54 PM

I get to that throught the website

hasinOP•11/26/22, 4:54 PM

then I can access everything from there

hasinOP•11/26/22, 4:55 PM

garyaustin•11/26/22, 4:55 PM

If website means supabase website, then you have a hosted instance. Realtime works on that, it is still a work in progress (at least as of a few days ago) if you were to self host it or run it in docker.

garyaustin•11/26/22, 4:56 PM

You are on a hosted instance.
So you can run that test I sent you to see if your realtime is working correctly and narrow down whether your code is the issue, or whether you don't have your instance set up correctly.

garyaustin•11/26/22, 4:57 PM

You can also look at the websocket in developer window and see if there are any errors.

Ggaryaustin You are on a hosted instance. So you can run that test I sent you to see if your...

hasinOP•11/26/22, 4:57 PM

do i leave channel as room_a?

garyaustin•11/26/22, 4:58 PM

does not matter it is just a name

hasinOP•11/26/22, 4:58 PM

ok thanks

hasinOP•11/26/22, 4:58 PM

ill try that and let you know

hasinOP•11/26/22, 5:01 PM

garyaustin•11/26/22, 5:03 PM

So it looks like something is not set up on your instances. I think you are trying to monitor a table "breathe" there. Is realtime turned on for that table?

hasinOP•11/26/22, 5:04 PM

so i have an organization called breathe

hasinOP•11/26/22, 5:04 PM

and inside of it I have a table called data

hasinOP•11/26/22, 5:04 PM

for which realtime is on

garyaustin•11/26/22, 5:05 PM

I have no idea what an organization is that a table?

hasinOP•11/26/22, 5:06 PM

an organizations just used to organise projects amongst tams

import { supabase } from "../supabase"; import { useEffect } from "react"; const Realtime = () => { const handleNewTask = (payload) => { console.log("reading......"); }; useEffect(() => { const taskListener = supabase .from("data") .on("INSERT", (payload) => handleNewTask(payload.new)) .subscribe(); return taskListener.unsubscribe(); }, []); return <h1>Realtime</h1>; }; export default Realtime;

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;

React realtime

Similar Threads

Similar Threads

Similar Threads