can finally connect

package-lock.json

@@ -9,13 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
-        "socket.io-client": "^3.0.0",
+        "socket.io-client": "^2.4.0",
         "vue": "^2.6.11",
         "vue-class-component": "^7.2.3",
         "vue-property-decorator": "^9.1.2"
       },
       "devDependencies": {
-        "@types/socket.io-client": "^3.0.0",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
         "@typescript-eslint/parser": "^4.18.0",
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1768,11 +1767,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/component-emitter": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
-      "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg=="
-    },
     "node_modules/@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -1905,16 +1899,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/socket.io-client": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-3.0.0.tgz",
-      "integrity": "sha512-s+IPvFoEIjKA3RdJz/Z2dGR4gLgysKi8owcnrVwNjgvc01Lk68LJDDsG2GRqegFITcxmvCMYM7bhMpwEMlHmDg==",
-      "deprecated": "This is a stub types definition. socket.io-client provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "socket.io-client": "*"
-      }
-    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -3204,6 +3188,11 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/after": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
+      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3418,6 +3407,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/arraybuffer.slice": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
+      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
+    },
     "node_modules/asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -3849,6 +3843,11 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "node_modules/blob": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
+      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -4835,11 +4834,21 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
+    "node_modules/component-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
+      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+    },
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "node_modules/component-inherit": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
+      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -5632,6 +5641,7 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -6239,15 +6249,16 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.1.4.tgz",
-      "integrity": "sha512-843fqAdKeUMFqKi1sSjnR11tJ4wi8sIefu6+JC1OzkkJBmjtc/gM/rZ53tJfu5Iae/3gApm5veoS+v+gtT0+Fg==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.2.tgz",
+      "integrity": "sha512-QEqIp+gJ/kMHeUun7f5Vv3bteRHppHH/FMBQX/esFj/fuYfjyUKWGMo3VCvIP/V8bE9KcjHmRZrhIz2Z9oNsDA==",
       "dependencies": {
-        "base64-arraybuffer": "0.1.4",
         "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~4.0.1",
+        "component-inherit": "0.0.3",
+        "debug": "~3.1.0",
+        "engine.io-parser": "~2.2.0",
         "has-cors": "1.1.0",
+        "indexof": "0.0.1",
         "parseqs": "0.0.6",
         "parseuri": "0.0.6",
         "ws": "~7.4.2",
@@ -6255,6 +6266,19 @@
         "yeast": "0.1.2"
       }
     },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
     "node_modules/engine.io-client/node_modules/ws": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
@@ -6276,14 +6300,15 @@
       }
     },
     "node_modules/engine.io-parser": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz",
-      "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz",
+      "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==",
       "dependencies": {
-        "base64-arraybuffer": "0.1.4"
-      },
-      "engines": {
-        "node": ">=8.0.0"
+        "after": "0.8.2",
+        "arraybuffer.slice": "~0.0.7",
+        "base64-arraybuffer": "0.1.4",
+        "blob": "0.0.5",
+        "has-binary2": "~1.0.2"
       }
     },
     "node_modules/enhanced-resolve": {
@@ -7979,6 +8004,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-binary2": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
+      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
+      "dependencies": {
+        "isarray": "2.0.1"
+      }
+    },
+    "node_modules/has-binary2/node_modules/isarray": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+      "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+    },
     "node_modules/has-cors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
@@ -8590,6 +8628,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "node_modules/indexof": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
+      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+    },
     "node_modules/infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -10110,7 +10153,8 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -13139,33 +13183,49 @@
       "dev": true
     },
     "node_modules/socket.io-client": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.1.3.tgz",
-      "integrity": "sha512-4sIGOGOmCg3AOgGi7EEr6ZkTZRkrXwub70bBB/F0JSkMOUFpA77WsL87o34DffQQ31PkbMUIadGOk+3tx1KGbw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.4.0.tgz",
+      "integrity": "sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==",
       "dependencies": {
-        "@types/component-emitter": "^1.2.10",
-        "backo2": "~1.0.2",
+        "backo2": "1.0.2",
+        "component-bind": "1.0.0",
         "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-client": "~4.1.0",
+        "debug": "~3.1.0",
+        "engine.io-client": "~3.5.0",
+        "has-binary2": "~1.0.2",
+        "indexof": "0.0.1",
+        "parseqs": "0.0.6",
         "parseuri": "0.0.6",
-        "socket.io-parser": "~4.0.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
+        "socket.io-parser": "~3.3.0",
+        "to-array": "0.1.4"
       }
     },
-    "node_modules/socket.io-parser": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
-      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/isarray": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+      "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+    },
+    "node_modules/socket.io-client/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/socket.io-client/node_modules/socket.io-parser": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.2.tgz",
+      "integrity": "sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==",
       "dependencies": {
-        "@types/component-emitter": "^1.2.10",
         "component-emitter": "~1.3.0",
-        "debug": "~4.3.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
+        "debug": "~3.1.0",
+        "isarray": "2.0.1"
       }
     },
     "node_modules/sockjs": {
@@ -14145,6 +14205,11 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/to-array": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
+      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+    },
     "node_modules/to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -17689,11 +17754,6 @@
         "@types/node": "*"
       }
     },
