# gravedd/sechat-v2 architecture

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

- Interactive diagram: https://gitdiagram.com/gravedd/sechat-v2
- Repository: https://github.com/gravedd/sechat-v2

## Overview

#### Purpose and Top-Level Shape
seChat is a PWA chat application intended to encrypt messages with a key. It is split into a Vue 3 client and Laravel API/backend, with a separate Ratchet WebSocket chat server. Primary deployments likely expose the SPA separately from Laravel’s public HTTP entry point.

#### Entry Points and Request Routing
- Vue boots from `frontend/src/main.js`, mounts `frontend/src/App.vue`, and uses routes in `frontend/src/router/index.js`.
- Laravel HTTP traffic enters `backend/public/index.php`, runs through `backend/app/Http/Kernel.php`, and is mapped by `backend/routes/api.php` and `backend/routes/web.php`.
- The persistent chat process is started through the Artisan command `backend/app/Console/Commands/ChatServer.php`, registered by `backend/app/Console/Kernel.php`.

#### Client Application and UI Stages
- Route-level views provide landing, authentication, profile/search, dialogue list, and active-chat surfaces: `frontend/src/views/IndexView.vue`, `frontend/src/views/DialoguesView.vue`, `frontend/src/views/ChatView.vue`.
- Authentication UI is separated into `frontend/src/components/auth/loginform.vue` and `frontend/src/components/auth/registerform.vue`.
- The browser application is configured as a PWA, including service-worker registration at `frontend/src/registerServiceWorker.js`; public assets include notification sound and UI assets.

#### Client State, API, and Realtime Boundary
- Vuex is centralized in `frontend/src/store/index.js`.
- Dialogue and notification state are maintained in `frontend/src/store/dialogues.js` and `frontend/src/store/Notifications.js`.
- WebSocket lifecycle/protocol handling is isolated from views in `frontend/src/store/ws.js` and `frontend/src/store/ChatWS.js`. This is the client boundary for real-time message delivery; views consume store state rather than owning socket transport.

#### Laravel API and Domain Layer
- Controllers define the application API around identity, users, friendship, dialogues, and messages: `backend/app/Http/Controllers/AuthController.php`, `backend/app/Http/Controllers/DialoguesController.php`, `backend/app/Http/Controllers/MessagesController.php`.
- Eloquent models represent the durable chat graph: `backend/app/Models/User.php`, `backend/app/Models/Friend.php`, `backend/app/Models/Dialogue.php`, and `backend/app/Models/Message.php`.
- Authentication middleware and Laravel’s auth configuration establish the protected API boundary: `backend/app/Http/Middleware/Authenticate.php` and `backend/config/auth.php`.

#### Realtime Chat Server
- Ratchet socket behavior resides in `backend/app/sockets/ChatSocket.php`, built on `backend/app/sockets/base/BaseSocket.php`.
- `backend/app/Models/SocketUser.php` indicates the socket server tracks connected-user/session state separately from the core user model.
- Control flow is: browser WebSocket stores connect/send through the socket server; socket-user state determines recipients; REST endpoints persist and query account, relationship, dialogue, and message data.

#### Persistence and Runtime Infrastructure
- MySQL is the stated datastore; Laravel database wiring is in `backend/config/database.php`.
- Schema migrations establish users/auth tokens plus friend, message, socket-user, and dialogue records: `backend/database/migrations/2022_04_16_125835_create_friends_table.php`, `backend/database/migrations/2022_04_18_155258_create_messages_table.php`, `backend/database/migrations/2022_04_28_171941_create_dialogues_table.php`.
- Material runtimes are PHP/Laravel, a long-running Ratchet server, and JavaScript/Vue 3 in the browser. Laravel also carries queue, cache, mail, and broadcasting configuration, though their active use is not established by the supplied structure.

