experiment with json rpc on client

client/src/App.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { MathJaxContext } from "better-react-mathjax";
-
-import useWebSocket from 'react-use-websocket';
+import * as rpc from 'vscode-ws-jsonrpc';
 
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
@@ -14,6 +13,7 @@ import { AppBar, CssBaseline, Toolbar, Typography } from '@mui/material';
 import Welcome from './components/Welcome';
 import Level from './components/Level';
 import GoodBye from './components/GoodBye';
+import useWebSocket from 'react-use-websocket';
 
 function App() {
 	const [title, setTitle] = useState("")
@@ -22,9 +22,23 @@ function App() {
 	const [nbLevels, setNbLevels] = useState(0)
 	const [curLevel, setCurLevel] = useState(0)
 	const [finished, setFinished] = useState(false)
+	const [rpcConnection, setRpcConnection] = useState(null)
 
 	const socketUrl = 'ws://' + window.location.host + '/websocket/'
-	const { sendJsonMessage, lastMessage, lastJsonMessage } = useWebSocket(socketUrl)
+
+	const { sendJsonMessage, getWebSocket } = useWebSocket(socketUrl, {
+		onOpen: function (ev) {
+    	const logger = new rpc.ConsoleLogger();
+      const socket = rpc.toSocket(ev.target as WebSocket);
+			let rpcConnection = rpc.createWebSocketConnection(socket, logger)
+      setRpcConnection(rpcConnection);
+			rpcConnection.listen();
+			rpcConnection.onNotification("Hello!", () => {
+				console.log("Yes"); // This prints Hello World
+			});
+			rpcConnection.sendNotification("Hello!", 'Hello World');
+		}
+	})
 
 	const mathJaxConfig = {
 		loader: {
@@ -41,15 +55,15 @@ function App() {
 	function startGame() {
 		setCurLevel(1)
 	}
-	
-	let mainComponent;
-	if (finished) {
-	  mainComponent = <GoodBye message={conclusion} />
-	} else if (curLevel > 0) {
-	  mainComponent = <Level sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} nbLevels={nbLevels} level={curLevel} setCurLevel={setCurLevel} setLevelTitle={setLevelTitle} setFinished={setFinished}/>
-	} else {
-      mainComponent = <Welcome sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} setNbLevels={setNbLevels} setTitle={setTitle} startGame={startGame} setConclusion={setConclusion}/>
-	}
+
+	// let mainComponent;
+	// if (finished) {
+	//   mainComponent = <GoodBye message={conclusion} />
+	// } else if (curLevel > 0) {
+	//   mainComponent = <Level sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} nbLevels={nbLevels} level={curLevel} setCurLevel={setCurLevel} setLevelTitle={setLevelTitle} setFinished={setFinished}/>
+	// } else {
+  //     mainComponent = <Welcome sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} setNbLevels={setNbLevels} setTitle={setTitle} startGame={startGame} setConclusion={setConclusion}/>
+	// }
 
   return (
     <div className="App">
@@ -65,7 +79,7 @@ function App() {
 				</Typography>
 				</Toolbar>
 			</AppBar>
-			{mainComponent}
+			{/* {mainComponent} */}
 		</MathJaxContext>
     </div>
   )

package-lock.json

@@ -18,6 +18,7 @@
         "react-dom": "^18.2.0",
         "react-markdown": "^8.0.3",
         "react-use-websocket": "^4.2.0",
+        "vscode-ws-jsonrpc": "^2.0.0",
         "ws": "^8.9.0"
       },
       "devDependencies": {
@@ -7567,6 +7568,26 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.0.2.tgz",
+      "integrity": "sha512-RY7HwI/ydoC1Wwg4gJ3y6LpU9FJRZAUnTYMXthqhFXXu77ErDd/xkREpGuk4MyYkk4a+XDWAMqe0S3KkelYQEQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-ws-jsonrpc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-2.0.0.tgz",
+      "integrity": "sha512-FgTx05ARqmh2gy9k/e4imvr+7wVSXzd8AXE/Rd9d/eDXQwJPbaa7w+PLiswo3MX5FY0Ujk143w2ezELN/Dp14Q==",
+      "dependencies": {
+        "vscode-jsonrpc": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=16.11.0",
+        "npm": ">=8.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -13509,6 +13530,19 @@
         "unist-util-stringify-position": "^3.0.0"
       }
     },
+    "vscode-jsonrpc": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.0.2.tgz",
+      "integrity": "sha512-RY7HwI/ydoC1Wwg4gJ3y6LpU9FJRZAUnTYMXthqhFXXu77ErDd/xkREpGuk4MyYkk4a+XDWAMqe0S3KkelYQEQ=="
+    },
+    "vscode-ws-jsonrpc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-ws-jsonrpc/-/vscode-ws-jsonrpc-2.0.0.tgz",
+      "integrity": "sha512-FgTx05ARqmh2gy9k/e4imvr+7wVSXzd8AXE/Rd9d/eDXQwJPbaa7w+PLiswo3MX5FY0Ujk143w2ezELN/Dp14Q==",
+      "requires": {
+        "vscode-jsonrpc": "^8.0.2"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "react-use-websocket": "^4.2.0",
+    "vscode-ws-jsonrpc": "^2.0.0",
     "ws": "^8.9.0"
   },
   "devDependencies": {
@@ -28,10 +29,10 @@
     "concurrently": "^7.4.0",
     "css-loader": "^6.7.1",
     "nodemon": "^2.0.20",
+    "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
-    "react-refresh": "^0.14.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",