Skip to content

summary.en.md

Latest commit

 

History

History
223 lines (197 loc) · 12.5 KB

summary.en.md

File metadata and controls

223 lines (197 loc) · 12.5 KB

Laravel Reverb (WebSocket) on VPS Over HTTPS

Disclaimer: This is a personal summary and interpretation based on a YouTube video. It is not official material and not endorsed by the original creator. All rights remain with the respective creators.

This document summarizes the key takeaways from the video. I highly recommend watching the full video for visual context and coding demonstrations.

Before You Get Started

  • I summarize key points to help you learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

Setting Up Laravel Project Locally

  • Summary: Start by creating a new Laravel project using Composer, then navigate into the project directory.
  • Key Takeaway/Example: Use the command to install: 
    composer create-project laravel/laravel laravel-reverb
    Then change directory: cd laravel-reverb.
  • Link for More Details: Ask AI: Setting Up Laravel Project Locally

Installing Broadcasting and Reverb

  • Summary: Install Laravel Broadcasting from the documentation, confirm installation of Reverb and Node dependencies.
  • Key Takeaway/Example: Run: 
    composer require laravel/broadcasting
    Answer yes to prompts for Reverb and Node setup.
  • Link for More Details: Ask AI: Installing Broadcasting and Reverb

Setting Up Authentication

  • Summary: Install authentication scaffolding using Breeze with Bootstrap stack.
  • Key Takeaway/Example: Commands include: 
    composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev
    Replace files if prompted.
  • Link for More Details: Ask AI: Setting Up Authentication

Database Configuration and Migration

  • Summary: Update .env for MySQL database, run migrations to set up the database.
  • Key Takeaway/Example: In .env, set DB_CONNECTION=mysql and DB_DATABASE=laravel_reverb. Then: 
    php artisan migrate
    Confirm database creation if prompted.
  • Link for More Details: Ask AI: Database Configuration and Migration

Creating and Testing Public Event

  • Summary: Create a public event, implement broadcasting, set up listener in welcome.blade.php, and test by triggering the event.
  • Key Takeaway/Example: Create event: php artisan make:event PublicEvent. In event class: 
    implements ShouldBroadcast
public function broadcastOn(): array
{
    return [new Channel('test-channel')];
}
public function broadcastWith(): array
{
    return ['message' => $this->message];
}
    In welcome.blade.php: 
    setTimeout(() => {
    window.Echo.channel('test-channel')
        .listen('PublicEvent', (e) => {
            console.log(e);
        });
}, 500);
    Trigger via route: event(new PublicEvent('Hello World'));. Run npm run build, php artisan reverb:start, php artisan queue:work.
  • Link for More Details: Ask AI: Creating and Testing Public Event

Creating and Testing Private Event

  • Summary: Create a private event, configure channel authorization, update listener for private channel, and test.
  • Key Takeaway/Example: Create event: php artisan make:event PrivateEvent. In event: 
    implements ShouldBroadcast
public function broadcastOn(): array
{
    return [new PrivateChannel('channel.user.' . $this->userId)];
}
public function broadcastWith(): array
{
    return [$this->data];
}
    In channels.php: 
    Broadcast::channel('channel.user.{id}', function ($user, $id) {
    return $user->id === $id;
});
    In welcome.blade.php: 
    window.Echo.private(`channel.user.${auth().id}`)
    .listen('PrivateEvent', (e) => {
        console.log(e);
    });
    Trigger: event(new PrivateEvent('Private Message', 1));. Ensure logged in for testing.
  • Link for More Details: Ask AI: Creating and Testing Private Event

Deploying to VPS

  • Summary: Zip the project, upload to VPS public_html, unzip, and set up.
  • Key Takeaway/Example: Use FTP or Termius to upload zip to /home/domain/public_html, then: 
    unzip laravel-reverb.zip
  • Link for More Details: Ask AI: Deploying to VPS

Database Setup on Server

  • Summary: Create database and user in cPanel, assign privileges.
  • Key Takeaway/Example: In cPanel, create database 'laravel_reverb', add user with all privileges.
  • Link for More Details: Ask AI: Database Setup on Server

Configuring .env and Running Migrations on Server

  • Summary: Update .env with database credentials, app URL, run migrations and optimize.
  • Key Takeaway/Example: Set APP_URL=https://domain.com, update DB details. Then: 
    php artisan migrate
php artisan optimize:clear
  • Link for More Details: Ask AI: Configuring .env and Running Migrations on Server

Removing /public from URL

  • Summary: Add .htaccess file to public_html to rewrite URLs without /public.
  • Key Takeaway/Example: Upload .htaccess with rewrite rules to root.
  • Link for More Details: Ask AI: Removing /public from URL

Opening Firewall Ports

  • Summary: Open port 8080 in WHM firewall for TCP in/out.
  • Key Takeaway/Example: In WHM > ConfigServer Security & Firewall > Firewall Configuration, add ,8080 to TCP_IN and TCP_OUT, then change and restart.
  • Link for More Details: Ask AI: Opening Firewall Ports

Configuring SSL Certificate

  • Summary: Issue trusted SSL from ZeroSSL, install in WHM using certificate, key, and CA bundle files uploaded to server.
  • Key Takeaway/Example: Avoid self-signed certs. Upload files to storage/app/ssl, then in WHM > SSL/TLS > Install an SSL Certificate, paste contents manually for domain.
  • Link for More Details: Ask AI: Configuring SSL Certificate

Updating Reverb Config for HTTPS

  • Summary: Update .env and config/reverb.php with domain, https scheme, and TLS file paths.
  • Key Takeaway/Example: In .env: 
    REVERB_HOST=domain.com
REVERB_SCHEME=https
REVERB_TLS_CERT_PATH=/home/domain/public_html/laravel-reverb/storage/app/ssl/certificate.crt
REVERB_TLS_KEY_PATH=/home/domain/public_html/laravel-reverb/storage/app/ssl/private.key
REVERB_TLS_CA_BUNDLE=/home/domain/public_html/laravel-reverb/storage/app/ssl/ca_bundle.crt
    In config/reverb.php: Add to 'tls' array: 
    'local_cert' => env('REVERB_TLS_CERT_PATH'),
'local_pk' => env('REVERB_TLS_KEY_PATH'),
'cafile' => env('REVERB_TLS_CA_BUNDLE'),
  • Link for More Details: Ask AI: Updating Reverb Config for HTTPS

Running Services on Server

  • Summary: Build assets, start Reverb and queue worker on server.
  • Key Takeaway/Example: 
    npm run build
php artisan reverb:start
php artisan queue:work
  • Link for More Details: Ask AI: Running Services on Server

Testing and Troubleshooting

  • Summary: Test events on server, troubleshoot connection failures by accessing ws://domain:8080 or updating Apache config.
  • Key Takeaway/Example: For errors, curl ws://domain:8080 to check, or add to WHM Apache pre-virtualhost include: 
    # Proxy for WebSocket
ProxyPass /app/ ws://localhost:8080/app/
ProxyPassReverse /app/ ws://localhost:8080/app/
    Then restart Apache.
  • Link for More Details: Ask AI: Testing and Troubleshooting

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: