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>
   )