Web Socket Express

Web Socket Express is a small real-time collaboration demo built with Express and Socket.IO. It synchronizes draggable circles across connected clients to demonstrate the basics of event-driven, multi-user state updates in the browser.

Highlights

• Express server with Socket.IO integration
• Real-time broadcasting for create and move events
• Shared browser canvas for multi-client interaction
• Minimal codebase that is easy to study and extend

Tech Stack

• Node.js
• Express
• Socket.IO

How It Works

Each client opens the shared page, creates circles, and drags them within the bounded area. The server listens for circleAdded and circleMoved events, then broadcasts those updates to other connected clients.

Project Structure

• app.js: Express and Socket.IO server
• public/index.html: browser UI and client-side socket logic

Getting Started

Prerequisites

• Node.js

Setup

1. Install dependencies:

npm install

2. Copy the environment template:

cp .env.example .env

3. Start the development server:

npm run dev

4. Open the app in your browser:

http://localhost:3000

Environment Variables

• PORT: HTTP port for the Express server

Development Commands

npm run dev
npm start

Testing

No automated tests are included yet.

Current validation is done through local multi-tab or multi-browser testing to confirm that create and move events are synchronized correctly.

Ideas For Extension

• Persist shapes between sessions
• Add user presence indicators
• Support more shapes and colors
• Move client code into separate JS and CSS assets
• Add automated socket integration tests

License

No license has been specified yet.

Author

Developed by Ali Balash.