Websocket error Realtime

Hi peeps, I am trying to create realtime updates and I am having websocket error Code is below this msg

TL;DR

Developers are facing a WebSocket error when creating realtime updates. The error message suggests a problem with the WebSocket. The code snippet provided indicates the setup for realtime updates but does not directly address the WebSocket issue. Solution: To resolve the WebSocket error, developers should ensure that the WebSocket connection is established correctly and that the necessary configurations are in place. Double-check the WebSocket implementation and consider checking for any network or server-side issues that might be causing the problem.

lib/appwrite.js

TypeScript

import 'react-native-url-polyfill/auto';
import { Client, Account, Avatars, TablesDB, Realtime, Channel } from 'appwrite';

export const client = new Client()
    .setEndpoint('https://sgp.cloud.appwrite.io/v1')
    .setProject('I have my project key here');

export const account = new Account(client)
export const avatars = new Avatars(client)
export const databases = new TablesDB(client)
export const realtime = new Realtime(client)

contents/BooksContext.jsx

TypeScript

import { createContext, useEffect, useState } from "react";
import { client, databases, realtime } from "../lib/appwrite";
import { ID, Permission, Role, Query, Channel } from "appwrite";
import { useUser } from "../hooks/useUser";


export const BooksContext = createContext()

const DATABASE_ID = "69e4a2ec001a2dfb9a35"
const COLLECTION_ID = "69e4a312003c069c9a8c"

export function BooksProvider({ children }) {
    const [books, setBooks] = useState([])
    const { user } = useUser()



    async function fetchBooks() {
        try {
            const response = await databases.listRows({
                databaseId: DATABASE_ID,
                tableId: COLLECTION_ID,
                queries: [
                    Query.equal('userId', user.$id)
                ],
            })

            setBooks(response.rows)
            console.log(response.rows)
        } catch (error) {
            console.log(error)
        }
    }


    async function createBook(data) {
        try {
            const newBook = await databases.createRow({
                databaseId: DATABASE_ID,
                tableId: COLLECTION_ID,
                rowId: ID.unique(),
                data: { ...data, userId: user.$id },
                $permissions: [
                    Permission.read(Role.user(user.$id)),
                    Permission.update(Role.user(user.$id)),
                    Permission.delete(Role.user(user.$id))
                ]

            })
        } catch (error) {
            console.log(error)
        }
    }

TypeScript

useEffect(() => {
        let subscription = null;
        let isMounted = true;

        const setupRealtime = async () => {
            if (user) {
                fetchBooks();

                const channel = Channel.tablesdb(DATABASE_ID).table(COLLECTION_ID).row().create();

                const sub = await realtime.subscribe(channel, (response) => {
                    if (isMounted) {
                        setBooks((prevBooks) => [...prevBooks, response.payload]);
                    }
                });

                if (!isMounted) {
                    await sub.close();
                } else {
                    subscription = sub;
                }
            } else {
                setBooks([]);
            }
        };

        setupRealtime();

        return () => {
            isMounted = false;
  
            if (subscription) {
                subscription.close();
            }
        };
    }, [user]);

    return (
        <BooksContext.Provider value={{ books, fetchBooks, fetchBookById, createBook, deleteBook }}>
            {children}
        </BooksContext.Provider>
    )
}

Error:

TypeScript

Call Stack
  construct (<native>)
  apply (<native>)
  _construct (node_modules\@babel\runtime\helpers\construct.js)
  Wrapper (node_modules\@babel\runtime\helpers\wrapNativeSuper.js)
  construct (<native>)
  _callSuper (node_modules\@babel\runtime\helpers\callSuper.js)
  NamelessError (node_modules\@expo\metro-runtime\src\metroServerLogs.native.ts)
  captureCurrentStack (node_modules\@expo\metro-runtime\src\metroServerLogs.native.ts)
  HMRClient.log (node_modules\@expo\metro-runtime\src\metroServerLogs.native.ts)
  console.level (node_modules\react-native\Libraries\Core\setUpDeveloperTools.js)
  socket.addEventListener$argument_1 (node_modules\appwrite\dist\esm\sdk.js)
  call (<native>)
  invoke (node_modules\react-native\src\private\webapis\dom\events\EventTarget.js)
  dispatch (node_modules\react-native\src\private\webapis\dom\events\EventTarget.js)
  dispatchEvent (node_modules\react-native\src\private\webapis\dom\events\EventTarget.js)
  _eventEmitter.addListener$argument_1 (node_modules\react-native\Libraries\WebSocket\WebSocket.js)
  apply (<native>)
  emit (node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js)
  apply (<native>)
  <anonymous> (node_modules\@babel\runtime\helpers\superPropGet.js)
  RCTDeviceEventEmitterImpl#emit (node_modules\react-native\Libraries\EventEmitter\RCTDeviceEventEmitter.js)
 ERROR  Failed to reconnect: [Error: WebSocket error]