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

Merge pull request #58 from ONLYOFFICE/feature/socket-refactoring

Browse Source 
Client: move socketSubscribersId from store to socketHelper
This commit is contained in:
Alexey Safronov 2023-10-30 15:48:29 +04:00 committed by GitHub
commit dad9313312
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/FilesSelector/FilesSelector.types.ts
View File

@ -50,7 +50,7 @@ export type setTotalCallback = (value: number) => number;
export type useSocketHelperProps = {
socketHelper: any;
socketSubscribersId: Set<string>;
socketSubscribers: Set<string>;
setItems: (callback: setItemsCallback) => void;
setBreadCrumbs: (callback: setBreadCrumbsCallback) => void;
setTotal: (callback: setTotalCallback) => void;
@ -204,7 +204,7 @@ export type FilesSelectorProps = {
includeFolder?: boolean;
socketHelper: any;
socketSubscribersId: Set<string>;
socketSubscribers: Set<string>;
currentDeviceType: "mobile" | "tablet" | "desktop";
embedded: boolean;

8
packages/client/src/components/FilesSelector/helpers/useSocketHelper.ts
View File

@ -11,7 +11,7 @@ import { convertRoomsToItems } from "./useRoomsHelper";
const useSocketHelper = ({
socketHelper,
socketSubscribersId,
socketSubscribers,
setItems,
setBreadCrumbs,
setTotal,
@ -23,9 +23,9 @@ const useSocketHelper = ({
const subscribe = (id: number) => {
const roomParts = `DIR-${id}`;
if (socketSubscribersId.has(roomParts)) return (subscribedId.current = id);
if (socketSubscribers.has(roomParts)) return (subscribedId.current = id);
if (subscribedId.current && !socketSubscribersId.has(roomParts)) {
if (subscribedId.current && !socketSubscribers.has(roomParts)) {
unsubscribe(subscribedId.current, false);
}
@ -45,7 +45,7 @@ const useSocketHelper = ({
subscribedId.current = null;
}
if (id && !socketSubscribersId.has(`DIR-${id}`)) {
if (id && !socketSubscribers.has(`DIR-${id}`)) {
socketHelper.emit({
command: "unsubscribe",
data: {

15
packages/client/src/components/FilesSelector/index.tsx
View File

@ -91,7 +91,7 @@ const FilesSelector = ({
includeFolder,
socketHelper,
socketSubscribersId,
socketSubscribers,
setMoveToPublicRoomVisible,
setInfoPanelIsMobileHidden,
currentDeviceType,
@ -129,7 +129,7 @@ const FilesSelector = ({
const { subscribe, unsubscribe } = useSocketHelper({
socketHelper,
socketSubscribersId,
socketSubscribers,
setItems,
setBreadCrumbs,
setTotal,
@ -569,12 +569,7 @@ export default inject(
}: any,
{ isCopy, isRestoreAll, isMove, isPanelVisible, id }: any
) => {
const {
id: selectedId,
parentId,
rootFolderType,
socketSubscribersId,
} = selectedFolderStore;
const { id: selectedId, parentId, rootFolderType } = selectedFolderStore;
const { setConflictDialogData, checkFileConflicts, setSelectedItems } =
filesActionsStore;
@ -614,6 +609,8 @@ export default inject(
const { theme, socketHelper, currentDeviceType } = auth.settingsStore;
const socketSubscribesId = socketHelper.socketSubscribers;
const {
selection,
bufferSelection,
@ -677,7 +674,7 @@ export default inject(
setInfoPanelIsMobileHidden,
includeFolder,
socketHelper,
socketSubscribersId,
socketSubscribers: socketSubscribesId,
setMoveToPublicRoomVisible,
currentDeviceType,
};

46
packages/client/src/store/FilesStore.js
View File

@ -174,7 +174,8 @@ class FilesStore {
const { socketHelper } = authStore.settingsStore;
socketHelper.on("s:modify-folder", async (opt) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
if (opt && opt.data) {
const data = JSON.parse(opt.data);
@ -183,8 +184,8 @@ class FilesStore {
: `DIR-${data.parentId}`;
if (
!socketSubscribersId.has(pathParts) &&
!socketSubscribersId.has(`DIR-${data.id}`)
!socketSubscribers.has(pathParts) &&
!socketSubscribers.has(`DIR-${data.id}`)
)
return;
}
@ -224,10 +225,10 @@ class FilesStore {
});
socketHelper.on("refresh-folder", (id) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
const pathParts = `DIR-${id}`;
if (!socketSubscribersId.has(pathParts)) return;
if (!socketSubscribers.has(pathParts)) return;
if (!id || this.clientLoadingStore.isLoading) return;
@ -245,10 +246,10 @@ class FilesStore {
});
socketHelper.on("s:markasnew-folder", ({ folderId, count }) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
const pathParts = `DIR-${folderId}`;
if (!socketSubscribersId.has(pathParts)) return;
if (!socketSubscribers.has(pathParts)) return;
console.log(`[WS] markasnew-folder ${folderId}:${count}`);
@ -263,10 +264,10 @@ class FilesStore {
});
socketHelper.on("s:markasnew-file", ({ fileId, count }) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
const pathParts = `FILE-${fileId}`;
if (!socketSubscribersId.has(pathParts)) return;
if (!socketSubscribers.has(pathParts)) return;
console.log(`[WS] markasnew-file ${fileId}:${count}`);
@ -285,10 +286,10 @@ class FilesStore {
//WAIT FOR RESPONSES OF EDITING FILE
socketHelper.on("s:start-edit-file", (id) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
const pathParts = `FILE-${id}`;
if (!socketSubscribersId.has(pathParts)) return;
if (!socketSubscribers.has(pathParts)) return;
const foundIndex = this.files.findIndex((x) => x.id === id);
if (foundIndex == -1) return;
@ -308,10 +309,10 @@ class FilesStore {
});
socketHelper.on("s:stop-edit-file", (id) => {
const { socketSubscribersId } = this.selectedFolderStore;
const { socketSubscribers } = socketHelper;
const pathParts = `FILE-${id}`;
if (!socketSubscribersId.has(pathParts)) return;
if (!socketSubscribers.has(pathParts)) return;
const foundIndex = this.files.findIndex((x) => x.id === id);
if (foundIndex == -1) return;
@ -870,14 +871,10 @@ class FilesStore {
setFiles = (files) => {
const { socketHelper } = this.authStore.settingsStore;
const { addSocketSubscribersId, deleteSocketSubscribersId } =
this.selectedFolderStore;
if (files.length === 0 && this.files.length === 0) return;
if (this.files?.length > 0) {
this.files.forEach((f) => {
deleteSocketSubscribersId(`FILE-${f.id}`);
});
socketHelper.emit({
command: "unsubscribe",
data: {
@ -890,10 +887,6 @@ class FilesStore {
this.files = files;
if (this.files?.length > 0) {
this.files.forEach((f) => {
addSocketSubscribersId(`FILE-${f.id}`);
});
socketHelper.emit({
command: "subscribe",
data: {
@ -911,16 +904,10 @@ class FilesStore {
};
setFolders = (folders) => {
const { addSocketSubscribersId, deleteSocketSubscribersId } =
this.selectedFolderStore;
const { socketHelper } = this.authStore.settingsStore;
if (folders.length === 0 && this.folders.length === 0) return;
if (this.folders?.length > 0) {
this.folders.forEach((f) => {
deleteSocketSubscribersId(`DIR-${f.id}`);
});
socketHelper.emit({
command: "unsubscribe",
data: {
@ -933,9 +920,6 @@ class FilesStore {
this.folders = folders;
if (this.folders?.length > 0) {
this.folders.forEach((f) => {
addSocketSubscribersId(`DIR-${f.id}`);
});
socketHelper.emit({
command: "subscribe",
data: {

15
packages/client/src/store/SelectedFolderStore.js
View File

@ -33,8 +33,6 @@ class SelectedFolderStore {
security = null;
inRoom = true;
socketSubscribersId = new Set();
constructor(settingsStore) {
makeAutoObservable(this);
this.settingsStore = settingsStore;
@ -106,7 +104,6 @@ class SelectedFolderStore {
this.rootFolderId = null;
this.security = null;
this.inRoom = true;
this.socketSubscribersId = new Set();
};
setParentId = (parentId) => {
@ -154,14 +151,6 @@ class SelectedFolderStore {
};
};
addSocketSubscribersId = (path) => {
this.socketSubscribersId.add(path);
};
deleteSocketSubscribersId = (path) => {
this.socketSubscribersId.delete(path);
};
setSelectedFolder = (selectedFolder) => {
const { socketHelper } = this.settingsStore;
@ -170,8 +159,6 @@ class SelectedFolderStore {
command: "unsubscribe",
data: { roomParts: `DIR-${this.id}`, individual: true },
});
this.deleteSocketSubscribersId(`DIR-${this.id}`);
}
if (selectedFolder) {
@ -179,8 +166,6 @@ class SelectedFolderStore {
command: "subscribe",
data: { roomParts: `DIR-${selectedFolder.id}`, individual: true },
});
this.addSocketSubscribersId(`DIR-${selectedFolder.id}`);
}
if (!selectedFolder) {

10
packages/client/src/store/TreeFoldersStore.js
View File

@ -29,14 +29,8 @@ class TreeFoldersStore {
listenTreeFolders = (treeFolders) => {
const { socketHelper } = this.authStore.settingsStore;
const { addSocketSubscribersId, deleteSocketSubscribersId } =
this.selectedFolderStore;
if (treeFolders.length > 0) {
treeFolders.forEach((f) => {
deleteSocketSubscribersId(`DIR-${f.id}`);
});
socketHelper.emit({
command: "unsubscribe",
data: {
@ -45,10 +39,6 @@ class TreeFoldersStore {
},
});
treeFolders.forEach((f) => {
addSocketSubscribersId(`DIR-${f.id}`);
});
socketHelper.emit({
command: "subscribe",
data: {

20
packages/common/utils/socket.js
View File

@ -2,6 +2,7 @@ import io from "socket.io-client";
let client = null;
let callbacks = [];
const subscribers = new Set();
class SocketIOHelper {
socketUrl = null;
@ -49,9 +50,28 @@ class SocketIOHelper {
return this.socketUrl !== null;
}
get socketSubscribers() {
return subscribers;
}
emit = ({ command, data, room = null }) => {
if (!this.isEnabled) return;
const ids =
typeof data.roomParts === "object" ? data.roomParts : [data.roomParts];
ids.forEach((id) => {
if (command === "subscribe") {
if (subscribers.has(id)) return;
subscribers.add(id);
}
if (command === "unsubscribe") {
subscribers.delete(id);
}
});
if (!client.connected) {
client.on("connect", () => {
if (room !== null) {