добавлена логика для редиректа на стриминг

src/App.tsx

@@ -1,17 +1,82 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './App.css';
 import { ContextLang } from './components/ContextLang';
 import { Footer } from './components/footer/footer';
 import { MainPart } from './components/mainPart/mainPart';
+import { Ws } from './connections/ws';
+import { ContextWs } from './ContextWs';
+import { ConnectData } from './connections/connectData';
+
+type WsData = {
+  message: string
+  id: string
+  content?: boolean
+  port?: string
+}
 
 function App() {
   const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
+  const [wsEvent, setWsEvent] = useState<MessageEvent>(null);
+  const portAndId = useRef<{port: string, id:string}>()
+  let WS: Ws;
+  let ws: WebSocket;
+  
+
+  useEffect(() => {
+    WS = new Ws();
+    ws = WS.ws;
+    WS.WebSokets();
+    ws.onmessage = (e) => {
+      setWsEvent(e);
+      let messages = JSON.parse(e.data)
+
+      switch(messages.message) {        
+        case "EXIS_SESS":
+          console.log(`connecting to ${messages.content}`)
+          break;
+        case "PERSON_LIMIT":
+          alert("session limit for one person is 1")
+          break;
+        case "SESS_LIMIT":
+          alert("server session limit reached")
+          break;        
+        case "SESS_NOT_EXISTS":
+          alert(`session doesn't exists: ${messages?.id}`)
+          break;        
+        default:
+          console.log('msg from server: ', e.data)
+          break;
+      }
+
+      let data: WsData;
+      try {
+          data = JSON.parse(e.data) as WsData;
+      } catch {
+          return;
+      }
+      console.log(data)
+      if(data.message === 'SESS_CREATION') {
+        portAndId.current = ({id: data.id, port: data.port});
+      }      
+    }
+  }, []);
+
+  function createSess() {
+    ws.send('{ "message" : "NEW_SESS" }');
+  }
+
+  function connectSess() {
+    window.open('http://' + ConnectData.pixelIp + ":" + portAndId.current.port, '_blank');
+  }
+
   return (
     <div className="App">
-      <ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
+      <ContextWs.Provider value={{ws: ws, wsEvent: wsEvent}}>
-        <MainPart />
+        <ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
-        <Footer />
+          <MainPart createSess={createSess} connectSess={connectSess}/>
-      </ContextLang.Provider>      
+          <Footer />
+        </ContextLang.Provider>
+      </ContextWs.Provider>
     </div>
   );
 }

src/ContextWs.ts

@@ -0,0 +1,16 @@
+import React from "react";
+
+
+type Data = {
+    ws: WebSocket
+    wsEvent: MessageEvent
+}
+
+type WsData = {
+    message: string
+    id: string
+    content?: boolean
+    port?: string
+}
+
+export const ContextWs = React.createContext<Data>(null);

src/components/mainPart/contentContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { ContextWs } from "../../ContextWs";
 import { ContextLang } from "../ContextLang";
 import { PinkButton } from "./pinkButton";
 
@@ -19,8 +20,33 @@ type TProps = {
     accessCode?: string,
 }
 
+type WsData = {
+    message: string
+    id: string
+    content?: boolean
+    port?: string
+  }
+
 export const ContentContainer:React.FC<TProps> = React.memo((props) => {
+    const [accessCode, setAccessCode] = useState('------');
     let {lang} = useContext(ContextLang);
+    const {wsEvent} = useContext(ContextWs);
+
+    useEffect(() => {
+        if(!wsEvent) {
+            return;
+        }        
+        let data: WsData;
+        try {
+            data = JSON.parse(wsEvent.data) as WsData;
+        } catch {
+            return;
+        }
+        // console.log(data)
+        if(data?.message === 'SESS_CREATION') {
+            setAccessCode(data.id)
+        }
+    }, [wsEvent])
     
     return <div className="main-part-text-container">
         {
@@ -34,7 +60,7 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
         </span>
         {
             props.accessCode &&
-            <span className="main-part-text-access-code">{props.accessCode}</span>
+            <span className="main-part-text-access-code">{accessCode}</span>
         }
         <PinkButton
             onClick={props.onClickButton}

src/components/mainPart/mainPart.tsx

@@ -11,6 +11,12 @@ import { TimeSelector } from "./timeSelector/timeSelector";
 import { Form } from "./form/form";
 import { LangDict } from "../langDict";
 import { ContextLang } from "../ContextLang";
+import { ContextWs } from "../../ContextWs";
+
+type TProps = {
+    createSess: () => void,
+    connectSess: () => void
+}
 
 type FormData = {
     phone: string
@@ -18,10 +24,8 @@ type FormData = {
     firstName: string
 }
 
-export const MainPart: React.FC = React.memo(() => {
+export const MainPart: React.FC<TProps> = React.memo((props) => {    
-    // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
     const {lang, setLang} = useContext(ContextLang);
-    // const [changeContent, setChangeContent] = useState(0);
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
@@ -34,10 +38,7 @@ export const MainPart: React.FC = React.memo(() => {
         />
     const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
     const lastRender = currentContent;
-
+    const {ws, wsEvent} = useContext(ContextWs);
-    useEffect(() => {
-        // setChangeContent(changeContent + 1);
-    }, [currentContent]);    
 
     useEffect(() => {
         console.log(lang)
@@ -45,11 +46,7 @@ export const MainPart: React.FC = React.memo(() => {
         setCurrentContent(lastRender)
         
     }, [lang])
-
+    
-    useEffect(() => {
-        console.log('change')
-    }, [changeContent])
-
     function changeLang(lang: 'ru' | 'en') {
         setLang(lang);
         document.querySelector('html').lang = lang;
@@ -80,6 +77,7 @@ export const MainPart: React.FC = React.memo(() => {
     } 
 
     function onClickCreateNewDemo() {
+        props.createSess();
         changeContentFunc();
         setCurrentContent(
             <ContentContainer 
@@ -106,7 +104,8 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onClickConnect() {
-
+        props.connectSess()
+        // ws.send('{ "message" : "NEW_SESS" }');
     }
 
     function onSelectDay(date: {ru: string, en: string}) {

src/connections/connectData.ts

@@ -0,0 +1,5 @@
+export const ConnectData = {
+    pixelIp: "192.168.1.170",
+    url: `http://192.168.1.170`,
+    port: 13001
+}

src/connections/ws.ts

@@ -0,0 +1,16 @@
+import { ConnectData } from "./connectData";
+
+export class Ws {
+    ws: WebSocket;
+
+    constructor() {
+        this.ws = new WebSocket(`ws://${ConnectData.pixelIp}:${ConnectData.port}`);
+    }
+
+    WebSokets() {
+        this.ws.onopen = () => {
+            this.ws.send('{"message" : "NEW_USER"}');
+            console.log('ws connecting')
+        }
+    }
+}