# live-message/chat architecture

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

- Interactive diagram: https://gitdiagram.com/live-message/chat
- Repository: https://github.com/live-message/chat

## Overview

#### Purpose and deployment shape
Life Message is a registration-free, temporary room-based chat with browser calling support. The checked-in application surface is primarily static HTML/CSS/JavaScript under `web/`; deployment is container-oriented via `Dockerfile`, `docker-compose.yml`, and `nginx.conf`. The README describes a Flask/Flask-SocketIO backend, but its `app.py` and dependency manifest are not present in this tree.

#### Browser entry and route selection
`web/index.html` is the browser entry point. Route-to-page mapping is centralized in `web/routes.json`, with primary views at `web/pages/home.html` and `web/pages/chat.html`. The home flow creates or joins a room; the chat page is the active room workspace.

#### Room lifecycle and sharing
Room management UI is split into reusable menu fragments: `web/menus/create-chat.html`, `web/menus/edit-chat.html`, and `web/menus/delete-chat.html`. Sharing a generated room URL is handled by `web/static/scripts/share.js`. The intended room identifier model is UUID-based and temporary, per the README; backend ownership of generation, expiry, and deletion is an important boundary not represented in the supplied tree.

#### Real-time chat and calling transport
Chat orchestration is centered on `web/static/scripts/chat/chat.js`, with socket lifecycle/event handling in `web/static/scripts/chat/websocket.js` and presentation behavior in `web/static/scripts/chat/ui.js`. The client is expected to connect to a Flask-SocketIO/WebSocket service for messages and room events. WebRTC calling is described in the README; signaling would logically traverse this socket layer, while peer media/data traffic bypasses the application server after negotiation.

#### Client-side identity and local state
Anonymous participant behavior is managed by `web/static/scripts/chat/users.js` and `web/static/scripts/user/login.js`. Client persistence/data access is isolated in `web/static/scripts/database/db.js`, with contact-specific operations in `web/static/scripts/database/contacts.js`. This separates local browser state from authoritative room membership and message delivery, which must remain server-side for multi-user synchronization.

#### UI composition and progressive installation
Chat-specific styling and interaction assets live in `web/static/css/chat.css` and `web/static/scripts/chat/`. Shared shell styling is in `web/static/css/main.css`. The project includes a web-app manifest at `web/static/manifest.json` and installation logic at `web/static/scripts/install-app.js`, indicating Progressive Web App-oriented browser installation support.

#### Infrastructure and external boundaries
Nginx configuration in `nginx.conf` is the likely HTTP/static-file and reverse-proxy boundary, with `docker-compose.yml` defining local multi-container composition. `Dockerfile` packages the deployable runtime. Material external/browser services are WebSocket transport (Flask-SocketIO backend), WebRTC peer connections, and browser storage/PWA APIs; HTTPS is required operationally for secure transport and typical WebRTC deployment.

