{"id":27700342,"url":"https://github.com/b-amir/realtime-playground","last_synced_at":"2026-05-02T06:33:04.024Z","repository":{"id":288844503,"uuid":"969323945","full_name":"b-amir/realtime-playground","owner":"b-amir","description":"Real-time financial data visualization using 3 different communication protocols.","archived":false,"fork":false,"pushed_at":"2025-04-19T22:51:41.000Z","size":270,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T23:24:57.276Z","etag":null,"topics":["socket-io","sse","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b-amir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-19T22:15:00.000Z","updated_at":"2025-04-19T22:51:45.000Z","dependencies_parsed_at":"2025-04-19T23:35:05.101Z","dependency_job_id":null,"html_url":"https://github.com/b-amir/realtime-playground","commit_stats":null,"previous_names":["b-amir/realtime-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-amir%2Frealtime-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-amir%2Frealtime-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-amir%2Frealtime-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-amir%2Frealtime-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b-amir","download_url":"https://codeload.github.com/b-amir/realtime-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250878755,"owners_count":21501741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["socket-io","sse","websocket"],"created_at":"2025-04-25T18:59:02.003Z","updated_at":"2026-05-02T06:33:03.984Z","avatar_url":"https://github.com/b-amir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Realtime Playground\n\n![Financial Dashboard Screenshot](https://raw.githubusercontent.com/b-amir/realtime-playground/main/frontend/public/Screenshot-1.png)\n\nThis project demonstrates real-time financial data visualization using three different communication protocols: WebSocket, Socket.IO, and Server-Sent Events (SSE). Compare them side-by-side!\n\n- **WebSocket (`ws`)**: 🚀 Direct, low-latency, bi-directional.\n- **Socket.IO**: ✨ Feature-rich wrapper with fallbacks.\n- **Server-Sent Events (SSE)**: unidirectional (server-to-client).\n\n## 🏗️ Project Structure\n\nThis is an [Nx](https://nx.dev) monorepo using npm workspaces. It contains two main packages:\n\n- **`backend/`**: Node.js/Express server handling data simulation and real-time communication.\n- **`frontend/`**: React/Vite client application for visualizing data and managing connections.\n\nNx manages task running (like starting, building, linting) across the packages.\n\n## ✨ Features\n\n- **📊 Real-time Data Viz**: View simulated stock price movements using Recharts.\n- **↔️ Protocol Comparison**: Connect/disconnect streams individually.\n- **🎛️ Connection Toggles**: Easy UI controls for each protocol.\n- **📝 Transaction Logging**: Monitor connection events and data flow.\n- **📱 Responsive Design**: Built with Tailwind CSS.\n- **🔌 Auto-reconnection**: Attempts to reconnect dropped connections.\n- **❤️ Health Check**: Backend `/health` endpoint.\n\n## 📊 UI and Workflow\n\nThe UI provides several components to help visualize and compare the real-time protocols:\n\n### 1. Protocol Control Cards\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/b-amir/realtime-playground/main/frontend/public/Screenshot-2.png\" alt=\"Protocol Control Cards\" width=\"800\"\u003e\n\u003c/p\u003e\n\n👉 Individual cards for each protocol (WebSocket, Socket.IO, SSE) displaying the current simulated price, number of watchers, and connection status.\n\n- Allows you to individually connect/disconnect (\"watch\"/\"unwatch\") each protocol stream. Observe differences in connection stability, price update frequency (if configured differently), and how quickly watcher counts update. Notice the \"Buy\"/\"Sell\" buttons simulate user interaction, possible with bi-directional protocols like WebSocket and Socket.IO, but typically not directly initiated via SSE.\n\n### 2. Trading Room Log\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/b-amir/realtime-playground/main/frontend/public/Screenshot-3.png\" alt=\"Trading Room Log\" width=\"600\"\u003e\n\u003c/p\u003e\n\n👉 A log of simulated buy/sell actions performed by different users on the different \"stocks\" (protocols).\n\n- Demonstrates the bi-directional capability. Actions sent from the client (like a buy/sell request) are processed by the server and broadcast back to connected clients via WebSocket and Socket.IO. SSE, being unidirectional (server-to-client), wouldn't typically show client-initiated actions like this reflected back in the same stream.\n\n### 3. Connection Logs\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/b-amir/realtime-playground/main/frontend/public/Screenshot-4.png\" alt=\"Connection Logs\" width=\"600\"\u003e\n\u003c/p\u003e\n\n👉 Detailed logs of connection lifecycle events: establishing connections, client joins/leaves, IP addresses, and connection status messages for each protocol.\n\n- Provides insight into the underlying mechanics. You can see specific connection events for WebSocket and Socket.IO. Socket.IO might show more initial setup messages due to its handshake and potential fallback mechanisms. SSE connection events might appear simpler. This log helps debug connection issues and understand the verbosity of each protocol's connection management.\n\n### 4. Data History Chart\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/b-amir/realtime-playground/main/frontend/public/Screenshot-5.png\" alt=\"Data History Chart\" width=\"600\"\u003e\n\u003c/p\u003e\n\n👉 A line chart visualizing the price history for the currently \"watched\" protocols.\n\n- Allows for a visual comparison of the data streams received. If the backend simulates slight variations or delays for different protocols, you might observe differences in the chart lines, illustrating potential latency or data delivery nuances between WebSocket, Socket.IO, and SSE.\n\n## 🛠️ Tech Stack\n\n**Backend:**\n\n- Node.js, Express.js\n- WebSocket (`ws`), Socket.IO\n- Dotenv, CORS\n\n**Frontend:**\n\n- React 18, Vite\n- Recharts 📈\n- Tailwind CSS, Shadcn UI / Radix UI 🎨\n- Socket.IO Client\n- Lucide Icons ✨\n\n**Development:**\n\n- Nx, npm Workspaces\n- ESLint, Prettier, Nodemon, Vitest\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and npm\n\n### Installation \u0026 Running\n\n1.  **Clone**:\n    ```bash\n    git clone https://github.com/b-amir/realtime-playground.git\n    cd realtime-playground\n    ```\n2.  **Setup Environment**:\n\n    - Copy `.env.example` to `.env` in both `backend` and `frontend`.\n\n    ```bash\n    cp backend/.env.example backend/.env\n    cp frontend/.env.example frontend/.env\n    ```\n\n    - Adjust URLs/ports if needed (defaults should work, backend uses 3001, frontend uses 5173).\n\n3.  **Install Dependencies** (from root):\n\n    ```bash\n    npm install\n    ```\n\n    _(This uses npm workspaces to install for both packages)_\n\n4.  **Start Both Servers** (from root):\n\n    ```bash\n    npm start\n    ```\n\n    _(This uses `nx run-many --target=dev`)_\n\n5.  **Access**: Open your browser to `http://localhost:5173` (or the port Vite specifies).\n\n## ⚙️ Configuration\n\n- Environment variables control ports, origins, and update intervals. See the `.env.example` files in `backend/` and `frontend/` for details.\n\n## ▶️ Available Scripts (Run from Root)\n\nNx handles running tasks defined in `project.json` for each package.\n\n- `npm start`: Starts both backend (`dev`) and frontend (`dev`) concurrently.\n- `npm run server`: Starts only the backend (`dev`).\n- `npm run client`: Starts only the frontend (`dev`).\n- `npm run build`: Builds both backend and frontend (if build targets exist).\n- `npm run lint`: Lints both backend and frontend.\n- `npm run test`: Runs tests for both backend and frontend (if test targets exist).\n\n_Individual package scripts (like `format` in frontend) can still be run by navigating to the package directory (`cd frontend`) and running `npm run \u003cscript_name\u003e`._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-amir%2Frealtime-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb-amir%2Frealtime-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-amir%2Frealtime-playground/lists"}