Main entry points: [`frontend/src/store/index.js`](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/index.js) (Vuex store), [`backend/app/sockets/ChatSocket.php`](https://github.com/gravedd/sechat-v2/blob/main/backend/app/sockets/ChatSocket.php) (Chat socket), [`frontend/src/router/index.js`](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/router/index.js) (Client router), [`frontend/src/store/ws.js`](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/ws.js) (WebSocket client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue PWA"]
  node_vue_boot["Vue bootstrap<br/>Vue entry<br/>[main.js]"]
  node_app["App shell<br/>Vue root<br/>[App.vue]"]
  node_router["Client router<br/>Vue Router<br/>[index.js]"]
  node_views["Chat views<br/>route views<br/>[ChatView.vue]"]
  node_auth_ui["Auth forms<br/>Vue components<br/>[loginform.vue]"]
  node_store["Vuex store<br/>client state<br/>[index.js]"]
  node_dialogue_state["Dialogue state<br/>Vuex module<br/>[dialogues.js]"]
  node_ws_client{{"WebSocket client<br/>socket store<br/>[ws.js]"}}
  node_pwa["Service worker<br/>PWA runtime"]
end

subgraph group_http["Laravel API"]
  node_http_entry["HTTP entry<br/>Laravel front controller<br/>[index.php]"]
  node_http_kernel["HTTP kernel<br/>Laravel middleware<br/>[Kernel.php]"]
  node_api_routes["API routes<br/>Laravel routes<br/>[api.php]"]
  node_controllers["Chat API controllers<br/>Laravel controllers"]
  node_models["Chat domain models<br/>Eloquent models<br/>[Message.php]"]
end

subgraph group_realtime["Ratchet Realtime"]
  node_chat_command["Chat server command<br/>Artisan command<br/>[ChatServer.php]"]
  node_chat_socket{{"Chat socket<br/>Ratchet handler<br/>[ChatSocket.php]"}}
  node_socket_users["Socket user state<br/>Eloquent model<br/>[SocketUser.php]"]
end

subgraph group_data["MySQL"]
  node_mysql[("MySQL<br/>database<br/>[database.php]")]
  node_migrations["Chat schema migrations<br/>Laravel migrations"]
end

node_vue_boot -->|"mounts"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"selects"| node_views
node_router -->|"selects"| node_auth_ui
node_views -->|"reads and dispatches"| node_store
node_store -->|"contains"| node_dialogue_state
node_store -->|"contains"| node_ws_client
node_pwa -.->|"supports offline client"| node_vue_boot
node_store -->|"REST requests"| node_http_entry
node_http_entry -->|"boots through"| node_http_kernel
node_http_kernel -->|"dispatches"| node_api_routes
node_api_routes -->|"maps to"| node_controllers
node_controllers -->|"uses"| node_models
node_models -->|"persists"| node_mysql
node_migrations -->|"creates schema"| node_mysql
node_chat_command -->|"starts"| node_chat_socket
node_ws_client -->|"connects and sends"| node_chat_socket
node_chat_socket -->|"finds recipients"| node_socket_users
node_socket_users -->|"persists sessions"| node_mysql
node_chat_socket -->|"delivers messages"| node_ws_client

click node_vue_boot "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/main.js"
click node_app "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/App.vue"
click node_router "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/router/index.js"
click node_views "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/views/ChatView.vue"
click node_auth_ui "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/components/auth/loginform.vue"
click node_store "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/index.js"
click node_dialogue_state "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/dialogues.js"
click node_ws_client "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/ws.js"
click node_pwa "https://github.com/gravedd/sechat-v2/blob/main/frontend/src/registerServiceWorker.js"
click node_http_entry "https://github.com/gravedd/sechat-v2/blob/main/backend/public/index.php"
click node_http_kernel "https://github.com/gravedd/sechat-v2/blob/main/backend/app/Http/Kernel.php"
click node_api_routes "https://github.com/gravedd/sechat-v2/blob/main/backend/routes/api.php"
click node_controllers "https://github.com/gravedd/sechat-v2/blob/main/backend/app/Http/Controllers/MessagesController.php"
click node_models "https://github.com/gravedd/sechat-v2/blob/main/backend/app/Models/Message.php"
click node_chat_command "https://github.com/gravedd/sechat-v2/blob/main/backend/app/Console/Commands/ChatServer.php"
click node_chat_socket "https://github.com/gravedd/sechat-v2/blob/main/backend/app/sockets/ChatSocket.php"
click node_socket_users "https://github.com/gravedd/sechat-v2/blob/main/backend/app/Models/SocketUser.php"
click node_mysql "https://github.com/gravedd/sechat-v2/blob/main/backend/config/database.php"
click node_migrations "https://github.com/gravedd/sechat-v2/blob/main/backend/database/migrations/2022_04_18_155258_create_messages_table.php"

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_vue_boot,node_app,node_router,node_views,node_auth_ui,node_store,node_dialogue_state,node_ws_client,node_pwa toneBlue
class node_http_entry,node_http_kernel,node_api_routes,node_controllers,node_models toneAmber
class node_chat_command,node_chat_socket,node_socket_users toneMint
class node_mysql,node_migrations toneRose
```

## Components

### Vue PWA

Browser single-page chat client.

- [Vue bootstrap](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/main.js): Vue entry · `frontend/src/main.js`
- [App shell](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/App.vue): Vue root · `frontend/src/App.vue`
- [Client router](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/router/index.js): Vue Router · `frontend/src/router/index.js`
- [Chat views](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/views/ChatView.vue): route views · Landing, dialogue list, and active chat surfaces. · `frontend/src/views/ChatView.vue`
- [Auth forms](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/components/auth/loginform.vue): Vue components · Login and registration UI. · `frontend/src/components/auth/loginform.vue`
- [Vuex store](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/index.js): client state · Central state consumed by views. · `frontend/src/store/index.js`
- [Dialogue state](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/dialogues.js): Vuex module · Dialogue and notification state. · `frontend/src/store/dialogues.js`
- [WebSocket client](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/store/ws.js): socket store · Owns browser socket lifecycle and protocol. · `frontend/src/store/ws.js`
- [Service worker](https://github.com/gravedd/sechat-v2/blob/main/frontend/src/registerServiceWorker.js): PWA runtime · `frontend/src/registerServiceWorker.js`

### Laravel API

HTTP API, authentication, and chat domain.

- [HTTP entry](https://github.com/gravedd/sechat-v2/blob/main/backend/public/index.php): Laravel front controller · `backend/public/index.php`
- [HTTP kernel](https://github.com/gravedd/sechat-v2/blob/main/backend/app/Http/Kernel.php): Laravel middleware · Applies middleware and protected API boundary. · `backend/app/Http/Kernel.php`
- [API routes](https://github.com/gravedd/sechat-v2/blob/main/backend/routes/api.php): Laravel routes · `backend/routes/api.php`
- [Chat API controllers](https://github.com/gravedd/sechat-v2/blob/main/backend/app/Http/Controllers/MessagesController.php): Laravel controllers · Identity, dialogues, and message endpoints. · `backend/app/Http/Controllers/MessagesController.php`
- [Chat domain models](https://github.com/gravedd/sechat-v2/blob/main/backend/app/Models/Message.php): Eloquent models · Users, relationships, dialogues, and messages. · `backend/app/Models/Message.php`

### Ratchet Realtime

Long-running WebSocket delivery process.

- [Chat server command](https://github.com/gravedd/sechat-v2/blob/main/backend/app/Console/Commands/ChatServer.php): Artisan command · Starts the persistent socket process. · `backend/app/Console/Commands/ChatServer.php`
- [Chat socket](https://github.com/gravedd/sechat-v2/blob/main/backend/app/sockets/ChatSocket.php): Ratchet handler · Routes realtime chat traffic to connected recipients. · `backend/app/sockets/ChatSocket.php`
- [Socket user state](https://github.com/gravedd/sechat-v2/blob/main/backend/app/Models/SocketUser.php): Eloquent model · Tracks connected user/session state separately. · `backend/app/Models/SocketUser.php`

### MySQL

Durable chat and connection state.

- [MySQL](https://github.com/gravedd/sechat-v2/blob/main/backend/config/database.php): database · Stores accounts, relationships, dialogues, messages, and socket users. · `backend/config/database.php`
- [Chat schema migrations](https://github.com/gravedd/sechat-v2/blob/main/backend/database/migrations/2022_04_18_155258_create_messages_table.php): Laravel migrations · Creates friend, message, and dialogue tables. · `backend/database/migrations/2022_04_18_155258_create_messages_table.php`

## Connections

- Vue bootstrap → App shell: mounts
- App shell → Client router: renders routes
- Client router → Chat views: selects
- Client router → Auth forms: selects
- Chat views → Vuex store: reads and dispatches
- Vuex store → Dialogue state: contains
- Vuex store → WebSocket client: contains
- Service worker → Vue bootstrap: supports offline client
- Vuex store → HTTP entry: REST requests
- HTTP entry → HTTP kernel: boots through
- HTTP kernel → API routes: dispatches
- API routes → Chat API controllers: maps to
- Chat API controllers → Chat domain models: uses
- Chat domain models → MySQL: persists
- Chat schema migrations → MySQL: creates schema
- Chat server command → Chat socket: starts
- WebSocket client → Chat socket: connects and sends
- Chat socket → Socket user state: finds recipients
- Socket user state → MySQL: persists sessions
- Chat socket → WebSocket client: delivers messages