IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Socket: Added socketUsersHelper and applied changes by namespaces

Browse Source
This commit is contained in:
Alexey Safronov 2024-05-24 14:09:55 +04:00
parent cca0391c17
commit abb0fa6520
3 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
View File

@ -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)));

34
packages/shared/store/SettingsStore.ts
View File

@ -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 () => {

67
packages/shared/utils/socket.ts
View File

@ -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);
} }
}; };
} }