exclusive-coralE
Refine17mo ago
9 replies
exclusive-coral

Infinite websocket call on custom liveProvider implementation with socket.io

import { LiveProvider } from "@refinedev/core";
import { Socket } from "socket.io-client";

type ListenerType = {
  type: string;
  payload: { ids: string[] };
  date: Date;
  channel: string;
};

const liveProvider: (socket: Socket) => LiveProvider = (socket) => ({
  subscribe({ channel, types, params, callback }) {
    const eventName = generateEventName(channel, types);

    const listener = (data: ListenerType) => {
      if (types.includes("*") || types.includes(data.type)) {
        if (
          data.type !== "created" &&
          params?.ids !== undefined &&
          data.payload?.ids !== undefined
        ) {
          if (
            params.ids.filter((value) =>
              data.payload.ids.includes(value as string)
            ).length > 0
          ) {
            callback(data);
          }
        } else {
          callback(data);
        }
      }
    };
    socket.on(eventName, listener);
    return { eventName, listener };
  },
  unsubscribe({
    eventName,
    listener,
  }: {
    eventName: string;
    listener: () => void;
  }) {
    console.log("ubsub");
    socket.off(eventName, listener);
  },
  publish(event) {
    // socket.emit(generateEventName(event.channel, event.type), event.payload);
  },
});

const generateEventName = (channel: string, type: string | string[]) => {
  const channelName = channel.replace("resources/", "");
  return `database.table.${channelName}.${type}`;
};

export default liveProvider;


and server returns this data

created:

{
  channel: eventName,
  type: 'created',
  payload: { ids: [event.entity.id] },
  date: new Date()
}


deleted:

{
  channel: eventName,
  type: 'deleted',
  payload: { ids: [event.entityId] },
  date: new Date()
}

updatec:

{
  channel: eventName,
  type: 'updated',
  payload: { ids: [event.entity?.id] },
  date: new Date()
}


query:

{
  channel: eventName,
  type: '*',
  payload: { success: event.success },
  date: new Date()
}
Was this page helpful?