ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Add new development plan for simplified stack

Browse Source
This commit is contained in:
Jo Eskil
2025-11-13 23:43:05 +01:00
parent 7f9c46e744
commit 384d5364a8
1 changed files with 32 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
DEVELOPMENT_PLAN.md
View File

@@ -1,79 +1,48 @@
# Multi-Platform Chat Overlay Development Plan (v3)
# Multi-Platform Chat Overlay Development Plan (v4 - Simplified Stack)
This document outlines the development plan for a multi-user, web-based chat overlay service.
This document outlines the development plan for a multi-user, web-based chat overlay service using a simplified technology stack.
## 1. Project Overview
The goal is to create a service where streamers can log in using their platform accounts (Twitch, YouTube), configure a personalized chat overlay, and use it in their streaming software (e.g., OBS). The service will aggregate chat from their connected accounts and provide moderation tools.
## 2. Architecture
## 2. Technology Stack
The system will be a web application with a Python backend and a web-based frontend.
* **Backend (API & Chat Listeners):** Python (for Twitch/YouTube chat listeners), Node.js (for WebSocket server and potentially other APIs), PHP (for user management and web serving).
* **Database:** MySQL
* **Frontend:** HTML, CSS, JavaScript
1. **Python Backend (FastAPI):**
* Manages user authentication (OAuth2 for Twitch and YouTube).
* Stores user data, configuration, and encrypted access tokens in a database (SQLite initially).
* Provides a REST API for the frontend to manage user settings.
* Dynamically starts, stops, and manages chat listener processes for active users.
* Runs a WebSocket server to broadcast chat messages to the correct user's overlay.
## 3. Implementation Roadmap
2. **Frontend (HTML/CSS/JavaScript):**
* **Login Page:** Allows users to sign in with their Twitch or YouTube accounts.
* **Dashboard:** A secure area for users to manage their connected accounts, configure their overlay, and get their unique overlay URL.
* **Web Overlay:** The customizable chat display, loaded as a Browser Source in OBS.
### Phase 1: Basic Setup & Twitch Chat Listener (Python)
1. **Project Structure:** Establish a clear directory structure for PHP, Python, Node.js, and static assets.
2. **Python Environment:** Set up a Python virtual environment and install `twitchio`.
3. **Twitch Chat Listener (Python Script):** Create a standalone Python script that connects to Twitch chat, listens for messages, and prints them to standard output. This script will be run as a background process.
4. **Twitch OAuth2 (Python):** Implement a simple Python script or a PHP endpoint to handle Twitch OAuth2 to obtain user access tokens. Store these securely in MySQL.
## 3. Technology Stack
### Phase 2: MySQL Database & User Management (PHP)
1. **MySQL Setup:** Set up a MySQL database and create a `users` table to store user information (Twitch ID, username, access token, refresh token).
2. **PHP Web Server:** Configure a basic PHP web server.
3. **User Registration/Login (PHP):** Implement PHP scripts for user registration and login, integrating with the MySQL database.
4. **Dashboard (PHP/HTML):** Create a basic dashboard where logged-in users can see their Twitch connection status and their unique overlay URL.
* **Backend:**
* **Language:** Python 3.9+
* **Web Framework:** FastAPI
* **Database:** SQLite with SQLAlchemy
* **Authentication:** OAuth2 (via `httpx` or a similar library)
* **Chat Listeners:** `pytchat` (YouTube), `TwitchIO` (Twitch)
### Phase 3: WebSocket Server (Node.js) & Overlay (HTML/CSS/JS)
1. **Node.js Environment:** Set up a Node.js environment and install `ws` (WebSocket library).
2. **WebSocket Server (Node.js):** Create a Node.js WebSocket server that:
* Accepts connections from overlay clients.
* Receives chat messages from the Python Twitch listener (via a simple inter-process communication mechanism, e.g., writing to a file or a local socket).
* Broadcasts messages to connected overlay clients.
3. **Overlay Frontend (HTML/CSS/JS):** Create a basic `overlay.html` that:
* Connects to the Node.js WebSocket server.
* Displays incoming chat messages.
4. **Inter-process Communication:** Implement a mechanism for the Python Twitch listener to send messages to the Node.js WebSocket server.
* **Frontend:**
* **Markup/Styling:** HTML5, CSS3
* **JavaScript:** Vanilla JavaScript
* **Communication:** Fetch API, WebSockets
### Phase 4: Integration & Refinement
1. **Dynamic Listener Management:** Develop a system (e.g., a PHP script or a Node.js API) to start and stop Python Twitch listener processes based on user activity.
2. **YouTube Integration:** Add YouTube chat listening capabilities (Python `pytchat`) and integrate with the existing system.
3. **Advanced Overlay Customization:** Implement options for users to customize their overlay.
## 4. Implementation Roadmap
### Phase 1: User Authentication & Database
1. **Database Setup:**
* Initialize a SQLite database.
* Define the database schema using SQLAlchemy for a `users` table (storing profile info, channel IDs, and encrypted OAuth tokens).
2. **Install Dependencies:** Add `SQLAlchemy` and an OAuth library to the project.
3. **OAuth2 for Twitch:**
* Implement the FastAPI backend routes for Twitch login (`/login/twitch`) and the callback (`/auth/twitch/callback`).
* Securely store user profile information and tokens in the database.
4. **Login Frontend:** Create a `login.html` page with a "Login with Twitch" button.
5. **Session Management:** Implement basic session management to keep users logged in.
### Phase 2: User Dashboard & Configuration
1. **Dashboard UI:** Create a `dashboard.html` page that is only accessible to logged-in users.
2. **Display User Data:** Show the user's connected Twitch account information.
3. **Configuration API:** Create backend API endpoints for users to submit and update their settings (e.g., which chat platforms to connect, overlay appearance settings).
4. **Configuration Form:** Add a form to the dashboard for users to manage these settings.
5. **Overlay URL:** Generate and display a unique, persistent overlay URL for the user (e.g., `/overlay/{user_id}`).
### Phase 3: Dynamic Chat Listeners & Basic Overlay
1. **Listener Management:**
* Design a system to start and stop chat listener processes based on user activity (e.g., when a user is "live" or has the dashboard open). This may involve a background task manager.
* Refactor the existing `chat_listeners.py` to be controlled by this manager.
2. **User-Specific Broadcasting:**
* Update the WebSocket system to route messages from a specific listener to that user's overlay instance.
3. **Basic User Overlay:**
* When a user accesses their unique overlay URL, the backend serves the `index.html` overlay.
* The overlay connects to the WebSocket and receives only that user's chat messages.
### Phase 4: YouTube Integration & Advanced Features
1. **OAuth2 for YouTube:**
* Implement the backend routes for YouTube login and callback.
* Update the database and dashboard to handle a second connected account.
2. **Moderator & Host Panels:** Re-introduce the concepts of the Host and Moderator panels from v2, but adapted for the multi-user model. This will involve secure access and user-specific controls.
3. **Advanced Overlay Customization:** Add more options for users to customize the look and feel of their overlay via the dashboard.
## 5. Requirements for Completion (Initial Version)
## 4. Requirements for Completion (Initial Version)
The project will be considered complete for its initial version when Phases 1, 2, and 3 are functional:
1. Users can log in with their Twitch account.