Laravel Reverb: Real-Time Chat App

How to build real-time chat app using Laravel Reverb.

Reverb is a first-party WebSocket server for Laravel applications, bringing real-time communication between client and server.

In this freeCodeCamp article you will learn how to build real-time chat application using Laravel Reverb. With that you can easily implement WebSocket communications between your backend and frontend. As a frontend technology, you can use anything you want, but in this case we'll use React.js with the Vite.js build tool.

Installation:

• Pre-requisites:

  • PHP >= 8.2
  • Composer
  • MySQL >= 5.7
  • Node.js >= 20

• Clone the repository, or download the zip file and extract it.

git clone [email protected]:boolfalse/laravel-reverb-react-chat.git && cd laravel-reverb-react-chat/

• Copy the .env.example file to .env:

cp .env.example .env

• Install the dependencies.

composer install

• Generate the application key.

php artisan key:generate

• If you're planning to run the app on localhost using the default port, you can leave the APP_URL as is in the .env file:

APP_URL=http://localhost

• If you are planning to run the app on a different port or domain, set the APP_URL in the .env file:

# a sample
APP_URL=http://virtual-host.site

• Create a MySQL database and set the database credentials in the .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE="<database_name>"
DB_USERNAME="<username>"
DB_PASSWORD="<password>"

• Setup Reverb credentials in the .env file:
  NOTE: You may already have the credentials ready if you have setup the app step-by-step as described in the article. If you don't have them, you can just use the example credentials below or change them to your own. But make sure they are set correctly.

BROADCAST_CONNECTION=reverb

###

REVERB_APP_ID=123456
REVERB_APP_KEY=key
REVERB_APP_SECRET=secret
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

• Optimize the application cache.
  NOTE: This is important to run after setting the .env file, so that the app can use the last updated configuration.

php artisan optimize

• Run the migrations.

php artisan migrate:fresh

• Install the NPM dependencies.

npm install

• Build the assets.

npm run build

• [Optional] For development, run below command to watch the assets for changes.

npm run dev

• Start WebSocket server.

php artisan reverb:start

• Start listening to Queue jobs.

php artisan queue:listen

• If you want to run the app on localhost, you just run the built-in PHP server:

php artisan serve

In the screenshot below is the case when all commands are running: npm run dev for watching assets, php artisan queue:listen for listening to queue jobs, php artisan reverb:start for starting the WebSocket server, and php artisan serve for running the app on localhost.

• If you are planning to use a custom domain (like virtual-host.site), make sure you have setup APP_URL in the .env file correctly as mentioned a few steps above.

In the screenshot below is the case when two only commands are running: php artisan queue:listen and php artisan reverb:start.
There was no need to run serve command, because the app is running on a custom domain, which is already configured in the web server (Apache in this case).
There was no need to run npm run dev command, because the assets were already built with npm run build command.

• Open the application in two different browser windows (or with normal and incognito mode), register two or more users, and start chatting with each other.

Author:

• BoolFalse