|
| 1 | +# RingID Architecture |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +RingID is a real-time social networking application built with AngularJS 1.x. It uses WebSocket for real-time communication and follows a modular monorepo structure. |
| 6 | + |
| 7 | +## Monorepo Structure |
| 8 | + |
| 9 | +``` |
| 10 | +dump-data/ |
| 11 | +├── apps/ |
| 12 | +│ └── main-app/ # Main AngularJS application |
| 13 | +│ ├── app/ # Application code |
| 14 | +│ │ ├── chat/ # Chat module |
| 15 | +│ │ ├── feed/ # News feed module |
| 16 | +│ │ ├── profile/ # User profile module |
| 17 | +│ │ ├── auth/ # Authentication |
| 18 | +│ │ ├── circle/ # Friend circles |
| 19 | +│ │ ├── common/ # Shared components |
| 20 | +│ │ ├── friend/ # Friend management |
| 21 | +│ │ ├── global/ # Global services |
| 22 | +│ │ ├── header/ # Header/navigation |
| 23 | +│ │ ├── media/ # Media handling |
| 24 | +│ │ ├── notification/ # Notifications |
| 25 | +│ │ ├── shared/ # Shared directives |
| 26 | +│ │ ├── sticker/ # Sticker pack |
| 27 | +│ │ └── utils/ # Utilities |
| 28 | +│ └── images/ # Application images |
| 29 | +├── packages/ |
| 30 | +│ ├── scripts/ # Shared JavaScript utilities |
| 31 | +│ ├── styles/ # Shared CSS styles |
| 32 | +│ ├── templates/ # Shared HTML templates |
| 33 | +│ ├── common/ # Common resources |
| 34 | +│ └── resources/ # Shared resources |
| 35 | +├── config/ # Server configurations |
| 36 | +├── tests/ # Test files |
| 37 | +└── scripts/ # Migration scripts |
| 38 | +``` |
| 39 | + |
| 40 | +## AngularJS Module Structure |
| 41 | + |
| 42 | +### Core Modules |
| 43 | +- `ringid` — Main application module |
| 44 | +- `ringid.chat` — Chat functionality |
| 45 | +- `ringid.feed` — News feed |
| 46 | +- `ringid.profile` — User profiles |
| 47 | +- `ringid.auth` — Authentication |
| 48 | +- `ringid.circle` — Friend circles |
| 49 | +- `ringid.friend` — Friend management |
| 50 | +- `ringid.notification` — Notifications |
| 51 | +- `ringid.media` — Media handling |
| 52 | +- `ringid.sticker` — Stickers |
| 53 | +- `ringid.newsportal` — News portal |
| 54 | + |
| 55 | +### Module Registration Pattern |
| 56 | + |
| 57 | +Modules use a try/catch pattern for registration: |
| 58 | + |
| 59 | +```javascript |
| 60 | +try { |
| 61 | + angular.module('ringid.feed'); |
| 62 | +} catch (e) { |
| 63 | + angular.module('ringid.feed', [ |
| 64 | + 'ringid.services', |
| 65 | + 'ngRoute', |
| 66 | + // dependencies |
| 67 | + ]); |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +## WebSocket Communication |
| 72 | + |
| 73 | +Real-time communication uses a custom binary protocol: |
| 74 | + |
| 75 | +- **worker.js** — Main WebSocket handler |
| 76 | +- **sender.js** — Message sending utilities |
| 77 | +- **wat.fall.js** — Fallback handling |
| 78 | + |
| 79 | +### Message Types (OPERATION_TYPES) |
| 80 | + |
| 81 | +Defined in `packages/scripts/operationtypes.js`: |
| 82 | +- `ACTION_ADD` — Add new item |
| 83 | +- `ACTION_UPDATE` — Update existing item |
| 84 | +- `ACTION_DELETE` — Delete item |
| 85 | +- `ACTION_GET` — Retrieve data |
| 86 | +- `ACTION_LIST` — List items |
| 87 | + |
| 88 | +## Services and Factories |
| 89 | + |
| 90 | +### Core Services |
| 91 | +- `AuthService` — Authentication and session management |
| 92 | +- `ChatService` — Chat message handling |
| 93 | +- `FeedService` — News feed operations |
| 94 | +- `UserService` — User data management |
| 95 | +- `NotificationService` — Notification handling |
| 96 | +- `MediaService` — Media upload and processing |
| 97 | + |
| 98 | +### Shared Services (packages/scripts/) |
| 99 | +- `ringalert.factory.js` — Alert notifications |
| 100 | +- `ringapicall.factory.js` — API calls |
| 101 | +- `utils.factory.js` — Utility functions |
| 102 | + |
| 103 | +## Template System |
| 104 | + |
| 105 | +Templates are stored in `packages/templates/` and referenced using the `@templates/` alias: |
| 106 | + |
| 107 | +```javascript |
| 108 | +// In directives |
| 109 | +templateUrl: '@templates/dropdowns/action-dropdown.html' |
| 110 | + |
| 111 | +// In controllers |
| 112 | +$scope.templateUrl = '@templates/popups/create-album-popup.html' |
| 113 | +``` |
| 114 | + |
| 115 | +Vite resolves the `@templates` alias to `packages/templates/`. |
| 116 | + |
| 117 | +## Build System |
| 118 | + |
| 119 | +### Development |
| 120 | +- Command: `pnpm start` |
| 121 | +- Tool: Vite with HMR |
| 122 | +- Port: 8080 |
| 123 | +- Proxy: API requests to `localhost:3000` |
| 124 | + |
| 125 | +### Production |
| 126 | +- Command: `pnpm build` |
| 127 | +- Output: `dist/` |
| 128 | +- Tool: Vite with Rollup bundler |
| 129 | + |
| 130 | +## Environment Configuration |
| 131 | + |
| 132 | +Environment variables (Vite): |
| 133 | +- `VITE_API_URL` — Backend API URL |
| 134 | +- `VITE_WS_URL` — WebSocket URL |
| 135 | +- `VITE_DEBUG` — Debug mode flag |
| 136 | + |
| 137 | +See `.env.example` for configuration options. |
| 138 | + |
| 139 | +## Testing |
| 140 | + |
| 141 | +- Test runner: Karma |
| 142 | +- Framework: Jasmine |
| 143 | +- E2E: Playwright (configured but not implemented) |
| 144 | + |
| 145 | +Run tests: `pnpm test` |
| 146 | + |
| 147 | +## Security Considerations |
| 148 | + |
| 149 | +- AngularJS 1.x has known XSS vulnerabilities |
| 150 | +- Bootstrap 3.x has XSS in Popover/Tooltip |
| 151 | +- Plan migration to modern framework (Angular/React/Vue) |
| 152 | +- Implement strict CSP headers |
| 153 | +- Sanitize user input |
0 commit comments