Main entry points: [`web/static/scripts/chat/chat.js`](https://github.com/live-message/chat/blob/main/web/static/scripts/chat/chat.js) (Chat orchestration), [`web/routes.json`](https://github.com/live-message/chat/blob/main/web/routes.json) (Route mapping), [`web/pages/home.html`](https://github.com/live-message/chat/blob/main/web/pages/home.html) (Home view), [`web/pages/chat.html`](https://github.com/live-message/chat/blob/main/web/pages/chat.html) (Chat view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser application"]
  node_entry["Browser entry<br/>HTML entry<br/>[index.html]"]
  node_routes["Route mapping<br/>route manifest<br/>[routes.json]"]
  node_home["Home view<br/>HTML view<br/>[home.html]"]
  node_chat_page["Chat view<br/>HTML view<br/>[chat.html]"]
  node_room_menus["Room menus<br/>HTML fragments<br/>[create-chat.html]"]
  node_share["Room sharing<br/>browser script<br/>[share.js]"]
  node_identity["Anonymous identity<br/>browser scripts<br/>[users.js]"]
  node_local_data[("Local data access<br/>browser scripts<br/>[db.js]")]
  node_pwa["PWA installation<br/>manifest and script<br/>[manifest.json]"]
  node_browser_storage[("Browser storage APIs<br/>browser platform")]
end

subgraph group_realtime["Room and real-time flow"]
  node_chat_core["Chat orchestration<br/>browser script<br/>[chat.js]"]
  node_socket_client["Socket lifecycle<br/>browser script<br/>[websocket.js]"]
  node_chat_ui["Chat presentation<br/>browser script<br/>[ui.js]"]
  node_socket_server{{"Flask-SocketIO service<br/>external backend"}}
  node_webrtc(("WebRTC peers<br/>browser peer transport"))
end

subgraph group_deployment["Deployment"]
  node_nginx{{"Nginx edge<br/>web server / proxy<br/>[nginx.conf]"}}
  node_compose["Container composition<br/>compose definition<br/>[docker-compose.yml]"]
  node_image["Runtime image<br/>container build"]
end

node_entry -->|"loads"| node_routes
node_routes -->|"maps route"| node_home
node_routes -->|"maps room route"| node_chat_page
node_home -->|"uses"| node_room_menus
node_home -->|"shares room URL"| node_share
node_chat_page -->|"starts"| node_chat_core
node_chat_core -->|"uses"| node_socket_client
node_chat_core -->|"updates"| node_chat_ui
node_chat_core -->|"identifies participant"| node_identity
node_identity -->|"persists locally"| node_local_data
node_local_data -->|"reads and writes"| node_browser_storage
node_socket_client -.->|"WebSocket events"| node_socket_server
node_socket_server -.->|"signaling"| node_webrtc
node_chat_page -->|"install support"| node_pwa
node_compose -->|"builds or runs"| node_image
node_compose -->|"composes"| node_nginx
node_nginx -->|"serves static app"| node_entry
node_nginx -.->|"reverse proxies"| node_socket_server

click node_entry "https://github.com/live-message/chat/blob/main/web/index.html"
click node_routes "https://github.com/live-message/chat/blob/main/web/routes.json"
click node_home "https://github.com/live-message/chat/blob/main/web/pages/home.html"
click node_chat_page "https://github.com/live-message/chat/blob/main/web/pages/chat.html"
click node_room_menus "https://github.com/live-message/chat/blob/main/web/menus/create-chat.html"
click node_share "https://github.com/live-message/chat/blob/main/web/static/scripts/share.js"
click node_chat_core "https://github.com/live-message/chat/blob/main/web/static/scripts/chat/chat.js"
click node_socket_client "https://github.com/live-message/chat/blob/main/web/static/scripts/chat/websocket.js"
click node_chat_ui "https://github.com/live-message/chat/blob/main/web/static/scripts/chat/ui.js"
click node_identity "https://github.com/live-message/chat/blob/main/web/static/scripts/chat/users.js"
click node_local_data "https://github.com/live-message/chat/blob/main/web/static/scripts/database/db.js"
click node_pwa "https://github.com/live-message/chat/blob/main/web/static/manifest.json"
click node_nginx "https://github.com/live-message/chat/blob/main/nginx.conf"
click node_compose "https://github.com/live-message/chat/blob/main/docker-compose.yml"
click node_image "https://github.com/live-message/chat/blob/main/Dockerfile"

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_entry,node_routes,node_home,node_chat_page,node_room_menus,node_share,node_identity,node_local_data,node_pwa,node_browser_storage toneBlue
class node_chat_core,node_socket_client,node_chat_ui,node_socket_server,node_webrtc toneAmber
class node_nginx,node_compose,node_image toneMint
```

## Components

### Browser application

- [Browser entry](https://github.com/live-message/chat/blob/main/web/index.html): HTML entry · `web/index.html`
- [Route mapping](https://github.com/live-message/chat/blob/main/web/routes.json): route manifest · `web/routes.json`
- [Home view](https://github.com/live-message/chat/blob/main/web/pages/home.html): HTML view · Creates or joins a room. · `web/pages/home.html`
- [Chat view](https://github.com/live-message/chat/blob/main/web/pages/chat.html): HTML view · Active room workspace. · `web/pages/chat.html`
- [Room menus](https://github.com/live-message/chat/blob/main/web/menus/create-chat.html): HTML fragments · Create, edit, and delete room UI. · `web/menus/create-chat.html`
- [Room sharing](https://github.com/live-message/chat/blob/main/web/static/scripts/share.js): browser script · `web/static/scripts/share.js`
- [Anonymous identity](https://github.com/live-message/chat/blob/main/web/static/scripts/chat/users.js): browser scripts · `web/static/scripts/chat/users.js`
- [Local data access](https://github.com/live-message/chat/blob/main/web/static/scripts/database/db.js): browser scripts · Browser persistence and contacts. · `web/static/scripts/database/db.js`
- [PWA installation](https://github.com/live-message/chat/blob/main/web/static/manifest.json): manifest and script · `web/static/manifest.json`
- **Browser storage APIs**: browser platform

### Room and real-time flow

- [Chat orchestration](https://github.com/live-message/chat/blob/main/web/static/scripts/chat/chat.js): browser script · `web/static/scripts/chat/chat.js`
- [Socket lifecycle](https://github.com/live-message/chat/blob/main/web/static/scripts/chat/websocket.js): browser script · Handles message, room, and signaling events. · `web/static/scripts/chat/websocket.js`
- [Chat presentation](https://github.com/live-message/chat/blob/main/web/static/scripts/chat/ui.js): browser script · `web/static/scripts/chat/ui.js`
- **Flask-SocketIO service**: external backend · Authoritative room membership, messages, expiry, and signaling; not present in tree.
- **WebRTC peers**: browser peer transport · Media and data flow directly after signaling.

### Deployment

- [Nginx edge](https://github.com/live-message/chat/blob/main/nginx.conf): web server / proxy · Serves static files and proxies application traffic. · `nginx.conf`
- [Container composition](https://github.com/live-message/chat/blob/main/docker-compose.yml): compose definition · `docker-compose.yml`
- [Runtime image](https://github.com/live-message/chat/blob/main/Dockerfile): container build · `Dockerfile`

## Connections

- Browser entry → Route mapping: loads
- Route mapping → Home view: maps route
- Route mapping → Chat view: maps room route
- Home view → Room menus: uses
- Home view → Room sharing: shares room URL
- Chat view → Chat orchestration: starts
- Chat orchestration → Socket lifecycle: uses
- Chat orchestration → Chat presentation: updates
- Chat orchestration → Anonymous identity: identifies participant
- Anonymous identity → Local data access: persists locally
- Local data access → Browser storage APIs: reads and writes
- Socket lifecycle → Flask-SocketIO service: WebSocket events
- Flask-SocketIO service → WebRTC peers: signaling
- Chat view → PWA installation: install support
- Container composition → Runtime image: builds or runs
- Container composition → Nginx edge: composes
- Nginx edge → Browser entry: serves static app
- Nginx edge → Flask-SocketIO service: reverse proxies