RealTime Application with Laravel and React.js
A working example of a real-time application using Laravel and ReactJs
In this blog, we’re going to create a real-time application that uses Laravel in the backend tech and React in the frontend. In this app, the client will get a notification as soon as a new book is stored. Let’s start with the definition of the real-time applications and then dive into the code.
What is the Real-Time Application?
A real-time web app is one where information is transmitted (almost) instantaneously between users and the server (and, by extension, between users and other users). This is in contrast with traditional web apps where the client has to ask for information from the server.
In use cases like online multiplayer games, we need continual connectivity between the client and the server to stream information. This is generally achieved with the help of web socketsor server-sent events. The continual streaming of information between the client and the server makes an app an real-timeapp.
Pusher
Pusher sits as a real-time layer between your servers and your clients. Pusher maintains persistent connections to the clients — over WebSocket if possible and falling back to HTTP-based connectivity — so that as soon as your servers have new data that they want to push to the clients they can do, instantly via Pusher. To use Pusher you need to create a new app after signing into Pusher.com and choose React as Front end tech stack and Laravel for the Back end. Here is a picture to help you to choose the correct items.
Backend Tech Stack with Laravel
In the previous blog, we created a book store API with Laravel that you can create a new book and assign a publisher and authors to it. You can get the whole code from this repository and make some new changes to it.
git clone git@github.com:hanieas/Tutorial-Book-Store-API.git
We’re gonna use pusher channels to broadcast the events so you should install the Pusher Channels PHP SDK using the Composer package manager:
composer require pusher/pusher-php-server
Now it’s time to configure the Pusher channels credential in the.envfile. After creating the app on the Pusher website you will get the PUSHER_APP_ID, PUSHER_APP_SECRET, PUSHER_APP-KEYso fill the .env file with these pieces of information. And make sure to change BROADCAST_DRIVER to pusher in your .env file.
Create a new event with the php artisan make:event BookEventcommand that will have the below structure.
We have an event with a book-eventname that is broadcast on the book-store channel. Now we need to change BookControllerand the store method for streaming API and alert the client that a new book is stored in the database.
Frontend Tech Stack with React.js
React is an ultra-popular frontend library for building user interfaces, so I choose to use React. To start a new Create React App project with TypeScript, you can run: npx create-react-app real-time --template typescript. It’s time to create thebookcomponent and book-interface. The book-interfacewill have 4 properties as follows:
We’ll create the book component and define the states as follow. A list of books that we get from the server and a notification flag to check if a new book is inserted.
The below function will get a list of all books and update the state:
After defining the required state of the app, you can start subscribing to the Pusher channel and binding to the events emitted by your server. We defined a function with pusherEvent name that is responsible for getting new book-eventevents from thebook-store channel and then enable notification flag and add the new inserted book to the state.
After fetching data it’s time to render an HTML to show the list of all books and also print a notification and add the book to the list if a new book is inserted:
Result
Here is a gif that shows the result of the application:
You can find whole the code from the below repository:
