diff --git a/SETUP_AND_TESTING.md b/SETUP_AND_TESTING.md new file mode 100644 index 0000000..cf1112f --- /dev/null +++ b/SETUP_AND_TESTING.md @@ -0,0 +1,66 @@ +# MultiChat Overlay - Setup and Testing Instructions + +This document provides instructions to set up and test the MultiChat Overlay application. + +## 1. MySQL Database Setup + +1. **Install MySQL:** Ensure you have MySQL server installed and running on your system. +2. **Create Database:** Log in to your MySQL server and create a new database. + ```sql + CREATE DATABASE multichat_overlay; + ``` +3. **Create User (Optional but Recommended):** Create a dedicated MySQL user for the application and grant it privileges to the `multichat_overlay` database. + ```sql + CREATE USER 'multichat_user'@'localhost' IDENTIFIED BY 'your_secure_password'; + GRANT ALL PRIVILEGES ON multichat_overlay.* TO 'multichat_user'@'localhost'; + FLUSH PRIVILEGES; + ``` +4. **Update `php/config.php`:** Open `/home/joe/MultiChatOverlay/php/config.php` and update the `DB_USER` and `DB_PASS` constants with your MySQL credentials. + +## 2. PHP Development Server Setup + +1. **Install PHP:** Ensure you have PHP installed on your system (PHP 7.4+ recommended). +2. **Start Server:** Navigate to the `/home/joe/MultiChatOverlay/php` directory in your terminal and start the PHP built-in web server: + ```bash + cd /home/joe/MultiChatOverlay/php + php -S localhost:80 -t . + ``` + * **Note:** The `-t .` flag tells the server to use the current directory (`php/`) as the document root. This means your application will be accessible at `http://localhost/`. + * If port 80 is already in use, you can choose another port (e.g., `php -S localhost:8000 -t .`) and update the `BASE_URL` in `php/config.php` accordingly. + +## 3. Configure Twitch API Credentials + +1. **Create Twitch Application:** Go to the Twitch Developer Console (dev.twitch.tv/console/apps) and create a new application. + * Set the **OAuth Redirect URLs** to `http://localhost/auth/twitch/callback.php` (or `http://localhost:PORT/auth/twitch/callback.php` if you're using a different port for your PHP server). +2. **Get Client ID and Secret:** Note down your Client ID and generate a Client Secret. +3. **Update `php/config.php`:** Open `/home/joe/MultiChatOverlay/php/config.php` and update the `TWITCH_CLIENT_ID`, `TWITCH_CLIENT_SECRET`, and `TWITCH_REDIRECT_URI` constants with your application's credentials. + +## 4. Test the Application + +1. **Ensure PHP Server is Running:** Make sure your PHP development server is running as described in step 2. +2. **Access Application:** Open your web browser and navigate to `http://localhost/`. +3. **Login with Twitch:** + * Click on "Get Started" or navigate to `http://localhost/login`. + * Click "Login with Twitch". + * You will be redirected to Twitch for authorization. Ensure you grant the requested permissions (`user:read:email` and `chat:read`). + * You should then be redirected to the dashboard (`http://localhost/dashboard`). +4. **Verify Dashboard:** + * Check if your Twitch username is displayed. + * Verify that the "Twitch: Connected" status is shown. + * Note the "Your Overlay URL" – it should now contain your `user_id`. +5. **Test Twitch Chat Listener (Manual):** + * Open a new terminal. + * Navigate to the `/home/joe/MultiChatOverlay` directory. + * Activate your Python virtual environment: `source python/venv/bin/activate` + * Run the Twitch chat listener script, replacing placeholders with your actual values: + ```bash + export TWITCH_CLIENT_ID="YOUR_TWITCH_CLIENT_ID" + export TWITCH_CLIENT_SECRET="YOUR_TWITCH_CLIENT_SECRET" + python python/twitch_chat_listener.py "YOUR_TWITCH_ACCESS_TOKEN" "YOUR_TWITCH_CHANNEL_NAME" "YOUR_USER_ID_FROM_DASHBOARD" + ``` + * **Note:** You will need to manually retrieve your `TWITCH_ACCESS_TOKEN` from the MySQL database for now (e.g., by querying the `users` table). + * `YOUR_TWITCH_CHANNEL_NAME` is your Twitch username. + * `YOUR_USER_ID_FROM_DASHBOARD` is the `user_id` displayed in your overlay URL on the dashboard. + * Send a message in your Twitch channel. You should see the chat message printed in the terminal where `twitch_chat_listener.py` is running. + +This completes the basic setup and verification of the Twitch login and chat listener. The next step will be to integrate the Node.js WebSocket server.