Merge pull request slowlydev#71 from Slowlydev/feature/compression

feat(f1-service): encode is deflating the data

dash/package.json

@@ -16,13 +16,15 @@
 		"framer-motion": "10.16.4",
 		"moment": "2.29.4",
 		"next": "14.0.1",
+		"pako": "2.1.0",
 		"react": "18.2.0",
 		"react-chartjs-2": "5.2.0",
 		"react-dom": "18.2.0",
 		"zod": "3.22.4"
 	},
 	"devDependencies": {
 		"@types/node": "18.15.5",
+		"@types/pako": "^2.0.3",
 		"@types/react": "18.2.33",
 		"@types/react-dom": "18.2.14",
 		"autoprefixer": "10.4.14",

dash/src/app/(socket)/layout.tsx

@@ -11,6 +11,7 @@ import DelayInput from "@/components/DelayInput";
 import SessionInfo from "@/components/SessionInfo";
 import TrackInfo from "@/components/TrackInfo";
 import ConnectionStatus from "@/components/ConnectionStatus";
+import { decode } from "@/lib/inflate";
 
 type BufferFrame = {
 	timestamp: number;
@@ -64,7 +65,7 @@ const SubLayout = ({ children }: Props) => {
 		socket.onopen = () => setConnected(true);
 
 		socket.onmessage = (event) => {
-			const state: State = JSON.parse(event.data);
+			const state: State = decode(event.data);
 
 			if (Object.keys(state).length === 0) return;
 

dash/src/lib/inflate.ts

@@ -0,0 +1,10 @@
+import { inflate } from "pako";
+
+export const decode = <T>(data: string): T => {
+	return JSON.parse(
+		inflate(
+			Uint8Array.from(atob(data), (c) => c.charCodeAt(0)),
+			{ to: "string" },
+		),
+	);
+};

dash/yarn.lock

@@ -246,6 +246,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pako@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@types/pako@npm:2.0.3"
+  checksum: 0746dd5d29eccf5b2e6cceb3ccb093851219e78bd2e2e20d25757e247987139e061e5d4ba37cb5295493f06e3c683c74f8876011cd8a3f3748a09244fbc841d9
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"
@@ -756,6 +763,7 @@ __metadata:
   dependencies:
     "@headlessui/react": 1.7.17
     "@types/node": 18.15.5
+    "@types/pako": ^2.0.3
     "@types/react": 18.2.33
     "@types/react-dom": 18.2.14
     autoprefixer: 10.4.14
@@ -764,6 +772,7 @@ __metadata:
     framer-motion: 10.16.4
     moment: 2.29.4
     next: 14.0.1
+    pako: 2.1.0
     postcss: 8.4.31
     prettier: 3.0.3
     prettier-plugin-tailwindcss: 0.5.6
@@ -1602,6 +1611,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:2.1.0":
+  version: 2.1.0
+  resolution: "pako@npm:2.1.0"
+  checksum: 71666548644c9a4d056bcaba849ca6fd7242c6cf1af0646d3346f3079a1c7f4a66ffec6f7369ee0dc88f61926c10d6ab05da3e1fca44b83551839e89edd75a3e
+  languageName: node
+  linkType: hard
+
 "path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"

data/src/f1/f1.service.ts

@@ -1,6 +1,7 @@
 import { config } from "lib/config";
 import { emit, emitter, subscribe } from "lib/event";
 import { debug, error, info } from "lib/logger";
+import { deflateSync } from "zlib";
 import { updateState } from "./f1.handler";
 import { translate } from "./f1.translator";
 import { F1State } from "./f1.type";
@@ -86,8 +87,7 @@ const connect = (negotiation: Negotiation): Promise<WebSocket | null> => {
 };
 
 const encode = (data: F1State): string => {
-	// TODO: implement inflation and coordinate with frontend
-	return JSON.stringify(translate(data));
+	return deflateSync(JSON.stringify(translate(data))).toString("base64");
 };
 
 const setup = async (): Promise<void> => {