Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-declarative/nestjs-appwrite-bff

Long polling realtime event support for AppWrite
https://github.com/react-declarative/nestjs-appwrite-bff

appwrite longpolling realtime sockjs

Last synced: 24 days ago
JSON representation

Long polling realtime event support for AppWrite

Awesome Lists containing this project

README

        

# nestjs-appwrite-bff

> AppWrite PWA bootstrap starter kit


Appwrite Cloud Card

## The problem

Currently AppWrite [does not support Long Polling instead of WebSocket](
https://github.com/appwrite/appwrite/issues/5631). This is critical if you want to use [Ngrok](https://ngrok.com). Also, using additional microservices together with the AppWrite functions is a must have feature for API integration to other systems: What if we need to cache some data in Redis before writing It into the production database?

## Solution

You can use `createProxyMiddleware` with Express web server to connect your PWA with backend microservices. Also this tool restream AppWrite Realtime events by using [sockjs-client](https://www.npmjs.com/package/sockjs-client)

```typescript
import AppwriteService from "./AppwriteService";
import { CC_APPWRITE_EVENT_RESTREAMER_URL } from "../../../config/params";
import Socket from "sockjs-client";
import TYPES from "../../types";
import { inject } from "react-declarative";
import { makeObservable } from "mobx";

type RealtimeResponseEvent = {
events: string[];
channels: string[];
timestamp: number;
payload: T;
};

export class RealtimeService {
readonly appwriteService = inject(TYPES.appwriteService);

constructor() {
makeObservable(this, {});
}

subscribe = (
channels: string | string[],
callback: (payload: RealtimeResponseEvent) => void
) => {
if (CC_APPWRITE_EVENT_RESTREAMER_URL) {
const socket = new Socket(CC_APPWRITE_EVENT_RESTREAMER_URL);

socket.onopen = () => {
socket.send(JSON.stringify(channels));
};

socket.onerror = (error) => {
console.error(error);
};

socket.onmessage = (msg) => {
const payload = JSON.parse(msg.data);
callback(payload);
};

socket.onclose = (...args) => {
console.log("socket closed", { args });
};

return () => socket.close();
}
return this.appwriteService.client.subscribe(channels, callback);
};
}

export default RealtimeService;
```

Just copy and paste that code to [cra-template-appwrite](https://www.npmjs.com/package/cra-template-appwrite) and enjoy long polling appwrite events