Web Socket Service - Copy this React, Tailwind Component to your project

Build code mobile by this constructor. i have BE, i need connect FE with BE by websocket realtime data. help me:smart home project/ ├── backend/ │ ├── src/ │ │ ├── controllers/ │ │ │ ├── authController.js # Xử lý xác thực người dùng │ │ │ ├── deviceController.js # Quản lý thiết bị IoT │ │ │ └── userController.js # Quản lý người dùng │ │ ├── models/ │ │ │ ├── userModel.js # Mô hình người dùng │ │ │ ├── deviceModel.js # Mô hình thiết bị IoT │ │ │ └── logModel.js # Mô hình log dữ liệu │ │ ├── routes/ │ │ │ ├── authRoutes.js # Routes xác thực │ │ │ ├── deviceRoutes.js # Routes thiết bị │ │ │ └── userRoutes.js # Routes người dùng │ │ ├── middleware/ │ │ │ ├── auth.js # JWT authentication │ │ │ ├── errorHandler.js # Xử lý lỗi chung │ │ │ ├── rateLimiter.js # Giới hạn request │ │ │ └── validator.js # Validate input │ │ ├── services/ │ │ │ ├── deviceManager.js # Quản lý thiết bị │ │ │ ├── socketService.js # Xử lý WebSocket │ │ │ └── cacheService.js # Redis cache │ │ ├── utils/ │ │ │ ├── logger.js # Winston logger │ │ │ ├── helpers.js # Helper functions │ │ │ └── constants.js # Các hằng số │ │ └── socket/ │ │ ├── socketHandler.js # Xử lý sự kiện socket │ │ └── socketMiddleware.js # Middleware socket │ ├── config/ │ │ ├── database.js # Cấu hình DB │ │ ├── redis.js # Cấu hình Redis │ │ └── socket.js # Cấu hình Socket.IO │ ├── tests/ │ │ ├── unit/ # Unit tests │ │ └── integration/ # Integration tests │ ├── server.js # Entry point │ └── package.json │ ├── mobile app/ │ ├── app/ │ │ ├── screens/ │ │ │ ├── auth/ │ │ │ │ ├── LoginScreen.tsx │ │ │ │ └── RegisterScreen.tsx │ │ │ ├── devices/ │ │ │ │ ├── DeviceListScreen.tsx │ │ │ │ └── DeviceDetailScreen.tsx │ │ │ └── settings/ │ │ │ └── SettingsScreen.tsx │ │ ├── components/ │ │ │ ├── common/ │ │ │ │ ├── Button.tsx │ │ │ │ ├── Card.tsx │ │ │ │ └── Loading.tsx │ │ │ ├── devices/ │ │ │ │ ├── DeviceCard.tsx │ │ │ │ └── DeviceControls.tsx │ │ │ └── layout/ │ │ │ ├── Header.tsx │ │ │ └── Container.tsx │ │ ├── context/ │ │ │ ├── AuthContext.tsx │ │ │ └── DeviceContext.tsx │ │ ├── hooks/ │ │ │ ├── useAuth.ts │ │ │ ├── useDevice.ts │ │ │ └── useWebSocket.ts │ │ ├── services/ │ │ │ ├── api.ts │ │ │ └── websocket.ts │ │ ├── utils/ │ │ │ ├── storage.ts │ │ │ └── validation.ts │ │ ├── constants/ │ │ │ ├── api.ts │ │ │ └── theme.ts │ │ └── types/ │ │ └── index.ts │ ├── assets/ │ │ ├── images/ │ │ └── icons/ │ └── package.json │ ├── esp32/ │ ├── src/ │ │ ├── main.cpp │ │ ├── wifi/ │ │ │ ├── wifi_manager.cpp │ │ │ └── wifi_manager.h │ │ ├── websocket/ │ │ │ ├── websocket_client.cpp │ │ │ └── websocket_client.h │ │ ├── sensors/ │ │ │ ├── temperature.cpp │ │ │ ├── humidity.cpp │ │ │ └── motion.cpp │ │ └── actuators/ │ │ ├── relay.cpp │ │ └── led.cpp │ ├── include/ │ │ ├── config.h │ │ └── secrets.h │ ├── lib/ │ │ └── README.md │ ├── test/ │ │ └── test_main.cpp │ └── platformio.ini │ ├── docker/ │ ├── docker compose.yml │ ├── docker compose.dev.yml │ ├── backend.dockerfile │ └── database.dockerfile │ ├── database/ │ ├── migrations/ │ │ ├── 001_initial_schema.sql │ │ └── 002_add_device_logs.sql │ ├── seeds/ │ │ └── initial_data.sql │ └── schema.sql │ ├── docs/ │ ├── api/ │ │ ├── auth.md │ │ └── devices.md │ ├── setup/ │ │ ├── backend.md │ │ ├── mobile.md │ │ └── esp32.md │ └── architecture.md │ ├── .gitignore ├── .env.example ├── README.md └── package.json