feat: add support for the msgpack parser

Related: #28

Author: darrachequesne

examples/single-server-msgpack-parser/index.js

@@ -0,0 +1,15 @@
+import { Server } from "socket.io";
+import { instrument } from "../../dist/index.js";
+import parser from "socket.io-msgpack-parser";
+
+const io = new Server(3000, {
+  cors: {
+    origin: ["https://admin.socket.io", "http://localhost:8080"],
+    credentials: true,
+  },
+  parser,
+});
+
+instrument(io, {
+  auth: false,
+});

examples/single-server-msgpack-parser/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "single-server-msgpack-parser",
+  "version": "0.0.1",
+  "description": "Sample server to be used with the Socket.IO Admin UI",
+  "private": true,
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "Damien Arrachequesne <damien.arrachequesne@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "socket.io": "^4.4.1",
+    "socket.io-msgpack-parser": "^3.0.1"
+  }
+}

ui/package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "socket.io-msgpack-parser": "^3.0.1",
     "vue": "^2.6.11",
     "vue-i18n": "^8.22.3",
     "vue-router": "^3.2.0",
@@ -33,7 +34,7 @@
     "prettier": "^2.2.1",
     "sass": "^1.32.0",
     "sass-loader": "^10.0.0",
-    "socket.io-client": "^4.0.1",
+    "socket.io-client": "^4.5.0",
     "vue-chartjs": "^3.5.1",
     "vue-cli-plugin-i18n": "~2.0.3",
     "vue-cli-plugin-vuetify": "~2.3.1",

ui/package.json

@@ -17,6 +17,7 @@
       :initial-server-url="serverUrl"
       :initial-ws-only="wsOnly"
       :initial-path="path"
+      :initial-parser="parser"
       :is-connecting="isConnecting"
       :error="connectionError"
       @submit="onSubmit"
@@ -28,6 +29,7 @@
 import AppBar from "./components/AppBar";
 import NavigationDrawer from "./components/NavigationDrawer";
 import { io } from "socket.io-client";
+import msgpackParser from "socket.io-msgpack-parser";
 import ConnectionModal from "./components/ConnectionModal";
 import SocketHolder from "./SocketHolder";
 import { mapState } from "vuex";
@@ -63,6 +65,7 @@ export default {
       serverUrl: (state) => state.connection.serverUrl,
       wsOnly: (state) => state.connection.wsOnly,
       path: (state) => state.connection.path,
+      parser: (state) => state.connection.parser,
       backgroundColor: (state) =>
         state.config.darkTheme ? "" : "grey lighten-5",
     }),
@@ -84,7 +87,7 @@ export default {
   },
 
   methods: {
-    tryConnect(serverUrl, auth, wsOnly, path) {
+    tryConnect(serverUrl, auth, wsOnly, path, parser) {
       this.isConnecting = true;
       if (SocketHolder.socket) {
         SocketHolder.socket.disconnect();
@@ -98,6 +101,7 @@ export default {
         withCredentials: true, // needed for cookie-based sticky-sessions
         transports: wsOnly ? ["websocket"] : ["polling", "websocket"],
         path,
+        parser: parser === "msgpack" ? msgpackParser : null,
         auth,
       });
       socket.once("connect", () => {
@@ -110,6 +114,7 @@ export default {
           serverUrl,
           wsOnly,
           path,
+          parser,
         });
         SocketHolder.socket = socket;
         this.registerEventListeners(socket);
@@ -121,10 +126,16 @@ export default {
         if (this.isConnecting || err.message === "invalid credentials") {
           this.showConnectionModal = true;
           this.connectionError = err.message;
-          this.isConnecting = false;
         }
+        this.isConnecting = false;
       });
-      socket.on("disconnect", () => {
+      socket.on("disconnect", (reason) => {
+        // this should not be needed, but connection errors with a mismatching parser may trigger in a "disconnect"
+        // event instead of a "connect_error" event (needs to be fixed in the client code)
+        if (this.isConnecting) {
+          this.isConnecting = false;
+          this.connectionError = reason;
+        }
         this.$store.commit("connection/disconnect");
       });
     },
@@ -171,7 +182,8 @@ export default {
           password: form.password,
         },
         form.wsOnly,
-        form.path
+        form.path,
+        form.parser
       );
     },
   },
@@ -187,7 +199,8 @@ export default {
           sessionId,
         },
         this.wsOnly,
-        this.path
+        this.path,
+        this.parser
       );
     } else {
       this.showConnectionModal = true;

ui/src/App.vue

@@ -37,6 +37,12 @@
             :label="$t('connection.path')"
           ></v-text-field>
 
+          <v-select
+            v-model="parser"
+            :label="$t('connection.parser')"
+            :items="parserOptions"
+          />
+
           <v-btn
             :loading="isConnecting"
             :disabled="isConnecting || !isValid"
@@ -63,6 +69,7 @@ export default {
     initialServerUrl: String,
     initialWsOnly: Boolean,
     initialPath: String,
+    initialParser: String,
     error: String,
   },
 
@@ -73,6 +80,17 @@ export default {
       path: this.initialPath,
       username: "",
       password: "",
+      parser: this.initialParser,
+      parserOptions: [
+        {
+          value: "default",
+          text: this.$t("connection.default-parser"),
+        },
+        {
+          value: "msgpack",
+          text: this.$t("connection.msgpack-parser"),
+        },
+      ],
     };
   },
 
@@ -95,6 +113,7 @@ export default {
         path: this.path,
         username: this.username,
         password: this.password,
+        parser: this.parser,
       });
     },
   },

ui/src/components/ConnectionModal.vue

@@ -24,7 +24,10 @@
     "invalid-credentials": "Invalid credentials",
     "error": "Error",
     "websocket-only": "WebSocket only?",
-    "path": "Path"
+    "path": "Path",
+    "parser": "Parser",
+    "default-parser": "Built-in parser",
+    "msgpack-parser": "MessagePack parser"
   },
   "dashboard": {
     "title": "Dashboard"

ui/src/locales/en.json

@@ -6,6 +6,7 @@ export default {
     serverUrl: "",
     wsOnly: false,
     path: "/socket.io",
+    parser: "default",
     sessionId: "",
     connected: false,
   },
@@ -16,16 +17,19 @@ export default {
         state.wsOnly = localStorage.getItem("ws_only") === "true";
         state.sessionId = localStorage.getItem("session_id");
         state.path = localStorage.getItem("path") || "/socket.io";
+        state.parser = localStorage.getItem("parser") || "default";
       }
     },
-    saveConfig(state, { serverUrl, wsOnly, path }) {
+    saveConfig(state, { serverUrl, wsOnly, path, parser }) {
       state.serverUrl = serverUrl;
       state.wsOnly = wsOnly;
       state.path = path;
+      state.parser = parser;
       if (isLocalStorageAvailable) {
         localStorage.setItem("server_url", serverUrl);
         localStorage.setItem("ws_only", wsOnly);
         localStorage.setItem("path", path);
+        localStorage.setItem("parser", parser);
       }
     },
     saveSessionId(state, sessionId) {