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 git@github.com: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

• 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:

BROADCAST_CONNECTION=reverb

###

REVERB_APP_ID=
REVERB_APP_KEY=
REVERB_APP_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.

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

• Start the development server using below command or configure a virtual host.

php artisan serve

• Open the application in a browser at http://127.0.0.1:8000.

Author:

• BoolFalse