update react-player-list-tryout

louiscklaw · May 6, 2023 · bf7f081 · bf7f081
1 parent d1e89aa
commit bf7f081
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 10 deletions.
diff --git a/react-player-helloworld/react-player-list-tryout/client/src/components/App.jsx b/react-player-helloworld/react-player-list-tryout/client/src/components/App.jsx
@@ -19,18 +19,24 @@ function getRandomInt(max) {
 }
 
 const ReceiveJsonMessge = () =>{
-  const {lastJsonMessage} = useWebSocket(WS_URL, {
-    share: true,
-    filter: isDocumentEvent
-  });
-
+  try {
+    const {lastJsonMessage} = useWebSocket(WS_URL, {
+      share: true,
+      filter: isDocumentEvent
+    });
 
+    return(
+      <div>
+        {JSON.stringify(lastJsonMessage)}
+      </div>
+    )
+  } catch (error) {
+    throw(error);
+    return (
+      <>sorry some error occured</>
+    )
+  }
 
-  return(
-    <div>
-      {JSON.stringify(lastJsonMessage)}
-    </div>
-  )
 }
 
 const App = () =>{

diff --git a/react-player-helloworld/react-player-list-tryout/server.js b/react-player-helloworld/react-player-list-tryout/server.js
@@ -6,6 +6,12 @@ const app = express();
 app.use(express.json());
 
 app.use(express.static('client/dist'));
+app.use('/test', express.static('test'))
+
+app.post('/helloworld', (req, res) =>{
+  console.log(req)
+  res.send({hello: 'helloworld from server'})
+})
 
 app.listen(express_port, () => {
   console.log('Server is running at http://localhost:' + express_port);

diff --git a/react-player-helloworld/react-player-list-tryout/test/index.html b/react-player-helloworld/react-player-list-tryout/test/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  this is test page
+
+  <button id="hello_post_button">hello post button</button>
+
+  <script>
+
+    // Example POST method implementation:
+    async function postData(url = "", data = {}) {
+      // Default options are marked with *
+      const response = await fetch(url, {
+        method: "POST", // *GET, POST, PUT, DELETE, etc.
+        mode: "cors", // no-cors, *cors, same-origin
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "same-origin", // include, *same-origin, omit
+        headers: {
+          "Content-Type": "application/json",
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        redirect: "follow", // manual, *follow, error
+        referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      });
+      return response.json(); // parses JSON response into native JavaScript objects
+    }
+
+
+    document.addEventListener("DOMContentLoaded",()=>{
+      document.getElementById('hello_post_button').addEventListener('click',() =>{
+        postData("//localhost:3000/helloworld", { hello: "world" })
+        .then((data) => {
+          console.log(data); // JSON data parsed by `data.json()` call
+        });
+      })
+    })
+
+  </script>
+</body>
+</html>