diff options
| -rw-r--r-- | package-lock.json | 39 | ||||
| -rw-r--r-- | src/fields/List.ts | 8 | ||||
| -rw-r--r-- | src/fields/util.ts | 2 | ||||
| -rw-r--r-- | src/server/websocket.ts | 75 | ||||
| -rw-r--r-- | views/stats.pug | 4 |
5 files changed, 82 insertions, 46 deletions
diff --git a/package-lock.json b/package-lock.json index 111d1838a..196906718 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5597,16 +5597,6 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, - "d": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", - "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", - "dev": true, - "requires": { - "es5-ext": "^0.10.50", - "type": "^1.0.1" - } - }, "d3": { "version": "7.8.4", "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz", @@ -6987,28 +6977,6 @@ "is-symbol": "^1.0.2" } }, - "es5-ext": { - "version": "0.10.62", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz", - "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==", - "dev": true, - "requires": { - "es6-iterator": "^2.0.3", - "es6-symbol": "^3.1.3", - "next-tick": "^1.1.0" - } - }, - "es6-iterator": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", - "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", - "dev": true, - "requires": { - "d": "1", - "es5-ext": "^0.10.35", - "es6-symbol": "^3.1.1" - } - }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -7020,7 +6988,6 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { - "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -22693,12 +22660,6 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, - "type": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", - "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", - "dev": true - }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/src/fields/List.ts b/src/fields/List.ts index e33627be5..dfd24cf7a 100644 --- a/src/fields/List.ts +++ b/src/fields/List.ts @@ -77,10 +77,16 @@ const listHandlers: any = { item[OnUpdate] = updateFunction(list, i + start, item, this); } } + let hintArray: {val : any, index : number}[] = []; + for(let i = start; i < start + deleteCount; i++) { + hintArray.push({val : list.__fields[i], index : i}); + } const res = list.__fields.splice(start, deleteCount, ...items); + // the hint object sends the starting index of the slice and the number + // of elements to delete. this[Update]( items.length === 0 && deleteCount - ? { op: '$remFromSet', items: removed, length: list.__fields.length } + ? { op: '$remFromSet', items: removed, hint : { start : start, deleteCount : deleteCount }, length: list.__fields.length } : items.length && !deleteCount && start === list.__fields.length ? { op: '$addToSet', items, length: list.__fields.length } : undefined diff --git a/src/fields/util.ts b/src/fields/util.ts index 92f3a69eb..d5b55867e 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -377,7 +377,7 @@ export function updateFunction(target: any, prop: any, value: any, receiver: any diff?.op === '$addToSet' ? { $addToSet: { ['fields.' + prop]: SerializationHelper.Serialize(new List<Doc>(diff.items)) } } : diff?.op === '$remFromSet' - ? { $remFromSet: { ['fields.' + prop]: SerializationHelper.Serialize(new List<Doc>(diff.items)) } } + ? { $remFromSet: { ['fields.' + prop]: SerializationHelper.Serialize(new List<Doc>(diff.items)), hint : diff.hint } } : { $set: { ['fields.' + prop]: SerializationHelper.Serialize(value) } }; !op.$set && ((op as any).length = diff.length); const prevValue = ObjectField.MakeCopy(lastValue as List<any>); diff --git a/src/server/websocket.ts b/src/server/websocket.ts index 2acdaa5a3..e94b48f4f 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -317,15 +317,83 @@ export namespace WebSocket { ); } + /** + * findClosestIndex() is a helper function that will try to find + * the closest index of a list that has the same value as + * a specified argument/index pair. + * @param list the list to search through + * @param indexesToDelete a list of indexes that are already marked for deletion + * so they will be ignored + * @param value the value of the item to remove + * @param hintIndex the index that the element was at on the client's copy of + * the data + * @returns the closest index with the same value or -1 if the element was not found. + */ + function findClosestIndex(list: any, indexesToDelete: number[], value: any, hintIndex : number) { + let closestIndex = -1; + for(let i = 0; i < list.length; i++) { + if(list[i] == value && !indexesToDelete.includes(i)) { + if(Math.abs(i - hintIndex) < Math.abs(closestIndex - hintIndex)) { + closestIndex = i; + } + } + } + return closestIndex; + } + + /** + * remFromListField() receives the items to remove and a hint + * from the client, and attempts to make the modification to the + * server's copy of the data. If server's copy does not match + * the client's after removal, the server will SEND BACk + * its version to the client. + * @param socket the socket that the client is connected on + * @param diff an object containing the items to remove and a hint + * (the hint contains start index and deleteCount, the number of + * items to delete) + * @param curListItems the server's current copy of the data + */ function remFromListField(socket: Socket, diff: Diff, curListItems?: Transferable): void { diff.diff.$set = diff.diff.$remFromSet; delete diff.diff.$remFromSet; const updatefield = Array.from(Object.keys(diff.diff.$set))[0]; const remListItems = diff.diff.$set[updatefield].fields; const curList = (curListItems as any)?.fields?.[updatefield.replace('fields.', '')]?.fields.filter((f: any) => f !== null) || []; - diff.diff.$set[updatefield].fields = curList?.filter( - (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId : remItem.heading ? remItem.heading === curItem.heading : remItem === curItem)) - ); + const hint = diff.diff.$set.hint; + + + if(hint) { + // indexesToRemove stores the indexes that we mark for deletion, which is later used to filter the list (delete the elements) + let indexesToRemove: number[] = []; + for(let i = 0; i < hint.deleteCount; i++) { + if(curList[i + hint.start] == remListItems[i]) { + indexesToRemove.push(i + hint.start); + continue; + } + + let closestIndex = findClosestIndex(curList, indexesToRemove, remListItems[i], i + hint.start); + if(closestIndex != -1) { + indexesToRemove.push(closestIndex); + } else { + console.log("Item to delete was not found - index = -1"); + } + } + + diff.diff.$set[updatefield].fields = curList?.filter( + (curItem: any, index : number) => !(indexesToRemove.includes(index)) + ); + } else { + // go back to the original way to delete if we didn't receive + // a hint from the client + diff.diff.$set[updatefield].fields = curList?.filter( + (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId : + remItem.heading ? remItem.heading === curItem.heading : remItem === curItem)) + ); + } + + // if the client and server have different versions of the data after + // deletion, they will have different lengths and the server will + // send its version of the data to the client const sendBack = diff.diff.length !== diff.diff.$set[updatefield].fields.length; delete diff.diff.length; Database.Instance.update( @@ -333,6 +401,7 @@ export namespace WebSocket { diff.diff, () => { if (sendBack) { + // the two copies are different, so the server sends its copy. console.log('SEND BACK'); const id = socket.id; socket.id = ''; diff --git a/views/stats.pug b/views/stats.pug index 16c28087e..c1f961e9f 100644 --- a/views/stats.pug +++ b/views/stats.pug @@ -5,11 +5,11 @@ block content style include ./stylesheets/authentication.css include ./stylesheets/statsview.css - script(src=`http://localhost:4321/socket.io/socket.io.js`) + script(src=`https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.5.0/socket.io.js`) script include ./resources/statsviewcontroller.js script. - var socket = io.connect("http://localhost:4321"); + var socket = io.connect(`http://${window.location.hostname}:4321`); socket.on("connect", () => console.log("connected to socket")); socket.on("a2cf757f-abd7-537b-953e-ef2f4f798f7e", (data) => handleStatsUpdate(data)); |