added socket.io connection

package-lock.json

@@ -18,7 +18,8 @@
         "prism-react-renderer": "^1.3.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-modal": "^3.16.1"
+        "react-modal": "^3.16.1",
+        "socket.io-client": "^4.5.4"
       },
       "devDependencies": {
         "@docusaurus/core": "^2.2.0",
@@ -2865,6 +2866,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.3.1",
       "license": "MIT",
@@ -6238,6 +6244,46 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.10.0",
       "license": "MIT",
@@ -12843,6 +12889,32 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "license": "MIT",
@@ -14768,6 +14840,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "license": "MIT",
@@ -16659,6 +16739,11 @@
         "webpack-sources": "^3.2.2"
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "6.3.1",
       "requires": {}
@@ -18792,6 +18877,31 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
+    },
     "enhanced-resolve": {
       "version": "5.10.0",
       "requires": {
@@ -22722,6 +22832,26 @@
     "slugify": {
       "version": "1.6.5"
     },
+    "socket.io-client": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.24",
       "requires": {
@@ -23827,6 +23957,11 @@
     "xml-parser-xo": {
       "version": "3.2.0"
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2"
     },

package.json

@@ -20,6 +20,7 @@
     "clean-api-docs-all": "docusaurus clean-api-docs idn_v3 --plugin-id idn-api && docusaurus clean-api-docs idn_beta --plugin-id idn-api && docusaurus clean-api-docs iiq --plugin-id iiq-api",
     "rebuild-docs": "npm run clean-api-docs-all && npm run gen-api-docs-all"
   },
+  "proxy": "http://localhost:4202",
   "dependencies": {
     "@docusaurus/theme-mermaid": "^2.2.0",
     "@mdx-js/react": "^1.6.22",
@@ -31,7 +32,8 @@
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-modal": "^3.16.1"
+    "react-modal": "^3.16.1",
+    "socket.io-client": "^4.5.4"
   },
   "overrides": {
     "mermaid": "9.1.7"

src/components/stream/main/index.js

@@ -6,23 +6,52 @@ import WidgetBot from '@widgetbot/react-embed'
 import Modal from 'react-modal';
 import Room from "../room";
 import FAQ from "../faq";
+import { useState, useEffect } from 'react';
+import io from 'socket.io-client';
+
+
+const socket = io("http://localhost:4202");
 
-const customStyles = {
-  content: {
-    top: '20%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    transform: 'translate(-50%, -50%)',
-    background: '#FFFFFF',
-    boxShadow: '2px 3px 10px rgba(0, 0, 0, 0.25)',
-    borderRadius: '20px',
-  },
-};
 export default function Main() {
   const [modalIsOpen, setIsOpen] = React.useState(false);
   let subtitle;
+
+
+  const [isConnected, setIsConnected] = useState(socket.connected);
+  const [lastSpeaker, setLastSpeaker] = useState(null);
+
+  
+ useEffect(() => {
+  console.log("Creating effect");
+   socket.on("connect", () => {
+    console.log("Socket Connect");
+     setIsConnected(true);
+   });
+
+   socket.on("disconnect", () => {
+     setIsConnected(false);
+   });
+
+   socket.on("speaker", (msg) => {
+    console.log("recieved message")
+    setLastSpeaker(msg);
+  })
+
+  return () =>{
+    socket.off("connect");
+    socket.off("disconnect");
+    socket.off("speaker");
+  }
+ }, []); 
+ 
+
+
+
+
+
+
+
+
   Modal.setAppElement('#__docusaurus');
 
   function openModal() {
@@ -40,21 +69,27 @@ export default function Main() {
     <div>
       <div className={styles.headerContainer}>
         <div className={styles.headerContent}>
-          <div className={styles.headerText}>Let's talk platform</div>
+          <div className={styles.headerText}>{lastSpeaker?.main.topic}</div>
-          <div className={styles.timeText}>3:15 - 4:15 PM</div>
+          <div className={styles.timeText}>{lastSpeaker?.main.timeFrame}</div>
-          <div className={styles.speakerText}>JANE DOE, ENGINEERING MANAGER</div>
+          <div className={styles.speakerText}>{lastSpeaker?.main.presenter}</div>
         </div>
 
         <div className={styles.headerContent}>
           <div className={styles.buttonsContainer}>
             <div className={styles.buttonsContent}>
-              <div className={styles.button} onClick={openModal}>Agenda</div>
+              <div className={styles.button} onClick={openModal}>
+                Agenda
+              </div>
             </div>
             <div className={styles.buttonsContent}>
-              <div className={styles.button} onClick={openModal}>Speakers</div>
+              <div className={styles.button} onClick={openModal}>
+                Speakers
+              </div>
             </div>
             <div className={styles.buttonsContent}>
-              <div className={styles.button} onClick={openModal}>FAQ</div>
+              <div className={styles.button} onClick={openModal}>
+                FAQ
+              </div>
             </div>
           </div>
         </div>
@@ -62,7 +97,7 @@ export default function Main() {
       <div className={styles.center}>
         <div className={styles.stageButtonsContainer}>
           <div className={styles.stageButtonsContent}>
-              <div className={styles.stageButton}>Main Stage</div>
+            <div className={styles.stageButton}>Main Stage</div>
           </div>
           <div className={styles.stageButtonsContent}>
             <div className={styles.stageButton}>IdentityNow</div>
@@ -71,9 +106,8 @@ export default function Main() {
             <div className={styles.stageButton}>IdentityIQ</div>
           </div>
         </div>
-
       </div>
-      <Room></Room>
+      {/* <Room></Room> */}
 
       <Modal
         isOpen={modalIsOpen}
@@ -82,13 +116,16 @@ export default function Main() {
         className={styles.modal}
         contentLabel="FAQ"
       >
-        <FAQ        
+        <FAQ
           description={
             "if you stil can't find what you are looking for, reach out to us on our discussion board"
           }
           title={"Frequently Asked Questions"}
-          image={"/homepage/person-head.png"} ></FAQ>
+          image={"/homepage/person-head.png"}
-        <button className={styles.modalButton} onClick={closeModal}>Close</button>
+        ></FAQ>
+        <button className={styles.modalButton} onClick={closeModal}>
+          Close
+        </button>
       </Modal>
     </div>
   );

src/services/StreamService.js

@@ -0,0 +1,8 @@
+export async function getFAQ() {
+    try {
+        const response = await fetch('http://localhost:4200/faq');
+        return await response.json();
+    } catch (error) {
+        return [];
+    }
+}

src/setupProxy.js

@@ -0,0 +1,14 @@
+const proxy = require("http-proxy-middleware");
+const morgan = require("morgan");
+
+module.exports = app => {
+    app.use(
+        "/socket",
+        proxy({
+            target: "http://localhost:4202",
+            changeOrigin: true
+        })
+    )
+    app.use(morgan('combined'));
+    console.log(app);
+}