Recording.2024-11-25.222721.mp4
ReactSignpad is a technological prototype designed to showcase how SharedWorker can be used to share data between multiple browser tabs in real-time. This project demonstrates a multiple-tab Signpad application where one tab acts as the Operator and the other as the Customer.
The Customer can sign using a mouse or touch input, and the signature is mirrored instantly on the Operator's screen.
- Real-Time Synchronization: Utilizes SharedWorker to sync data between the multiple tabs instantly.
- Multiple-Tabs Interaction: One tab serves as the Operator view, while the other is the Customer view.
- User-Friendly Signing: Supports both mouse and touch input for signing.
- Efficient Communication: Demonstrates the power of SharedWorker for real-time, inter-tab communication.
- SharedWorker is used to establish a shared data channel between the multiple tabs.
- The Customer tab allows the user to draw their signature using mouse or touch input.
- The signature data is sent to the Operator tab in real-time, where it is mirrored instantly.
- Node.js and npm installed
- A modern browser that supports SharedWorker (e.g., Chrome, Firefox)
- Clone the repository:
git clone https://github.com/soulee-dev/ReactSignpad.git
cd ReactSignpad
- Install dependencies:
npm install
Start the development server:npm run dev- Open two or more tabs in your browser and navigate to the same URL provided by the development server.
To debug SharedWorker, type chrome://inspect/#workers on browser.