Добавлена работа с сокетами

ijl.config.js

@@ -21,6 +21,7 @@ module.exports = {
         },
     },
     config: {
-        key: 'value'
+        'hub-video-start.socket.url': 'value',
+        'hub-video-start.socket.path': 'value'
     }
 }

package-lock.json

@@ -16,6 +16,7 @@
                 "express": "^4.18.2",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
+                "socket.io-client": "^4.5.4",
                 "typescript": "^4.9.3"
             },
             "devDependencies": {
@@ -2161,8 +2162,7 @@
         "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==",
+            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
-            "dev": true
         },
         "node_modules/@types/cookie": {
             "version": "0.4.1",
@@ -3651,11 +3651,22 @@
                 "node": ">=10.0.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-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==",
-            "dev": true,
             "engines": {
                 "node": ">=10.0.0"
             }
@@ -7498,11 +7509,24 @@
             "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==",
             "dev": true
         },
+        "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==",
-            "dev": true,
             "dependencies": {
                 "@socket.io/component-emitter": "~3.1.0",
                 "debug": "~4.3.1"
@@ -8507,7 +8531,6 @@
             "version": "8.2.3",
             "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
             "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-            "dev": true,
             "engines": {
                 "node": ">=10.0.0"
             },
@@ -8524,6 +8547,14 @@
                 }
             }
         },
+        "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/yallist": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -10069,8 +10100,7 @@
         "@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==",
+            "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
-            "dev": true
         },
         "@types/cookie": {
             "version": "0.4.1",
@@ -11261,11 +11291,22 @@
                 }
             }
         },
+        "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"
+            }
+        },
         "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==",
+            "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
-            "dev": true
         },
         "enhanced-resolve": {
             "version": "5.12.0",
@@ -14183,11 +14224,21 @@
             "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==",
             "dev": true
         },
+        "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==",
-            "dev": true,
             "requires": {
                 "@socket.io/component-emitter": "~3.1.0",
                 "debug": "~4.3.1"
@@ -14903,9 +14954,13 @@
             "version": "8.2.3",
             "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
             "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-            "dev": true,
             "requires": {}
         },
+        "xmlhttprequest-ssl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+            "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+        },
         "yallist": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
         "express": "^4.18.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "socket.io-client": "^4.5.4",
         "typescript": "^4.9.3"
     }
 }

src/pages/main.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, {useState, useCallback, useRef} from 'react';
 import { getFeatures } from '@ijl/cli';
 
 import logo from '../assets/logo-white.svg';
@@ -19,6 +19,7 @@ import {
     StartInput,
     StartLabel,
 } from './style';
+import {socket} from "../socket";
 
 const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
 
@@ -65,11 +66,21 @@ const Input = ({ onStart }) => {
 }
 
 const Start = () => {
+    const socketRef = useRef({ sent: false })
+
+    const handleCheck = () => {
+        if (!socketRef.current.sent) {
+            socket.emit('play')
+            socketRef.current.sent = true
+        }
+    }
+
     return (
         <StartWrapper>
             <StartInput
                 id="check"
                 type="checkbox"
+                onChange={handleCheck}
             />
             <StartLabel
                 htmlFor='check'

src/socket.ts

@@ -0,0 +1,8 @@
+import {getConfigValue} from "@ijl/cli";
+import {io} from "socket.io-client";
+
+export const socket = io(getConfigValue('hub-video-start.socket.url'), { path: getConfigValue('hub-video-start.socket.path')});
+socket.on("connect", () => {
+    console.log('Socket connected', socket.id)
+})
+