https://github.com/delt4d/echo
User interactions recorder and mimic.
https://github.com/delt4d/echo
csharp css dotnet echo html interactions javascript mimic nodejs recording
Last synced: 3 months ago
JSON representation
User interactions recorder and mimic.
- Host: GitHub
- URL: https://github.com/delt4d/echo
- Owner: delt4d
- Created: 2025-04-30T17:31:37.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-05-26T17:18:25.000Z (4 months ago)
- Last Synced: 2025-06-06T07:11:27.798Z (4 months ago)
- Topics: csharp, css, dotnet, echo, html, interactions, javascript, mimic, nodejs, recording
- Language: JavaScript
- Homepage:
- Size: 281 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Echo
[](https://deepwiki.com/delt4d/Echo)
**Echo** is a session recording and replay system that enables the capture and visual reproduction of user interactions in websites.
It consists of client-side code to capture user interactions in real-time, and server-side code to save and retrieve user interactions.
```
Echo/
├── Docs/ # Images and documents to be used by README
├── Echo.run/ # Runtime configuration files (e.g., launch profiles)
├── Lib/ # Shared client and server libraries
├── Preview/ # Server and client for preview of recording and mimic
├── .gitignore # Files and folders to ignore in version control
├── Back.Dockerfile # Docker configuration to the preview server
├── Front.Dockerfile # Docker configuration to the preview client
├── docker-compose.yml # Configuration to run both containers
└── echo.sln # .NET solution file
```
## Features
- Real-Time Recording: Capture user interactions as they occur.
- Accurate Replay: Reproduce user sessions within an iframe for analysis.
- Privacy Controls: Implement data masking to protect sensitive user information during recording and playback.
## Use Cases
- Bug Reproduction: Developers can replay exact user flows that led to errors.
- UX Analysis: Product teams can visualize how users interact with interfaces.
- Compliance: With data masking, user sessions can be analyzed securely.
## Server Components
The server side of Echo consists of the following main components:
- **EchoServer:** A .NET application that hosts the SignalR hub and manages the connection with clients.
- **EchoLib:** A .NET library that provides core functionality used by the server.
- **SignalR Hub:** Facilitates real-time, bidirectional communication between the server and clients.
## Client Components
The client side includes:
- **EchoMimic:** A component responsible for replaying recorded user interactions within an iframe.
- **EchoRecorder:** Captures user interactions and prepares them for transmission.
- **EchoData:** A data structure representing captured events.
- **Event Handlers:** A collection of specialized handlers for different types of user interactions.
## Data Flow
Echo processes data through two main pipelines:
### Recording Pipeline
- User interactions are captured by specialized event handlers.
- Captured events are converted into standardized EchoData objects.
- EchoData objects are transmitted to the server via SignalR.
- The server, utilizing EchoLib, saves the received events for future replay.
### Replay Pipeline
- The EchoMimic component receives events from the server through a SignalR connection.
- Events are queued and processed sequentially.
- Processed events are visually reproduced within an iframe element.
## Quick Start
```bash
# Clone project
git clone https://github.com/delt4d/Echo.git
# Build and start the client
cd Echo/Lib/Client
npm install
npm run build
# Run the preview server
cd Echo/Preview/Server
dotnet run
# Run the preview client
cd Echo/Preview/Client
npm install
npm run start
```
## Preview
Ensure both the server and client preview applications are running.
Open [`http://localhost:5500/recorder`](http://localhost:5500/recorder) and perform actions like moving the mouse or typing.
Then navigate to [`http://localhost:5500/mimic`](http://localhost:5500/mimic) to watch your session replayed inside an iframe.
## Usage
Build the client library, move `dist/` contents to the website folder and reference it in a script tag.
```html
```
🎥 Start Recording (Client)
To capture and stream user interactions in real-time:
```javascript
const echoRecorder = new EchoRecorder();
for await (const echoData of echoRecorder.getChangesAsync()) {
const data = echoData.toJson();
// Send `data` to your server or process it directly
}
```
Each echoData is a structured event representing user activity.
🔁 Replay a Session (Client)
You can replay a recorded session using the `` custom element:
```html
```
In Javascript:
```javascript
const echoMimic = new EchoMimic(document.getElementById("player"));
// Option 1: Queue events to be executed sequentially
await echoMimic.enqueueAsync(EchoData.fromJson(data));
// Option 2: Execute immediately (useful for testing or manual control)
await echoMimic.executeAsync(EchoData.fromJson(data));
```