# koioio/communite_room architecture

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

- Interactive diagram: https://gitdiagram.com/koioio/communite_room
- Repository: https://github.com/koioio/communite_room

## Overview

Communicate Room is a browser-based, multi-user chat application. Users connect to the Go server over WebSocket, log in, exchange broadcast messages, and receive presence updates; the Hub tracks connections and distributes outbound messages through per-connection queues. The README documents these stages and the concurrency model. Frontend component wiring is supported by sampled Vue source; backend registration, reader/writer routines, and queue behavior are documented, though not all routine implementations were sampled.

Main entry points: [`front/chat-app/src/components/ChatRoom.vue`](https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/ChatRoom.vue) (Chat room), [`serve/internal/handler/ws_handler.go`](https://github.com/koioio/communite_room/blob/main/serve/internal/handler/ws_handler.go) (WebSocket handler), [`serve/internal/logic/connection_routine/Hub_Instance.go`](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/Hub_Instance.go) (Hub instance), [`serve/internal/logic/Hub/Hub_logic.go`](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/Hub/Hub_logic.go) (Hub event loop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Chat interface"]
  node_app["Vue app<br/>[App.vue]"]
  node_chatroom["Chat room<br/>[ChatRoom.vue]"]
  node_userlist["Online users<br/>[UserList.vue]"]
  node_messages["Message display<br/>[MessageList.vue]"]
end

subgraph group_server["HTTP and WebSocket"]
  node_servermain["Server startup<br/>[main.go]"]
  node_router["HTTP router<br/>[router.go]"]
  node_wshandler["WebSocket handler<br/>[ws_handler.go]"]
  node_hubstart["Hub startup<br/>[ws_handler.go]"]
end

subgraph group_realtime["Realtime chat"]
  node_hub["Hub event loop<br/>[Hub_logic.go]"]
  node_hubinstance["Hub instance<br/>[Hub_Instance.go]"]
  node_connectionflow["Connection routines<br/>[enter.go]"]
  node_reader["Message reader<br/>[reader.go]"]
  node_writer["Message writer<br/>[writer.go]"]
  node_outqueue["Client send queue<br/>[connection.go]"]
  node_presence["Online user state<br/>[Hub_logic.go]"]
end

subgraph group_protocol["Connection data"]
  node_connection["Connection context<br/>[connection.go]"]
  node_data["Message data<br/>[data.go]"]
end

node_browser(("Browser user"))

node_browser -->|"uses"| node_app
node_app -->|"renders"| node_chatroom
node_chatroom -->|"renders users"| node_userlist
node_chatroom -->|"renders messages"| node_messages
node_chatroom -->|"opens WebSocket"| node_router
node_servermain -->|"starts server"| node_router
node_servermain -->|"starts Hub"| node_hubstart
node_router -->|"dispatches /ws"| node_wshandler
node_wshandler -->|"registers connection"| node_hubinstance
node_wshandler -->|"starts routines"| node_connectionflow
node_hubstart -->|"runs instance"| node_hubinstance
node_hubinstance -->|"provides channels"| node_hub
node_connectionflow -->|"reads messages"| node_reader
node_connectionflow -->|"starts writer"| node_writer
node_reader -->|"queues events"| node_hubinstance
node_reader -->|"updates users"| node_presence
node_hub -->|"reads user list"| node_presence
node_hub -->|"enqueues broadcasts"| node_outqueue
node_writer -->|"consumes messages"| node_outqueue
node_writer -->|"writes WebSocket"| node_browser
node_wshandler -->|"creates context"| node_connection
node_connection -->|"holds payload"| node_data
node_chatroom -->|"sends and receives JSON"| node_data

click node_app "https://github.com/koioio/communite_room/blob/main/front/chat-app/src/App.vue"
click node_chatroom "https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/ChatRoom.vue"
click node_userlist "https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/UserList.vue"
click node_messages "https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/MessageList.vue"
click node_servermain "https://github.com/koioio/communite_room/blob/main/serve/cmd/server/main.go"
click node_router "https://github.com/koioio/communite_room/blob/main/serve/internal/router/router.go"
click node_wshandler "https://github.com/koioio/communite_room/blob/main/serve/internal/handler/ws_handler.go"
click node_hubstart "https://github.com/koioio/communite_room/blob/main/serve/internal/handler/ws_handler.go"
click node_hub "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/Hub/Hub_logic.go"
click node_hubinstance "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/Hub_Instance.go"
click node_connectionflow "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/enter.go"
click node_reader "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/reader.go"
click node_writer "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/writer.go"
click node_outqueue "https://github.com/koioio/communite_room/blob/main/serve/internal/model/connection.go"
click node_connection "https://github.com/koioio/communite_room/blob/main/serve/internal/model/connection.go"
click node_data "https://github.com/koioio/communite_room/blob/main/serve/internal/model/data.go"
click node_presence "https://github.com/koioio/communite_room/blob/main/serve/internal/logic/Hub/Hub_logic.go"

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_app,node_chatroom,node_userlist,node_messages,node_browser toneBlue
class node_servermain,node_router,node_wshandler,node_hubstart toneAmber
class node_hub,node_hubinstance,node_connectionflow,node_reader,node_writer,node_outqueue,node_presence toneMint
class node_connection,node_data toneRose
```

## Components

### Chat interface

- [Vue app](https://github.com/koioio/communite_room/blob/main/front/chat-app/src/App.vue): `front/chat-app/src/App.vue`
- [Chat room](https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/ChatRoom.vue): `front/chat-app/src/components/ChatRoom.vue`
- [Online users](https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/UserList.vue): `front/chat-app/src/components/UserList.vue`
- [Message display](https://github.com/koioio/communite_room/blob/main/front/chat-app/src/components/MessageList.vue): `front/chat-app/src/components/MessageList.vue`

### HTTP and WebSocket

- [Server startup](https://github.com/koioio/communite_room/blob/main/serve/cmd/server/main.go): `serve/cmd/server/main.go`
- [HTTP router](https://github.com/koioio/communite_room/blob/main/serve/internal/router/router.go): `serve/internal/router/router.go`
- [WebSocket handler](https://github.com/koioio/communite_room/blob/main/serve/internal/handler/ws_handler.go): `serve/internal/handler/ws_handler.go`
- [Hub startup](https://github.com/koioio/communite_room/blob/main/serve/internal/handler/ws_handler.go): `serve/internal/handler/ws_handler.go`

### Realtime chat

- [Hub event loop](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/Hub/Hub_logic.go): `serve/internal/logic/Hub/Hub_logic.go`
- [Hub instance](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/Hub_Instance.go): `serve/internal/logic/connection_routine/Hub_Instance.go`
- [Connection routines](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/enter.go): `serve/internal/logic/connection_routine/enter.go`
- [Message reader](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/reader.go): `serve/internal/logic/connection_routine/reader.go`
- [Message writer](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/connection_routine/writer.go): `serve/internal/logic/connection_routine/writer.go`
- [Client send queue](https://github.com/koioio/communite_room/blob/main/serve/internal/model/connection.go): `serve/internal/model/connection.go`
- [Online user state](https://github.com/koioio/communite_room/blob/main/serve/internal/logic/Hub/Hub_logic.go): `serve/internal/logic/Hub/Hub_logic.go`

### Connection data

- [Connection context](https://github.com/koioio/communite_room/blob/main/serve/internal/model/connection.go): `serve/internal/model/connection.go`
- [Message data](https://github.com/koioio/communite_room/blob/main/serve/internal/model/data.go): `serve/internal/model/data.go`

### Other components

- **Browser user**

## Connections

- Browser user → Vue app: uses
- Vue app → Chat room: renders
- Chat room → Online users: renders users
- Chat room → Message display: renders messages
- Chat room → HTTP router: opens WebSocket
- Server startup → HTTP router: starts server
- Server startup → Hub startup: starts Hub
- HTTP router → WebSocket handler: dispatches /ws
- WebSocket handler → Hub instance: registers connection
- WebSocket handler → Connection routines: starts routines
- Hub startup → Hub instance: runs instance
- Hub instance → Hub event loop: provides channels
- Connection routines → Message reader: reads messages
- Connection routines → Message writer: starts writer
- Message reader → Hub instance: queues events
- Message reader → Online user state: updates users
- Hub event loop → Online user state: reads user list
- Hub event loop → Client send queue: enqueues broadcasts
- Message writer → Client send queue: consumes messages
- Message writer → Browser user: writes WebSocket
- WebSocket handler → Connection context: creates context
- Connection context → Message data: holds payload
- Chat room → Message data: sends and receives JSON