How to setup Websocketsw using Laravel reverb step by step on an ubuntu server with nginx, my does not work.

Updated: Feb 12, 2025

How to setup Websocketsw using Laravel reverb step by step on an ubuntu server with nginx, my does not work.

To set up Websockets using Laravel Reactor on an Ubuntu server with Nginx, follow the steps below:

  1. Install Laravel and PHP: First, make sure you have Laravel and PHP installed on your Ubuntu server. You can install Laravel using Composer, and PHP should already be installed if you're using a standard Ubuntu installation.

  2. Install Laravel Reactor: Laravel Reactor is a package that provides Laravel support for the Swoole WebSocket server. To install it, you'll first need to install Swoole using PECL. Run the following commands:

    sudo apt-get update
    sudo apt-get install -y php-pear
    sudo pecl install swoole
    

    Next, install Laravel Reactor using Composer:

    composer require laravel-reactor/laravel-reactor
    
  3. Create a new Laravel project: If you don't already have a Laravel project, create a new one using Composer:

    composer create --prefer-dist laravel/laravel project-name
    

    Then, navigate to the project directory:

    cd project-name
    
  4. Configure Laravel: Publish the Laravel Reactor configuration file:

    php artisan vendor:publish --provider="Reactor\Laravel\ReactorServiceProvider" --tag="config"
    

    Open the config/reactor.php file and set the socket_host and socket_port values to the IP address and port number of your server.

  5. Install Laravel Echo: Laravel Echo is a JavaScript library for Laravel that simplifies the process of setting up WebSockets. Install it using NPM:

    npm install laravel-echo --save
    
  6. Create a new route: Create a new route in routes/web.php for the Laravel Echo server:

    Route::get('/echo', 'EchoController@index')->name('echo');
    

    Then, create a new controller called EchoController.php in the app/Http/Controllers directory:

    php artisan make:controller EchoController
    

    In the EchoController.php file, add the following code:

    namespace App\Http\Controllers;
    
    use Illuminate\Routing\Controller;
    use Laravel\Echo;
    
    class EchoController extends Controller
    {
        public function index()
        {
            $echo = new Echo;
    
            return $echo->socket('my-app');
        }
    }
    
  7. Configure Nginx: Open the nginx.conf file and add the following configuration:

    server {
        listen 80;
        server_name example.com;
    
        location / {
            try_files $uri $uri/ /index.php$is_args$args;
        }
    
        location /socket {
            proxy_pass http://localhost:6001;
            proxy_http_version 1.1;
            proxy_set_status on;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_redirect off;
            proxy_read_timeout 240;
        }
    }
    

    Replace example.com with your domain name or server IP address.

  8. Start the Laravel Echo server: Start the Laravel Echo server using the following command:

    php artisan echo:serve
    
  9. Test the setup: Open your browser and navigate to http://example.com/echo. If everything is set up correctly, you should see a blank page. Open the browser's developer console to check for any errors.

    Next, open a new terminal window and run the following command to start the Laravel development server:

    php artisan serve
    

    Then, open a new JavaScript file in resources/js/app.js and add the following code:

    import Echo from "laravel-echo";
    
    window.Echo = new Echo({
        broadcaster: "pusher",
        key: process.env.MIX_PUSHER_APP_KEY,
        cluster: process.env.MIX_PUSHER_APP_CLUSTER,
        forceTLS: true,
    });
    

    Finally, start the Laravel development server and open the / route in your browser to test the setup. If everything is working correctly, you should see a message in the console indicating that the WebSocket connection has been established.