Back
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]
creating new row is working just fine
its just realtime is killing itself
Websocket error Realtime
please ping me when you reply
