# harshil1030/websocket architecture

> Architecture diagram of the GitHub repository harshil1030/websocket, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/harshil1030/websocket
- Repository: https://github.com/harshil1030/websocket

## Overview

1. **Overall shape**
   - This is a two-part demo application: a Node.js WebSocket server and a plain browser client.
   - There is no framework layer, no database, and no build pipeline; the architecture is intentionally minimal.

2. **Server subsystem (`server.js`)**
   - The backend uses the `ws` Node.js library to host a WebSocket server on port `8080`.
   - Its job is to accept persistent socket connections, log incoming messages, and send simple text responses back to the same client.

3. **Client subsystem (`index.html`)**
   - The frontend is a single static HTML page with embedded JavaScript.
   - It opens a WebSocket connection directly from the browser to `ws://localhost:8080`, listens for server messages, and sends user-entered text through the socket.

4. **Connection boundary**
   - The main architectural boundary is the WebSocket channel between browser and server.
   - Unlike a typical request/response HTTP app, this connection stays open and supports bidirectional messaging over one long-lived session.

5. **Message flow from server to client**
   - When a browser connects, the server immediately sends a welcome message to that specific socket.
   - Any later server responses are also pushed over the same connection and displayed in the page.

6. **Message flow from client to server**
   - User input in the browser is sent over the open WebSocket connection when the Send action occurs.
   - The server receives the payload on the per-connection socket, logs it, and replies with an acknowledgment-style message.

7. **State and scope**
   - Connection state is kept per socket in memory only.
   - There is no shared application state, persistence, session store, or message broker; each client connection is isolated and handled directly by the server process.

8. **Runtime and dependency boundary**
   - The only runtime dependency is `ws`, declared in `package.json` and locked in `package-lock.json`.
   - `node_modules` is the installed dependency tree; there are no additional services or runtime components.

9. **Operational assumptions**
   - The server must be running before the browser page can connect.
   - The client is hardcoded to `localhost:8080`, so the deployment model is local/demo-oriented rather than configurable production infrastructure.

10. **What an architecture diagram should show**
   - A browser client on one side, a Node.js process on the other, and a single persistent WebSocket link between them.
   - Inside the server, show connection handling plus per-message echo/response logic; inside the client, show UI input, socket send, and message display.

Main entry points: [`index.html`](https://github.com/harshil1030/websocket/blob/main/index.html) (Socket JS), [`server.js`](https://github.com/harshil1030/websocket/blob/main/server.js) (WS server), [`node_modules`](https://github.com/harshil1030/websocket/tree/main/node_modules) (ws)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_index_html["index.html<br/>static page<br/>[index.html]"]
  node_client_socket["Socket JS<br/>browser client<br/>[index.html]"]
  node_client_ui["Message UI<br/>browser UI<br/>[index.html]"]
end

subgraph group_server["Node server"]
  node_server_js["server.js<br/>node process<br/>[server.js]"]
  node_ws_server[("WS server<br/>socket listener<br/>[server.js]")]
  node_conn_handler["Conn handler<br/>per-socket flow<br/>[server.js]"]
  node_reply_logic["Reply logic<br/>message handler<br/>[server.js]"]
end

subgraph group_runtime["Runtime deps"]
  node_ws_lib{{"ws<br/>node dependency"}}
end

node_index_html -->|"embeds"| node_client_socket
node_client_ui -->|"user send"| node_client_socket
node_client_socket -->|"connects"| node_ws_server
node_ws_server -->|"accepts"| node_conn_handler
node_conn_handler -->|"routes"| node_reply_logic
node_reply_logic -->|"pushes"| node_client_socket
node_server_js -.->|"depends on"| node_ws_lib
node_client_socket -->|"updates"| node_client_ui

click node_index_html "https://github.com/harshil1030/websocket/blob/main/index.html"
click node_client_socket "https://github.com/harshil1030/websocket/blob/main/index.html"
click node_client_ui "https://github.com/harshil1030/websocket/blob/main/index.html"
click node_server_js "https://github.com/harshil1030/websocket/blob/main/server.js"
click node_ws_server "https://github.com/harshil1030/websocket/blob/main/server.js"
click node_conn_handler "https://github.com/harshil1030/websocket/blob/main/server.js"
click node_reply_logic "https://github.com/harshil1030/websocket/blob/main/server.js"
click node_ws_lib "https://github.com/harshil1030/websocket/tree/main/node_modules"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_client_socket,node_client_ui toneBlue
class node_server_js,node_ws_server,node_conn_handler,node_reply_logic toneAmber
class node_ws_lib toneMint
```

## Components

### Browser client

Single static page with embedded JavaScript that connects directly to the server.

- [index.html](https://github.com/harshil1030/websocket/blob/main/index.html): static page · Browser entry point with embedded client logic and UI. · `index.html`
- [Socket JS](https://github.com/harshil1030/websocket/blob/main/index.html): browser client · Opens the WebSocket, sends user text, and handles incoming messages. · `index.html`
- [Message UI](https://github.com/harshil1030/websocket/blob/main/index.html): browser UI · Collects user input and displays server responses. · `index.html`

### Node server

WebSocket server process that accepts connections and replies per socket.

- [server.js](https://github.com/harshil1030/websocket/blob/main/server.js): node process · Starts the WebSocket server and owns connection handling. · `server.js`
- [WS server](https://github.com/harshil1030/websocket/blob/main/server.js): socket listener · Accepts persistent browser connections on port 8080. · `server.js`
- [Conn handler](https://github.com/harshil1030/websocket/blob/main/server.js): per-socket flow · Handles each client socket, logs messages, and keeps state in memory. · `server.js`
- [Reply logic](https://github.com/harshil1030/websocket/blob/main/server.js): message handler · Sends welcome and acknowledgment-style responses back on the same socket. · `server.js`

### Runtime deps

Installed Node.js dependency used to implement the WebSocket server.

- [ws](https://github.com/harshil1030/websocket/tree/main/node_modules): node dependency · External library used to implement the WebSocket server. · `node_modules`

## Connections

- index.html → Socket JS: embeds · The page contains the client-side WebSocket script.
- Message UI → Socket JS: user send · User input is sent through the open socket.
- Socket JS → WS server: connects · Browser opens a persistent WebSocket connection to the server.
- WS server → Conn handler: accepts · Each incoming socket is handed to per-connection handling.
- Conn handler → Reply logic: routes · Incoming messages are logged and turned into replies.
- Reply logic → Socket JS: pushes · Server welcome and responses are delivered over the same connection.
- server.js → ws: depends on · The server process relies on the ws package.
- Socket JS → Message UI: updates · Incoming server messages are rendered in the page UI.