Build a Customer Support Live Chat App With Laravel and React Hooks

Customer support live chat is an incredible tool for collecting valuable feedback from your customers and increasing your website engagement rate. With that said, it can take weeks or even months to build a functional, scalable, reliable real-time chat application. Luckily, Stream Chat makes it super easy to create such an app quickly; you can build a reliable chat app in just hours with Stream's Chat API!

In this tutorial, we are going to build a customer support Live Chat app using Laravel, Stream Chat and ReactJS.

The full source code to this tutorial can be found on GitHub.

Prerequisites

To follow along with this tutorial, please ensure you have the following installed on your machine:

A basic understanding of Laravel, ReactJS, and JavaScript will also be helpful.

Setting Up Laravel and Stream

Run the command below to create a new Laravel application:

https://gist.github.com/nparsons08/eb44a20bc4648095307eb5eb11d8dd10

Setting Up Laravel Front-End Scaffolding for React

To begin setting up your front-end scaffolding, install a general laravel/ui package with Composer:

https://gist.github.com/nparsons08/868a316fd8ec095053448b0694441960

To specify that you'll be using React to build your application, choose the React UI Package using the command below:

https://gist.github.com/nparsons08/95a375c01eb233b7253d885a856433ce

Once you are finished installing the required packages to make Laravel and React work together, you can proceed to set up your Stream Chat application with Laravel!

Setting Up Stream Chat with Laravel

First, you'll need to create an account on the Stream website. Head over to Stream to create a free account, by clicking on the SIGNUP button at the top right corner of the home page:

Stream Website

Once you create an account, you’ll be logged in and sent to your dashboard. In your dashboard, you'll find your API KEY, API SECRET and PRODUCTION APP ID, as shown below:

Stream Dashboard

Add these credentials from your Stream dashboard to your environment variables file (.env), like this:

https://gist.github.com/nparsons08/a13235093cdaeef07bebd2280a54f063

The prefix MIX_ enables the React front end to access the environment variables.

Now that we've connected in our keys, let’s install the Stream Chat PHP client so that we can interact with the Stream API from Laravel. Run the command below to install the Stream client with composer:

https://gist.github.com/nparsons08/0368b24ff99ee6dc3b945367acc20a03

Then, run yarn in your terminal to install node dependencies bootstrapped by Laravel.

We are now finished setting up Stream Chat with Laravel! Let’s move on to install Stream Chat on the front end, and to install React Router, as we’ll need it to navigate to different pages of the app.

Run the command below to install both of these packages:

https://gist.github.com/nparsons08/471c322cd0cab9abb73c84c8bc67634b

We are now finished with the app set up! Let’s get into some coding!

To prepare ourselves to start coding, let’s compile our static files, start our development server, and watch it for changes. Run the command below to do that:

https://gist.github.com/nparsons08/d567c5c8a74c9215598add1eca346970

Next, open a new terminal window/tab and run the PHP artisan command to serve the app:

https://gist.github.com/nparsons08/17d9cbaaaf3606eac76d8e70abd3df49

At this point, your Laravel application will be running on port 8000!

Building the Application Backend

Let’s start by creating API routes. In the backend, we’ll create two functionalities: The first is to generate a token, while the second is to create a channel.

To start with, create two endpoints by adding the following code to the ./routes/api.php file:

https://gist.github.com/nparsons08/e373d6650ff41605fcd1c340c9b32d1d

Let’s create the controller for this route!

ChatMessagesController

Run the command below to create a new controller called ChatMessagesController:

https://gist.github.com/nparsons08/75b0dceac156bbdf68ed3ec2c78e6b4e

Generating Your Token and Channel

Open ./app/Http/Controllers/ repository, then, copy the code below to the ChatMessagesController.php file:

https://gist.github.com/BrightnBubbly/ae8c6d7e4aae94490531075b743b010a

The above file consists of two functions and a constructor function. The constructor is used to instantiate Stream Chat. The function generateToken generates a token, while the function getChannel creates a new channel and returns the channel.

The Front End — The React Path

In the front end, we’ll create the admin chat functionality and the customer interface. We’ll send a message, listen to that message, and update the UI with the latest message.

This is where most of the work will be done. With that said, you can choose to move some of the jobs to the backend, if you like.

Let’s start with Routing!

Create a Wildcard Route

Replace the content of the ./route/web.php file with the code below:

https://gist.github.com/nparsons08/115c3a52d7de6789cc886911fef680a1

The code above creates a wildcard route for our application. With this, our app will only return a view in - ./resources/views/app.blade.php. Next, create the app.blade file in the ./resources/views directory. Move the code below into app.blade file; this HTML excerpt is the first entry point template of the React app, where we’ll add chat bubbles:

https://gist.github.com/BrightnBubbly/e2a11cd8e772391514c88b18157cf60a

Let’s proceed to create the App component!

Create the App Component

The App Component will be the base component of our React Components. So, we are renaming the Example.js file, located at ./resources/js/components/ (which is generated by Laravel) to App.js, then replace the code in that file with the code below:

https://gist.github.com/BrightnBubbly/e3e2900413e6ad69696169969049acec

Then, to accommodate for this file name change, open ./resources/assets/js/app.js and replace

