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.
-
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.