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;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()
}{
channel: eventName,
type: 'created',
payload: { ids: [event.entity.id] },
date: new Date()
}deleted:
{
channel: eventName,
type: 'deleted',
payload: { ids: [event.entityId] },
date: new Date()
}{
channel: eventName,
type: 'deleted',
payload: { ids: [event.entityId] },
date: new Date()
}updatec:
{
channel: eventName,
type: 'updated',
payload: { ids: [event.entity?.id] },
date: new Date()
}{
channel: eventName,
type: 'updated',
payload: { ids: [event.entity?.id] },
date: new Date()
}query:
{
channel: eventName,
type: '*',
payload: { success: event.success },
date: new Date()
}{
channel: eventName,
type: '*',
payload: { success: event.success },
date: new Date()
}