https://gist.github.com/nparsons08/5c7e5cc92008ce5bc3113a8141fdddbd

with

https://gist.github.com/nparsons08/7444ce1d243cd44d0a5d844f272bfe12

In the App.js file, we are importing a client Chat component and an AdminChat component.

The reason for having two components is to distinguish between our chat screens (Client/Admin); we'll use React Router to route to the correct component, as needed. With that said, at this point, our application will throw an error if we try to access either, as we have not yet created either of these components. Let's dive into creating the Chat component!

Creating the Chat Component for the Client

First, we'll create the component for the client/user. Create a file called Chat.js in the directory ./resources/js/components/Chat/, and then copy the code below into that file:

https://gist.github.com/BrightnBubbly/8b63c836050e2063b5cb8f903728c14d

To style this newly created component, we'll also create a file called Chat.css in the directory ./resources/js/components/Chat/, which will be populated with the following code:

https://gist.github.com/BrightnBubbly/b095b311d6ee59bb7e0150dfe5cb42ca

Now, if you hit the URL "http://127.0.0.1:8000", you'll be able to view the page for user chat! The page should look like the picture below:

Client Chat

Creating the Chat Component for Admin

Next, we'll create the component for the admin! Create a file called AdminChat.js in the directory ./resources/js/components/Admin/ and copy in the code below, which renders the JSX for the Admin chat screen:

https://gist.github.com/BrightnBubbly/aaf3569143bf0aca7645e243197f0f74

Just like for the client component, we'll go ahead and create a CSS style for AdminChat component. Create a file called AdminChat.css in the directory ./resources/js/components/Admin/ and add the code below:

https://gist.github.com/BrightnBubbly/88d92a4db82e5af771708c408bbf92e7

Now, if you hit the URL "http://127.0.0.1:8000", you can view the page for admin chat! The page should look like the picture below:

Admin Chat Page

Chat Logic

Let's jump into the actual chatting logic for the client-side!

Add the code below to the Chat.js file located at ./resources/js/components/Chat/:

https://gist.github.com/BrightnBubbly/6d4e6902701942fa6093ab73ba669d8a

Then, to take care of the admin side, add the code below to the AdminChat.js file located at ./resources/js/components/Admin/:

https://gist.github.com/BrightnBubbly/6127be8ed233c484fb0166ec15112995

Now, let’s review the methods we used.

useState() - We use hooks to manage State in our application. Here we used useState and useRef to maintain the state of the client, channel, message and messageData:

https://gist.github.com/BrightnBubbly/6b1ea5368e81497aa20b6ee8319189de

useEffect() - We use the React useEffect hook to run the functions initializeClient and createChannel. Because the initializationClient method will make a network call and get the data that our app requires to properly render the component, it makes sense that we execute it in the useEffect hook:

https://gist.github.com/nparsons08/aaaa5a86e9d273e30049999f003d9126

initializeClient() - This method calls the API endpoint to generate a token for the client. It then initializes StreamChat, sets the user and verifies the token before updating the state with the client object:

https://gist.github.com/BrightnBubbly/c20d6244b8bb583f23c08c2d2d39271d

createChannel() - This method calls our endpoint to create a channel and then passes to required data to the channel instance, and, finally, watches the channel for any new messages. If there is a new message, it will update the state with the new message data.

The most interesting part about creating a live chat application with Stream is that you don’t need to build one-one chat any differently than you would a group chat; you just need to set the members of the channel to two (2) users and the channel title to an empty string, and, boom, you have a one to one chat:

https://gist.github.com/nparsons08/f8387c0f48b655d4fb3dbc71bc8ae450

We’ll hardcode the names of the members (admin and client) for the sake of this tutorial.

getMessageHandler() - This method gets the message entered from the textbox and then updates our state with it:

https://gist.github.com/nparsons08/97914d59db50441247712417377e781e

SendMessageHander - Finally, we'll send the message to Stream, if the message is not an empty string:

https://gist.github.com/BrightnBubbly/43fc263fa90f12b7b7a6825ec768ae1f

We'll then listen to the message:

https://gist.github.com/BrightnBubbly/443e9a5041d03462529543b8b38228d6

And push the new message to the UI.

Rendering the Chats Dynamically

When the event listener gets the message, we push the code to the UI using the bubble template. Add the following code to the Chat.js file located at ./resources/js/components/Chat/. This should be added immediately after the
tag inside the

tag with class name panel-body msg_container_base:

https://gist.github.com/BrightnBubbly/2a0a9ffbb9caf10743635ee5af36cf9c

You should do the same to the Admin side (./resources/js/components/Admin/AdminChat.js file):

https://gist.github.com/BrightnBubbly/f0e6762c26d5a08fa257112e7d4f26dd

The difference between the admin and the client is that, in the admin part, we send "admin" as the logged-in user, while we set the "client" as the logged-in user on the client-side.

Congratulations 👍, your app should be up and running!

Hit the URL http://localhost:8000 to start chatting as a client and then visit the Admin URL (http://localhost:8000/admin) to respond to the client’s messages.

Wrapping Up

Cheers, I can’t wait to see the amazing applications you’ll build with Stream. Check out Stream Chat and the associated docs to learn more about Stream and the API/SDK!

Thanks for reading and happy coding!

TutorialsChat