Web: Socket: Added socketUsersHelper and applied changes by namespaces
This commit is contained in:
parent
cca0391c17
commit
abb0fa6520
@ -147,7 +147,7 @@ const SessionsTableRow = (props) => {
|
|||||||
setSessionModalData,
|
setSessionModalData,
|
||||||
setUserSessionPanelVisible,
|
setUserSessionPanelVisible,
|
||||||
socketHelper,
|
socketHelper,
|
||||||
socketOnlineStatusHelper,
|
socketUsersHelper,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [users, setUsers] = useState([]);
|
const [users, setUsers] = useState([]);
|
||||||
@ -193,32 +193,32 @@ const SessionsTableRow = (props) => {
|
|||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// const userIds = item.userId;
|
// const userIds = item.userId;
|
||||||
|
|
||||||
// if (socketOnlineStatusHelper.isEnabled) {
|
// if (socketUsersHelper.isEnabled) {
|
||||||
// socketOnlineStatusHelper.emit({
|
// socketUsersHelper.emit({
|
||||||
// command: "getSessionsInPortal",
|
// command: "getSessionsInPortal",
|
||||||
// data: { userIds },
|
// data: { userIds },
|
||||||
// });
|
// });
|
||||||
// socketOnlineStatusHelper.on("statuses-in-room", (data) => {
|
// socketUsersHelper.on("statuses-in-room", (data) => {
|
||||||
// console.log(data);
|
// console.log(data);
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
// }, [socketOnlineStatusHelper]);
|
// }, [socketUsersHelper]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const userIds = item.userId;
|
const userIds = item.userId;
|
||||||
socketHelper.emit({
|
socketUsersHelper.emit({
|
||||||
command: "subscribe",
|
command: "subscribe",
|
||||||
data: { roomParts: "onlineusers" },
|
data: { roomParts: "onlineusers" },
|
||||||
});
|
});
|
||||||
|
|
||||||
socketHelper.emit({
|
socketUsersHelper.emit({
|
||||||
command: "getSessionsInPortal",
|
command: "getSessionsInPortal",
|
||||||
data: { userIds },
|
data: { userIds },
|
||||||
});
|
});
|
||||||
socketHelper.on("getSessionsInPortal", (data) => {
|
socketUsersHelper.on("getSessionsInPortal", (data) => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
});
|
});
|
||||||
}, [socketHelper]);
|
}, [socketUsersHelper]);
|
||||||
|
|
||||||
const isChecked = checkedProps.checked;
|
const isChecked = checkedProps.checked;
|
||||||
const isOnline = status === "Online";
|
const isOnline = status === "Online";
|
||||||
@ -322,7 +322,7 @@ export default inject(({ setup, dialogsStore, settingsStore }) => {
|
|||||||
setSessionModalData,
|
setSessionModalData,
|
||||||
} = setup;
|
} = setup;
|
||||||
|
|
||||||
const { socketHelper, socketOnlineStatusHelper } = settingsStore;
|
const { socketHelper, socketUsersHelper } = settingsStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
setLogoutAllDialogVisible,
|
setLogoutAllDialogVisible,
|
||||||
@ -330,6 +330,6 @@ export default inject(({ setup, dialogsStore, settingsStore }) => {
|
|||||||
setSessionModalData,
|
setSessionModalData,
|
||||||
setUserSessionPanelVisible,
|
setUserSessionPanelVisible,
|
||||||
socketHelper,
|
socketHelper,
|
||||||
socketOnlineStatusHelper,
|
socketUsersHelper,
|
||||||
};
|
};
|
||||||
})(withContent(observer(SessionsTableRow)));
|
})(withContent(observer(SessionsTableRow)));
|
||||||
|
@ -874,16 +874,36 @@ class SettingsStore {
|
|||||||
this.publicRoomKey = key;
|
this.publicRoomKey = key;
|
||||||
};
|
};
|
||||||
|
|
||||||
get socketHelper() {
|
sockerFilesClient: SocketIOHelper | null = null;
|
||||||
const socketUrl =
|
|
||||||
isPublicRoom() && !this.publicRoomKey ? "" : this.socketUrl;
|
|
||||||
|
|
||||||
return new SocketIOHelper(socketUrl, this.publicRoomKey);
|
socketUsersClient: SocketIOHelper | null = null;
|
||||||
|
|
||||||
|
get socketHelper() {
|
||||||
|
const socketUrl = isPublicRoom() && !this.publicRoomKey ? "" : "/socket.io"; // this.socketUrl;
|
||||||
|
|
||||||
|
if (!this.sockerFilesClient) {
|
||||||
|
this.sockerFilesClient = new SocketIOHelper(
|
||||||
|
socketUrl,
|
||||||
|
this.publicRoomKey,
|
||||||
|
"/files",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.sockerFilesClient;
|
||||||
}
|
}
|
||||||
|
|
||||||
get socketOnlineStatusHelper() {
|
get socketUsersHelper() {
|
||||||
const socketUrl = "/onlineusers";
|
const socketUrl = isPublicRoom() && !this.publicRoomKey ? "" : "/socket.io"; // this.socketUrl;
|
||||||
return new SocketIOHelper(socketUrl, this.publicRoomKey);
|
|
||||||
|
if (!this.socketUsersClient) {
|
||||||
|
this.socketUsersClient = new SocketIOHelper(
|
||||||
|
socketUrl,
|
||||||
|
this.publicRoomKey,
|
||||||
|
"/onlineusers",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.socketUsersClient;
|
||||||
}
|
}
|
||||||
|
|
||||||
getBuildVersionInfo = async () => {
|
getBuildVersionInfo = async () => {
|
||||||
|
@ -38,9 +38,6 @@ export type TOnCallback = {
|
|||||||
enableQuota: boolean;
|
enableQuota: boolean;
|
||||||
quota: number;
|
quota: number;
|
||||||
};
|
};
|
||||||
let client: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
|
|
||||||
let callbacks: { eventName: string; callback: (value: TOnCallback) => void }[] =
|
|
||||||
[];
|
|
||||||
|
|
||||||
const subscribers = new Set<string>();
|
const subscribers = new Set<string>();
|
||||||
|
|
||||||
@ -74,16 +71,24 @@ export type TConfig = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
class SocketIOHelper {
|
class SocketIOHelper {
|
||||||
|
client: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
|
||||||
|
|
||||||
|
callbacks: { eventName: string; callback: (value: TOnCallback) => void }[] =
|
||||||
|
[];
|
||||||
|
|
||||||
socketUrl: string | null = null;
|
socketUrl: string | null = null;
|
||||||
|
|
||||||
constructor(url: string, publicRoomKey: string) {
|
ns: string | undefined;
|
||||||
|
|
||||||
|
constructor(url: string, publicRoomKey: string, ns: string = "/files") {
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
|
|
||||||
this.socketUrl = url;
|
this.socketUrl = url;
|
||||||
|
this.ns = ns;
|
||||||
|
|
||||||
if (client) return;
|
if (this.client) return;
|
||||||
|
|
||||||
const origin = window.location.origin;
|
const origin = window.location.origin + ns;
|
||||||
|
|
||||||
const config: TConfig = {
|
const config: TConfig = {
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
@ -98,22 +103,22 @@ class SocketIOHelper {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
client = io(origin, config);
|
this.client = io(origin, config);
|
||||||
|
|
||||||
client.on("connect", () => {
|
this.client.on("connect", () => {
|
||||||
console.log("socket is connected");
|
console.log(`socket ${ns} is connected`);
|
||||||
if (callbacks?.length > 0) {
|
if (this.callbacks?.length > 0) {
|
||||||
callbacks.forEach(({ eventName, callback }) => {
|
this.callbacks.forEach(({ eventName, callback }) => {
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
client.on(eventName, callback);
|
this.client.on(eventName, callback);
|
||||||
});
|
});
|
||||||
callbacks = [];
|
this.callbacks = [];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
client.on("connect_error", (err) =>
|
this.client.on("connect_error", (err) =>
|
||||||
console.log("socket connect error", err),
|
console.log("socket connect error", err),
|
||||||
);
|
);
|
||||||
client.on("disconnect", () => console.log("socket is disconnected"));
|
this.client.on("disconnect", () => console.log("socket is disconnected"));
|
||||||
|
|
||||||
// DEV tests
|
// DEV tests
|
||||||
// window.socketHelper = this;
|
// window.socketHelper = this;
|
||||||
@ -130,7 +135,7 @@ class SocketIOHelper {
|
|||||||
emit = ({ command, data, room = null }: TEmit) => {
|
emit = ({ command, data, room = null }: TEmit) => {
|
||||||
if (!this.isEnabled) return;
|
if (!this.isEnabled) return;
|
||||||
|
|
||||||
console.log("[WS] emit", command, data, room);
|
console.log(`[WS] [NS:${this.ns}] emit`, command, data, room);
|
||||||
|
|
||||||
const ids =
|
const ids =
|
||||||
!data || !data.roomParts
|
!data || !data.roomParts
|
||||||
@ -151,42 +156,42 @@ class SocketIOHelper {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
|
|
||||||
if (!client.connected) {
|
if (!this.client.connected) {
|
||||||
client.on("connect", () => {
|
this.client.on("connect", () => {
|
||||||
if (room !== null) {
|
if (room !== null) {
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
// @ts-expect-error need refactoring
|
// @ts-expect-error need refactoring
|
||||||
client.to(room).emit(command, data);
|
client.to(room).emit(command, data);
|
||||||
} else {
|
} else {
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
client.emit(command, data);
|
this.client.emit(command, data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else if (room) {
|
} else if (room) {
|
||||||
// @ts-expect-error need refactoring
|
// @ts-expect-error need refactoring
|
||||||
client.to(room).emit(command, data);
|
client.to(room).emit(command, data);
|
||||||
} else {
|
} else {
|
||||||
client.emit(command, data);
|
this.client.emit(command, data);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
on = (eventName: string, callback: (value: TOptSocket) => void) => {
|
on = (eventName: string, callback: (value: TOptSocket) => void) => {
|
||||||
if (!this.isEnabled) {
|
if (!this.isEnabled) {
|
||||||
callbacks.push({ eventName, callback });
|
this.callbacks.push({ eventName, callback });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
|
|
||||||
if (!client.connected) {
|
if (!this.client.connected) {
|
||||||
client.on("connect", () => {
|
this.client.on("connect", () => {
|
||||||
if (!client) return;
|
if (!this.client) return;
|
||||||
client.on(eventName, callback);
|
this.client.on(eventName, callback);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
client.on(eventName, callback);
|
this.client.on(eventName, callback);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user