🐛 Bug Report: Realtime doesnt get connected

[nmpereira]

👟 Reproduction steps

With expo react-native, when i try using realtime connection, it fails on chrome. It seems to work on firefox.

The connection gets instantly disconnected and it tries reconnecting, but fails over and over (Chrome)

Use the below code to test:

npx create-expo-app@latest .
npx expo install appwrite // this works when you import from "appwrite"
npx expo install react-native-appwrite react-native-url-polyfill // this doesnt seem to work when you import from "react-native-appwrite"

// app/index.tsx
import { Text } from "react-native";

import { useEffect } from "react";
import "react-native-url-polyfill/auto";

// import { Client } from "react-native-appwrite"; // switching to this doesnt work on chrome
import { Client } from "appwrite"; // switching to this works

export const appwriteConfig = {
    endpoint: "https://cloud.appwrite.io/v1",
    platform: "com.myappname",
    projectId: "<YOUR_PROJECT_ID>",
    databaseId: "<YOUR_DATABASE_ID>",
    messagesCollectionId: "<YOUR_MESSAGES_COLLECTION_ID>",
  };

export const client = new Client()
  .setEndpoint(appwriteConfig.endpoint)
  .setProject(appwriteConfig.projectId);

export default function HomeScreen() {
  useEffect(() => {
    const unsubscribe = client.subscribe(
      `databases.${appwriteConfig.databaseId}.collections.${appwriteConfig.messagesCollectionId}.documents`,
      (response) => {
        // Callback will be executed on all account events.
        console.log("REALTIME", response);
      }
    );
    console.log("SUBSCRIBE", unsubscribe);

    return () => {
      console.log("UNSUBSCRIBE", unsubscribe);
      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, []);
  return <Text>Home</Text>;
}

👍 Expected behavior

When using the react-native-appwrite sdk, i expect it to work on android, apple, and Web (all browsers)

👎 Actual Behavior

It doesnt work on Chrome web browser, but works on firefox

🎲 Appwrite version

Version 0.7.x

💻 Operating system

MacOS

🧱 Your Environment

Using cloud appwrite, with react native expo.

Also tried with vite react and it works fine since it uses "appwrite" sdk, when switching to "react-native-appwrite", it fails

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[nmpereira]

I came up with a workaround for this and it works well with Realtime connections. The trick is to install both packages and conditionally use one over the other depending on the platform.

The RN SDK currently doesn't work on the web for real-time connections. It seems like it fails on chrome, but works on Firefox.

The Web SDK works on chrome, Firefox (tested desktop and mobile chrome), but it won't work with the expo go app (tested on android).

So conditionally use both based on the platform as a workaround

npx create-expo-app@latest .
npx expo install appwrite
npx expo install react-native-appwrite react-native-url-polyfill 

import { Platform, Text } from "react-native";
import { useEffect } from "react";

import "react-native-url-polyfill/auto";

// Install both the SDKs via npm or expo
import { Client as RNClient } from "react-native-appwrite"; // Import the RN client
import { Client as WebClient } from "appwrite"; // Import the web client

// export const appwriteConfig = {
//     endpoint: "https://cloud.appwrite.io/v1",
//     platform: "com.myappname",
//     projectId: "<YOUR_PROJECT_ID>",
//     storageId: "<YOUR_STORAGE_ID>",
//     databaseId: "<YOUR_DATABASE_ID>",
//     userCollectionId: "<YOUR_USER_COLLECTION_ID>",
//     messagesCollectionId: "<YOUR_MESSAGES_COLLECTION_ID>",
//   };

export const client = Platform.OS === "web" ? new WebClient() : new RNClient(); // Workaround for the web

client
  .setEndpoint(appwriteConfig.endpoint)
  .setProject(appwriteConfig.projectId);


export default function HomeScreen() {
  useEffect(() => {
    const unsubscribe = client.subscribe(
      `databases.${appwriteConfig.databaseId}.collections.${appwriteConfig.messagesCollectionId}.documents`,
      (response) => {
        // Callback will be executed on all account events.
        console.log("REALTIME", response);
      }
    );

    console.log("SUBSCRIBED");

    return () => {
      if (unsubscribe) {
        unsubscribe();
        console.log("UNSUBSCRIBED");
      }
    };
  }, []);

  return <Text>Home</Text>;
}

[ChiragAgg5k]

@nmpereira hi there, is this issue still relevant with the latest release of the sdk? we recently added realtime ping pong messages to tackle the realtime issues

[nmpereira]

I've since moved away from appwrite for my current project and also added a workaround to make it work. I don't have a way to test it at the moment unless you really need me to.