MultiChatOverlay/SETUP_AND_TESTING.md

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.

   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.

   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:

   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.php (or http://localhost:PORT/auth.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:

     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.