[SOLVED] Realtime connection doesn't work

I've the below useEffect in my react (nextjs) app

  useEffect(() => {
    const channel = `databases.${DB_ID}.collections.${CHATS_COLLECTION_ID}.documents`;
    const unsubscribe = client.subscribe(channel, (response) => {
      console.log(response);
    });

    return () => unsubscribe();
  }, []);

I'm getting the client from a different file. it looks like below there

import { Client } from "appwrite";

const NEXT_PUBLIC_APPWRITE_ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT;
const NEXT_PUBLIC_APPWRITE_PROJECT_ID =
  process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID;

const client = new Client()
  .setEndpoint(NEXT_PUBLIC_APPWRITE_ENDPOINT)
  .setProject(NEXT_PUBLIC_APPWRITE_PROJECT_ID);

export { client };

But i'm getting no logs when a new document is created/updated/deleted in the corresponding collection. what am i doing wrong here?

Do the Collection permissions have anything to cause it? my collection only has the Create permission for all the users. and document level permissions enabled

Does your site have SSL?

i'm running it in localhost

Appwrite: Cloud
App: localhost

I don’t think Realtime will work in localhost

really? why is that? and how folks do the development if it doesn't work on localhost

in this video they're doing it in the localhost. and i literally have the exact same code for realtime

i maybe getting the idea now. most of my app is SSR. my whole authentication is also on the server-side. i only doing the realtime connection on the client-side cuz it's obviously not possible to do it on the server-side. and according to this section, unauthenticated users won't receive any updates. so when I'm sending a request from the client-side, it's counted as an unauthenticated request to appwrite

this was the main issue. solved by setting X-Fallback-Cookies value in the client-side for client-side authentication

[SOLVED] Realtime connection doesn't work