https://github.com/bws9000/robot-simulator
A lightweight WebSocket-driven robot simulator that visually demonstrates reactive UI updates; a hands-on exploration of how frontend frameworks work under the hood.
https://github.com/bws9000/robot-simulator
javascript node websocket
Last synced: 9 months ago
JSON representation
A lightweight WebSocket-driven robot simulator that visually demonstrates reactive UI updates; a hands-on exploration of how frontend frameworks work under the hood.
- Host: GitHub
- URL: https://github.com/bws9000/robot-simulator
- Owner: bws9000
- License: mit
- Created: 2021-04-10T00:50:47.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-06-20T22:27:20.000Z (about 1 year ago)
- Last Synced: 2025-06-20T23:27:30.759Z (about 1 year ago)
- Topics: javascript, node, websocket
- Language: JavaScript
- Homepage:
- Size: 9.68 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Robot Simulator or Reactivity Sandbox
A minimalist robot simulation app that demonstrates frontend reactivity concepts using Node.js, WebSockets, and plain JavaScript DOM manipulation. Originally built for a different purpose, it now offers a surprisingly clear — though not sophisticated — look into how modern JavaScript frameworks update the UI in response to state changes.
## How It Works
This project mimics how modern frameworks like React or Angular manage state and update the UI.
- The **backend** is a Node.js app with WebSocket and command-line input
- The **frontend** is a grid rendered in the browser, updated via WebSocket messages
- All updates to the robot's position/state are reflected live in the DOM
## Features
- Command-line interface to control the robot (via `stdin`)
- Realtime robot state syncing to browser using WebSocket
- Custom grid-based UI showing robot position and active zones
- No framework — just raw DOM updates for learning and experimentation
## Structure
```
robot-simulator/
├── index.js # Node.js server + WebSocket + robot logic
├── public/
│ └── index.html # Grid display & frontend logic
├── wsdata/
│ └── RobotData.js # Robot state management
├── frontend/
│ └── Grid1.js # UI update logic for the robot grid
```
## 🚀 Getting Started
### Prerequisites
- Node.js (v18+ recommended)
### Run the App
```bash
npm install
node index.js
```
### Open the frontend
Visit `http://localhost:3000` in your browser.
### Send commands
In the terminal, type:
```bash
activate
move up
move left
move right
```
The grid will update in real time.
This project is designed to:
- Visualize how state updates can drive the DOM
- Simulate how frameworks like Angular or React operate under the hood
- Explore WebSocket communication and reactive UI updates