added socket.io connection

2025-12-06 04:19:31 +00:00 · 2022-12-02 14:54:38 -05:00
parent 161fb1f8bf
commit 95590456e3
5 changed files with 223 additions and 27 deletions
--- a/package-lock.json
+++ b/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"
    },
--- a/package.json
+++ b/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"
--- a/src/components/stream/main/index.js
+++ b/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.timeText}>3:15 - 4:15 PM</div>
-          <div className={styles.speakerText}>JANE DOE, ENGINEERING MANAGER</div>
+          <div className={styles.headerText}>{lastSpeaker?.main.topic}</div>
+          <div className={styles.timeText}>{lastSpeaker?.main.timeFrame}</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>
-        <button className={styles.modalButton} onClick={closeModal}>Close</button>
+          image={"/homepage/person-head.png"}
+        ></FAQ>
+        <button className={styles.modalButton} onClick={closeModal}>
+          Close
+        </button>
      </Modal>
    </div>
  );
--- a/src/services/StreamService.js
+++ b/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 [];
+    }
+}
--- a/src/setupProxy.js
+++ b/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);
+}