From 8b4bd29515e4011db949684fbf55db4519ebfd8a Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 6 Dec 2021 19:48:24 -0800 Subject: [PATCH] fix: Typescript dependency bundled in prod causes websocket connections to fail --- app/components/SocketProvider.tsx | 50 ++++++++++------ app/typings/index.d.ts | 2 + package.json | 3 +- yarn.lock | 94 +++++-------------------------- 4 files changed, 51 insertions(+), 98 deletions(-) diff --git a/app/components/SocketProvider.tsx b/app/components/SocketProvider.tsx index 9c726abfe..d75025c63 100644 --- a/app/components/SocketProvider.tsx +++ b/app/components/SocketProvider.tsx @@ -3,12 +3,20 @@ import { find } from "lodash"; import { observable } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; -import io, { Socket } from "socket.io-client"; +import io from "socket.io-client"; import RootStore from "~/stores/RootStore"; import withStores from "~/components/withStores"; import { getVisibilityListener, getPageVisible } from "~/utils/pageVisibility"; -type SocketWithAuthentication = Socket & { authenticated?: boolean }; +type SocketWithAuthentication = { + authenticated?: boolean; + disconnected: boolean; + disconnect: () => void; + close: () => void; + on: (event: string, callback: (data: any) => void) => void; + emit: (event: string, data: any) => void; + io: any; +}; export const SocketContext: any = React.createContext( null @@ -80,7 +88,7 @@ class SocketProvider extends React.Component { }); }); - this.socket.on("disconnect", (reason: string) => { + this.socket.on("disconnect", () => { // when the socket is disconnected we need to clear all presence state as // it's no longer reliable. presence.clear(); @@ -113,7 +121,7 @@ class SocketProvider extends React.Component { throw err; }); - this.socket.on("entities", async (event) => { + this.socket.on("entities", async (event: any) => { if (event.documentIds) { for (const documentDescriptor of event.documentIds) { const documentId = documentDescriptor.id; @@ -252,20 +260,21 @@ class SocketProvider extends React.Component { } }); - this.socket.on("documents.star", (event) => { + this.socket.on("documents.star", (event: any) => { documents.starredIds.set(event.documentId, true); }); - this.socket.on("documents.unstar", (event) => { + this.socket.on("documents.unstar", (event: any) => { documents.starredIds.set(event.documentId, false); }); - this.socket.on("documents.permanent_delete", (event) => { + this.socket.on("documents.permanent_delete", (event: any) => { documents.remove(event.documentId); }); + // received when a user is given access to a collection // if the user is us then we go ahead and load the collection from API. - this.socket.on("collections.add_user", (event) => { + this.socket.on("collections.add_user", (event: any) => { if (auth.user && event.userId === auth.user.id) { collections.fetch(event.collectionId, { force: true, @@ -277,10 +286,11 @@ class SocketProvider extends React.Component { policies.remove(document.id); }); }); + // received when a user is removed from having access to a collection // to keep state in sync we must update our UI if the user is us, // or otherwise just remove any membership state we have for that user. - this.socket.on("collections.remove_user", (event) => { + this.socket.on("collections.remove_user", (event: any) => { if (auth.user && event.userId === auth.user.id) { collections.remove(event.collectionId); memberships.removeCollectionMemberships(event.collectionId); @@ -290,7 +300,7 @@ class SocketProvider extends React.Component { } }); - this.socket.on("collections.update_index", (event) => { + this.socket.on("collections.update_index", (event: any) => { const collection = collections.get(event.collectionId); if (collection) { @@ -298,7 +308,7 @@ class SocketProvider extends React.Component { } }); - this.socket.on("fileOperations.update", async (event) => { + this.socket.on("fileOperations.update", async (event: any) => { const user = auth.user; let collection = null; if (event.collectionId) @@ -308,37 +318,43 @@ class SocketProvider extends React.Component { fileOperations.add({ ...event, user, collection }); } }); + // received a message from the API server that we should request // to join a specific room. Forward that to the ws server. - this.socket.on("join", (event) => { + this.socket.on("join", (event: any) => { this.socket?.emit("join", event); }); + // received a message from the API server that we should request // to leave a specific room. Forward that to the ws server. - this.socket.on("leave", (event) => { + this.socket.on("leave", (event: any) => { this.socket?.emit("leave", event); }); + // received whenever we join a document room, the payload includes // userIds that are present/viewing and those that are editing. - this.socket.on("document.presence", (event) => { + this.socket.on("document.presence", (event: any) => { presence.init(event.documentId, event.userIds, event.editingIds); }); + // received whenever a new user joins a document room, aka they // navigate to / start viewing a document - this.socket.on("user.join", (event) => { + this.socket.on("user.join", (event: any) => { presence.touch(event.documentId, event.userId, event.isEditing); views.touch(event.documentId, event.userId); }); + // received whenever a new user leaves a document room, aka they // navigate away / stop viewing a document - this.socket.on("user.leave", (event) => { + this.socket.on("user.leave", (event: any) => { presence.leave(event.documentId, event.userId); views.touch(event.documentId, event.userId); }); + // received when another client in a document room wants to change // or update it's presence. Currently the only property is whether // the client is in editing state or not. - this.socket.on("user.presence", (event) => { + this.socket.on("user.presence", (event: any) => { presence.touch(event.documentId, event.userId, event.isEditing); }); }; diff --git a/app/typings/index.d.ts b/app/typings/index.d.ts index 67bb9f21c..841810a5d 100644 --- a/app/typings/index.d.ts +++ b/app/typings/index.d.ts @@ -8,6 +8,8 @@ declare module "styled-components-breakpoint"; declare module "formidable/lib/file"; +declare module "socket.io-client"; + declare module "socket.io-redis" { import { Redis } from "ioredis"; diff --git a/package.json b/package.json index ac88f3772..70835e3ef 100644 --- a/package.json +++ b/package.json @@ -231,7 +231,7 @@ "@types/sequelize": "^4.28.10", "@types/slug": "^5.0.2", "@types/socket.io": "2.1.13", - "@types/socket.io-client": "^3.0.0", + "@types/socket.io-parser": "^2.2.1", "@types/stoppable": "^1.1.1", "@types/styled-components": "^5.1.15", "@types/throng": "^5.0.3", @@ -279,6 +279,7 @@ "yarn-deduplicate": "^3.1.0" }, "resolutions": { + "socket.io-parser": "^3.4.0", "prosemirror-view": "1.22.0", "dot-prop": "^5.2.0", "js-yaml": "^3.14.1" diff --git a/yarn.lock b/yarn.lock index 874e0e4e5..6d5998b55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2467,11 +2467,6 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@socket.io/component-emitter@~3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz#8863915676f837d9dad7b76f50cb500c1e9422e9" - integrity sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q== - "@surma/rollup-plugin-off-main-thread@^1.4.1": version "1.4.2" resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58" @@ -3216,13 +3211,6 @@ resolved "https://registry.yarnpkg.com/@types/slug/-/slug-5.0.2.tgz#1461545e8c23484fbded34ae6ff647c55cc09f28" integrity sha512-HFyrrOlpdLESwF4iuuoM0v66uo3Wm7R5rD6iZ5Odeej0dhcp1Crx0WaOzhmr19JtzUBr5NPH2JBTwxW4XUlkkg== -"@types/socket.io-client@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-3.0.0.tgz#d0b8ea22121b7c1df68b6a923002f9c8e3cefb42" - integrity sha512-s+IPvFoEIjKA3RdJz/Z2dGR4gLgysKi8owcnrVwNjgvc01Lk68LJDDsG2GRqegFITcxmvCMYM7bhMpwEMlHmDg== - dependencies: - socket.io-client "*" - "@types/socket.io-parser@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/socket.io-parser/-/socket.io-parser-3.0.0.tgz#9726d3ab9235757a0a30dd5ccf8975dce54e5e2c" @@ -3230,6 +3218,13 @@ dependencies: socket.io-parser "*" +"@types/socket.io-parser@^2.2.1": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@types/socket.io-parser/-/socket.io-parser-2.2.1.tgz#dc94aed303839487f4975249a32a548109ea3647" + integrity sha512-+JNb+7N7tSINyXPxAJb62+NcpC1x/fPn7z818W4xeNCdPTp6VsO/X8fCsg6+ug4a56m1v9sEiTIIUKVupcHOFQ== + dependencies: + "@types/node" "*" + "@types/socket.io@2.1.13": version "2.1.13" resolved "https://registry.yarnpkg.com/@types/socket.io/-/socket.io-2.1.13.tgz#b6d694234e99956c96ff99e197eda824b6f9dc48" @@ -4372,7 +4367,7 @@ babylon@^6.18.0: resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ== -backo2@1.0.2, backo2@~1.0.2: +backo2@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= @@ -4387,11 +4382,6 @@ base64-arraybuffer@0.1.4: resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812" integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI= -base64-arraybuffer@~1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz#87bd13525626db4a9838e00a508c2b73efcf348c" - integrity sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA== - base64-js@^1.0.2, base64-js@^1.2.0, base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -5822,10 +5812,10 @@ debug@3.1.0, debug@~3.1.0: dependencies: ms "2.0.0" -debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@~4.3.1, debug@~4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b" - integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw== +debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2: + version "4.3.3" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" + integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== dependencies: ms "2.1.2" @@ -6351,21 +6341,6 @@ engine.io-client@~3.5.0: xmlhttprequest-ssl "~1.6.2" yeast "0.1.2" -engine.io-client@~6.0.1: - version "6.0.3" - resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.0.3.tgz#59126c6fbf1846cd3b588a3869a0939e7bfb095c" - integrity sha512-IH8ZhDIwiLv0d/wXVzmjfV9Y82hbJIDhCGSVUV8o1kcpDe2I6Y3bZA3ZbJy4Ls7k7IVmcy/qn4k9RKWFhUGf5w== - dependencies: - "@socket.io/component-emitter" "~3.0.0" - debug "~4.3.1" - engine.io-parser "~5.0.0" - has-cors "1.1.0" - parseqs "0.0.6" - parseuri "0.0.6" - ws "~8.2.3" - xmlhttprequest-ssl "~2.0.0" - yeast "0.1.2" - engine.io-parser@~2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.2.1.tgz#57ce5611d9370ee94f99641b589f94c97e4f5da7" @@ -6377,13 +6352,6 @@ engine.io-parser@~2.2.0: blob "0.0.5" has-binary2 "~1.0.2" -engine.io-parser@~5.0.0: - version "5.0.2" - resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.2.tgz#69a2ec3ed431da021f0666712d07f106bcffa6ce" - integrity sha512-wuiO7qO/OEkPJSFueuATIXtrxF7/6GTbAO9QLv7nnbjwZ5tYhLm9zxvLwxstRs0dcT0KUlWTjtIOs1T86jt12g== - dependencies: - base64-arraybuffer "~1.0.1" - engine.io@~3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.5.0.tgz#9d6b985c8a39b1fe87cd91eb014de0552259821b" @@ -13591,18 +13559,6 @@ socket.io-adapter@~1.1.0: resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz#ab3f0d6f66b8fc7fca3959ab5991f82221789be9" integrity sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g== -socket.io-client@*: - version "4.3.2" - resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.3.2.tgz#9cfdb8fecac8a24d5723daf8c8749e70c8fdeb25" - integrity sha512-2B9LqSunN60yV8F7S84CCEEcgbYNfrn7ejIInZtLZ7ppWtiX8rGZAjvdCvbnC8bqo/9RlCNOUsORLyskxSFP1g== - dependencies: - "@socket.io/component-emitter" "~3.0.0" - backo2 "~1.0.2" - debug "~4.3.2" - engine.io-client "~6.0.1" - parseuri "0.0.6" - socket.io-parser "~4.1.1" - socket.io-client@2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.4.0.tgz#aafb5d594a3c55a34355562fc8aea22ed9119a35" @@ -13620,24 +13576,7 @@ socket.io-client@2.4.0: socket.io-parser "~3.3.0" to-array "0.1.4" -socket.io-parser@*, socket.io-parser@~4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.1.1.tgz#0ad53d980781cab1eabe320417d8480c0133e62d" - integrity sha512-USQVLSkDWE5nbcY760ExdKaJxCE65kcsG/8k5FDGZVVxpD1pA7hABYXYkCUvxUuYYh/+uQw0N/fvBzfT8o07KA== - dependencies: - "@socket.io/component-emitter" "~3.0.0" - debug "~4.3.1" - -socket.io-parser@~3.3.0: - version "3.3.2" - resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.2.tgz#ef872009d0adcf704f2fbe830191a14752ad50b6" - integrity sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg== - dependencies: - component-emitter "~1.3.0" - debug "~3.1.0" - isarray "2.0.1" - -socket.io-parser@~3.4.0: +socket.io-parser@*, socket.io-parser@^3.4.0, socket.io-parser@~3.3.0, socket.io-parser@~3.4.0: version "3.4.1" resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.4.1.tgz#b06af838302975837eab2dc980037da24054d64a" integrity sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A== @@ -15703,7 +15642,7 @@ ws@^7.2.3, ws@^7.5.3: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881" integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w== -ws@^8.2.3, ws@~8.2.3: +ws@^8.2.3: version "8.2.3" resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba" integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA== @@ -15784,11 +15723,6 @@ xmlhttprequest-ssl@~1.6.2: resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz#03b713873b01659dfa2c1c5d056065b27ddc2de6" integrity sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q== -xmlhttprequest-ssl@~2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67" - integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A== - xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"