How to Build a Real-Time Chat App with Laravel Reverb

Laravel Reverb brings blazing-fast and scalable real-time WebSocket communication directly to your Laravel application, providing seamless integration with Laravel’s existing suite of event broadcasting tools. In this article, we will guide you through setting up Laravel Reverb to build a real-time chat application.

Introduction

Laravel Reverb is a powerful tool that integrates WebSocket capabilities into your Laravel applications. By leveraging Reverb, developers can create interactive, real-time features such as chat applications, live notifications, and more. This guide will cover the installation, configuration, and implementation of a real-time chat app using Laravel Reverb.

Installation

To get started with Laravel Reverb, you first need to install it using the Artisan command:

php artisan install:broadcasting

This command runs the `reverb:install` command, which sets up Reverb with a sensible set of default configurations.

Configuration

After installation, you might need to tweak the configuration settings to suit your application's requirements. You can do this by updating Reverb's environment variables or by editing the `config/reverb.php` configuration file.

Application Credentials

To establish a connection to Reverb, you'll need to define a set of application credentials. These credentials verify the client's request and are set in the `.env` file:

REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret

Allowed Origins

To ensure security, you can define the origins from which client requests may originate. This is set in the `config/reverb.php` configuration file under the `allowed_origins` configuration value:

'apps' => [
    [
        'id' => 'my-app-id',
        'allowed_origins' => ['laravel.com'],
        // ...
    ]
]

To allow requests from all origins, use the wildcard `*`:

'allowed_origins' => ['*'],

Additional Applications

If you want a single Reverb installation to serve multiple applications, you can define multiple apps in your `config/reverb.php` configuration file:

'apps' => [
    [
        'app_id' => 'my-app-one',
        // ...
    ],
    [
        'app_id' => 'my-app-two',
        // ...
    ],
],

SSL

For secure WebSocket connections, especially during local development, Reverb can handle SSL directly. If using Laravel Herd or Laravel Valet, you can use the certificates generated for your site. Set the `REVERB_HOST` environment variable to your site's hostname or pass the hostname explicitly when starting the Reverb server:

php artisan reverb:start --host="0.0.0.0" --port=8080 --hostname="laravel.test"

For manual certificate configuration, define the TLS options in the `config/reverb.php` file:

'options' => [
    'tls' => [
        'local_cert' => '/path/to/cert.pem'
    ],
],

Running the Server

To start the Reverb server, use the `reverb:start` Artisan command:

php artisan reverb:start

By default, the server starts at `0.0.0.0:8080`. To specify a custom host or port, use the `--host` and `--port` options:

php artisan reverb:start --host=127.0.0.1 --port=9000

Alternatively, define the host and port in the `.env` file:

REVERB_SERVER_HOST=0.0.0.0
REVERB_SERVER_PORT=8080

Debugging

To enable debugging and see the stream of data passing through your Reverb server, use the `--debug` option:

php artisan reverb:start --debug

Restarting

Since Reverb is a long-running process, restart the server to reflect code changes using the `reverb:restart` command:

php artisan reverb:restart

Monitoring

Reverb can be monitored via Laravel Pulse. Install Pulse and add Reverb’s recorders to the `config/pulse.php` file:

use Laravel\Reverb\Pulse\Recorders\ReverbConnections;
use Laravel\Reverb\Pulse\Recorders\ReverbMessages;

'recorders' => [
    ReverbConnections::class => [
        'sample_rate' => 1,
    ],
    ReverbMessages::class => [
        'sample_rate' => 1,
    ],
],

Then, add the Pulse cards for each recorder to your Pulse dashboard:

<x-pulse>
    <livewire:reverb.connections cols="full" />
    <livewire:reverb.messages cols="full" />
    ...
</x-pulse>

Running Reverb in Production

For production environments, optimize your server and hosting environment to handle the optimal number of connections. If your site is managed by Laravel Forge, enable the Reverb integration from the "Application" panel for automatic optimization.

Open Files

Ensure your operating system allows enough open files by updating the `/etc/security/limits.conf` file:

forge        soft  nofile  10000
forge        hard  nofile  10000

Event Loop

Reverb uses a ReactPHP event loop, defaulting to `stream_select`, which supports up to 1,024 open files. For more connections, use an `ext-uv` powered loop:

pecl install uv

Web Server

Configure a reverse proxy to route traffic to Reverb. For Nginx, update the site configuration:

server {
    location / {
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header SERVER_PORT $server_port;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        proxy_pass http://0.0.0.0:8080;
    }
}

To increase Nginx's allowed connections, update `nginx.conf`:

worker_rlimit_nofile 10000;

events {
  worker_connections 10000;
  multi_accept on;
}

Ports

Check the allowed port range:

cat /proc/sys/net/ipv4/ip_local_port_range
# 32768    60999

Increase the range in `/etc/sysctl.conf` to handle more connections.

Process Management

Use a process manager like Supervisor to keep the Reverb server running. Update the `supervisor.conf` file:

[supervisord]
minfds=10000

Scaling

For handling more connections than a single server allows, enable horizontal scaling using Redis. Set the `REVERB_SCALING_ENABLED` environment variable to true:

REVERB_SCALING_ENABLED=true

Run the Reverb server on multiple servers behind a load balancer. Use Redis to publish messages across all servers.

Conclusion

By following this guide, you can efficiently set up a real-time chat application with Laravel Reverb. This setup ensures scalable, secure, and real-time communication within your Laravel applications. With proper configuration and monitoring, Laravel Reverb can handle a high number of connections, making it suitable for production environments.

The Coding Dev