-    "@types/component-emitter": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
-      "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg=="
-    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -17826,15 +17886,6 @@
         "@types/node": "*"
       }
     },
-    "@types/socket.io-client": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-3.0.0.tgz",
-      "integrity": "sha512-s+IPvFoEIjKA3RdJz/Z2dGR4gLgysKi8owcnrVwNjgvc01Lk68LJDDsG2GRqegFITcxmvCMYM7bhMpwEMlHmDg==",
-      "dev": true,
-      "requires": {
-        "socket.io-client": "*"
-      }
-    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -18828,6 +18879,11 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "after": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
+      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -18978,6 +19034,11 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "arraybuffer.slice": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
+      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -19326,6 +19387,11 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "blob": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
+      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -20147,11 +20213,21 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
+    "component-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
+      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-inherit": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
+      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -20792,6 +20868,7 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -21279,15 +21356,16 @@
       }
     },
     "engine.io-client": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.1.4.tgz",
-      "integrity": "sha512-843fqAdKeUMFqKi1sSjnR11tJ4wi8sIefu6+JC1OzkkJBmjtc/gM/rZ53tJfu5Iae/3gApm5veoS+v+gtT0+Fg==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.2.tgz",
+      "integrity": "sha512-QEqIp+gJ/kMHeUun7f5Vv3bteRHppHH/FMBQX/esFj/fuYfjyUKWGMo3VCvIP/V8bE9KcjHmRZrhIz2Z9oNsDA==",
       "requires": {
-        "base64-arraybuffer": "0.1.4",
         "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~4.0.1",
+        "component-inherit": "0.0.3",
+        "debug": "~3.1.0",
+        "engine.io-parser": "~2.2.0",
         "has-cors": "1.1.0",
+        "indexof": "0.0.1",
         "parseqs": "0.0.6",
         "parseuri": "0.0.6",
         "ws": "~7.4.2",
@@ -21295,6 +21373,19 @@
         "yeast": "0.1.2"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
@@ -21304,11 +21395,15 @@
       }
     },
     "engine.io-parser": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz",
-      "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz",
+      "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==",
       "requires": {
-        "base64-arraybuffer": "0.1.4"
+        "after": "0.8.2",
+        "arraybuffer.slice": "~0.0.7",
+        "base64-arraybuffer": "0.1.4",
+        "blob": "0.0.5",
+        "has-binary2": "~1.0.2"
       }
     },
     "enhanced-resolve": {
@@ -22637,6 +22732,21 @@
       "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
       "dev": true
     },
+    "has-binary2": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
+      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
+      "requires": {
+        "isarray": "2.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        }
+      }
+    },
     "has-cors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
@@ -23106,6 +23216,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "indexof": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
+      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -24304,7 +24419,8 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -26813,27 +26929,51 @@
       }
     },
     "socket.io-client": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.1.3.tgz",
-      "integrity": "sha512-4sIGOGOmCg3AOgGi7EEr6ZkTZRkrXwub70bBB/F0JSkMOUFpA77WsL87o34DffQQ31PkbMUIadGOk+3tx1KGbw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.4.0.tgz",
+      "integrity": "sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==",
       "requires": {
-        "@types/component-emitter": "^1.2.10",
-        "backo2": "~1.0.2",
+        "backo2": "1.0.2",
+        "component-bind": "1.0.0",
         "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-client": "~4.1.0",
+        "debug": "~3.1.0",
+        "engine.io-client": "~3.5.0",
+        "has-binary2": "~1.0.2",
+        "indexof": "0.0.1",
+        "parseqs": "0.0.6",
         "parseuri": "0.0.6",
-        "socket.io-parser": "~4.0.4"
-      }
-    },
-    "socket.io-parser": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
-      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
-      "requires": {
-        "@types/component-emitter": "^1.2.10",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1"
+        "socket.io-parser": "~3.3.0",
+        "to-array": "0.1.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "socket.io-parser": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.2.tgz",
+          "integrity": "sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==",
+          "requires": {
+            "component-emitter": "~1.3.0",
+            "debug": "~3.1.0",
+            "isarray": "2.0.1"
+          }
+        }
       }
     },
     "sockjs": {
@@ -27653,6 +27793,11 @@
         "os-tmpdir": "~1.0.2"
       }
     },
+    "to-array": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
+      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -9,13 +9,12 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "socket.io-client": "^3.0.0",
+    "socket.io-client": "^2.4.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@types/socket.io-client": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/assets/js/__transport.socketio.js

@@ -0,0 +1,95 @@
+import { Subject } from "rxjs";
+import * as io from 'socket.io-client';
+// import { val } from "../src/common/obj-utility-methods";
+
+
+export class TestSocketIoClient {
+  socket = null
+  responses
+
+  disconnect() {
+    this.socket.close();
+    this.socket.disconnect();
+  }
+
+  connect(url) {
+    this.responses = new Subject()
+
+    const ws = io.connect(url)
+
+    ws.on('connecting',     (x) => { console.info('connecting', x);     });
+    ws.on('reconnecting',   (x) => { console.info('reconnecting', x);   });
+    ws.on('connect_failed', (x) => { console.info('connect_failed',x);  });
+    ws.on('error',          (x) => { console.info('error', x);          });
+    ws.on('disconnect',     (x) => { console.info('disconnect',x);      });
+    ws.on('connect',        (x) => { console.info('connect', x)         });
+    
+    ws.on('response', (data) => {
+      this.responses.next(data);
+    });
+
+    this.socket = ws;
+  }
+
+  getStreamOfResponsesFromRequest(request) {
+    const subject = new Subject();
+    
+    const id = this.sendRequest(request);
+    const subscription = this.responses.subscribe({
+      next: (data) => {
+        if ( data?.id != id ) { return }
+        if ( data?.complete ) return resultsComplete();
+        
+        const response = JSON.parse( data?.message ? data.message : {} )
+        subject.next(response)
+      },
+      complete: () => resultsComplete(),
+      error: () => resultsComplete(),
+    })
+
+    function resultsComplete(){
+      subject.complete();
+      try { subscription.unsubscribe() } 
+      catch (error) { console.info('error', error) }
+    }
+
+    return subject;
+  }
+
+  getAllResponsesFromRequest(request) {
+    const id = this.sendRequest(request);
+
+    return new Promise( (resolve) => {
+      const results = []
+      const subscription = this.responses.subscribe({
+        next: (data) => {
+          if ( data?.id != id ) { return }
+          if ( data.complete ) return resultsComplete()
+
+          const response = JSON.parse( data?.message ? data.message : {} )
+          results.push(response);
+        },
+        complete: () => resultsComplete(),
+        error: () => resultsComplete(),
+      })
+
+      function resultsComplete(){
+        resolve(results)
+        try { subscription.unsubscribe() }
+        catch (error) { console.info('error', error) }
+      }
+    });
+
+  }
+
+  sendRequest(request) {
+    const id = Math.round(Math.random() * 100000);
+    setTimeout(()=> {
+      this.socket.emit('request', {
+        id,
+        message: JSON.stringify(request)
+      })
+    }, 0);
+    return id;
+  }
+}

src/components/UIClient.vue

@@ -1,70 +1,42 @@
 <template>
   <div class="hello">
     <h1>Demo Message Client UI v1</h1>
-    <p><input type="text" v-model="url"></p>
     <p>
-      <button @click="socketioConnect">connect</button><button @click.prevent="loginFis">Login</button><button @click.prevent="logoutAllFis">LogoutAll</button>
-      <pre v-for="(info,i) in connectionInfo" :key="i">{{ info }}</pre>
+      <button @click="connect">connect</button>
+      <input type="text" v-model="url">
     </p>
     <ul>
       <transition-group name="fade">
-        <li v-for="session in sessions" :key="session.id">UCPID : {{ session.ucpId }}</li>
+        <li v-for="(client,i) in clients" :key="i">
+          <div> isConnected {{ client.socket.connected }} <a href="#" @click.prevent="disconnect(i)">disconnect</a> </div>
+        </li>
       </transition-group>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
+import { TestSocketIoClient } from "../assets/js/__transport.socketio"
 import { Component, Prop, Vue } from 'vue-property-decorator';
-// import { io, Socket } from "socket.io-client";
-import { io, Socket } from "socket.io-client";
-
-type fisSession = {
-  id:symbol,
-  ucpId: string,
-}
 
 @Component
 export default class UiClient extends Vue {
   @Prop() private msg!: string;
   
-  sessions: fisSession[] = [];
-  url = "http://swopt.com:3011";
-  connectionInfo: string[] = [];
-  socket: Socket|null = null;
-
-  socketioConnect(): void {
-    
-    const socket: Socket = io(this.url, {
-      reconnection: false
-    })
-    
-    socket.io.on("close", () => {
-      this.connectionInfo.push('close')
-    });
-
-    socket.io.on('open', () => {
-      this.connectionInfo.push('open')
-    })
+  clients: TestSocketIoClient[] = [];
+  url = 'http://swopt.com:3011';
 
-    // eslint-disable-next-line
-    socket.io.on('error', (err: any) => {
-      console.info(err)
-      this.connectionInfo.push(JSON.stringify(err))
-    })
-
-    this.socket = socket
+  disconnect(idx: number) {
+    console.info(idx)
+    this.clients[idx].disconnect()
   }
 
-  logoutAllFis(): void{
-    this.sessions = []
-  }
-  loginFis(): void{
-    this.sessions.push({
-      id: Symbol(),
-      ucpId: Math.round(Math.random() * 1000)+"",
-    })
+  connect(): void {
+    const client = new TestSocketIoClient()
+    client.connect(this.url)
+    this.clients.push(client)
   }
+
 }
 </script>