Need help on realtime function.

Hello everyone, I am a newbie in AppWrite and hope to get help from professionals.

Suppose I create a collection named users, and then activate the document security option, then the collection level permission is not set by default, which means that only the admin sdk can access it, because the admin sdk is not subject to permission and rate limit restrictions. Suppose a user creates a new account on my web page. After the user successfully creates the account, I will store the user data in the users collection in the database, and then set permissions for the newly created document. Only the current user can read, write (delete, update) the document. From the perspective of using Permission and Role helper class, it looks like this: [Permission.read(Role.read(userId)), Permission.write(Role.write(userId))].

Okay, now I want to monitor the newly created document mentioned above in real time. Let's assume that the database id is demo-db, we assume that the id of the users collection is demo-users-collection, and we assume that the id of the document is demo-doc-123.

So the channel I want to bind should be: 'databases.demo-db.collections.demo-users-collection.documents.demo-doc-123'

Sample code:

const { client } = createBrowserClient(sessionSecret);

useEffect(()=>{
const channel = 'databases.demo-db.collections.demo-users- collection.documents.demo-doc-123';

const unsubscribe = client.subscribe(channel, response=>{
console.log(response);
});

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

But unfortunately, it doesn't work. Even if the document changes, I can't get the latest data in real time. But if I set permission: Permission.read(Role.any()) at the collection level, that is, the users collection level, it works fine.

I am really a newbie to appwrite. Maybe there are some steps that I implemented wrong, or I missed some documents.

I hope there will be experts to provide a reply. Thank you.

Implementation details of the createBrowserClient function:

appwrite-browser.ts

import "client-only";

import { Account, Client, Databases, Teams, Storage } from "appwrite";

export function createBrowserClient(session?: string) {
const client = new Client()
.setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
.setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT!);

if (session) client.setSession(session);

return {
get client() {
return client;
},

};
}