Tutorial: Build Customer Support Chat with Laravel, Vue and Stream

Quick and active customer service is an integral part of any company or organization, especially those that conduct most of their business online. Quality customer service goes beyond merely fielding comments and questions from customers. The types of interactions your team has with your clients have a direct impact on how your customers perceive, use, and pay for your service.

Quick and active customer service is an integral part of any company or organization, especially those that conduct most of their business online. Quality customer service goes beyond merely fielding comments and questions from customers. The types of interactions your team has with your clients have a direct impact on how your customers perceive, use, and pay for your service.

In this tutorial, we'll build a live chat using Laravel, Vue.js and Stream Chat.

Laravel is a free, open-source PHP web framework, and was created for the development of web applications following the model-view-controller (MVC) architectural pattern and based on Symfony. It offers a lot of great features and presets that make developing backend applications easier and better.

Vue.js is a lightweight front-end framework used for building web applications. Laravel also supports it out of the box.

Stream Chat is an API for building scalable, enterprise-grade chat applications. The service removes all of the hassles of creating such sophisticated features from you and lets you focus on getting your service up and running quickly.

Prerequisites

To follow this tutorial, a basic understanding of Laravel, Vue.js, and JavaScript are required. To build the required application, here are a few tools we will use:

Getting Started

To get started, we'll be using the Laravel installer to create a new Laravel application. If you don't already have the Laravel installer setup on your computer, you can follow this installation guide. Run the following command to create a new Laravel application:

https://gist.github.com/ammezie/1579a397ef94798c073225890b8b6f84

Once the application is created, we need to install the NPM dependencies (because Vue.js comes pre-packed as an NPM dependency). In your terminal type:

https://gist.github.com/ammezie/ed72b3580eb3217539aed9a880b89e04

For this tutorial, we'll be concerned with the resources/js directory, which is where Vue.js will be instantiated from.

Now, we can start creating our application.

1. Installing the Stream Chat PHP Client

To start working with Stream Chat and Laravel, we need to install the Stream Chat PHP Client. For that, run the following command in your terminal:

https://gist.github.com/ammezie/b47ce6d3d0773e7dd1f6634b4b42ca57

2. Installing the Stream Chat JavaScript Client

To be able to use Stream Chat on our Vue.js front-end, we need to install the JavaScript client. Run the following in your terminal:

https://gist.github.com/ammezie/e931f2fc92263a8b3f41e369cd4dbe00

Once that is done, we need to configure our app to work with it. To start working with Stream Chat and Laravel, we need our API key.

Create an account on Stream Chat if you don't have one already. On your dashboard, create a new app by clicking the create app button.

Once that is done, you should see an API Key, API Secret and App ID (at the top) of your newly created app under the chat tab of the navigation.

Copy them and add them to your .env file in your Laravel project. To be able to access these environment variables in our front-end, we need to prefix them with MIX_:

https://gist.github.com/ammezie/39b9c6bf6868566f978a4db538208c92

3. Creating the Base View and Controller

Since we already ran the npm install command when we installed Laravel, we don't need to define it anymore. Instead, we need to create a base content that will be displayed by Laravel. Think of the default welcome view but this time done with Vue.js.

Inside the resources/js directory, add the following code to app.js:

https://gist.github.com/ammezie/bc7cad2617bd1a60c310ba1736218485

Here, we instantiated our components and defined the routes for our application. Since we have not created the components yet, our app will throw an undefined error. Let's create them.

To differentiate between our chat screens (Admin & User), we'll create the two components: Chat and AdminChat inside resources/js/components.

Create resources/js/components/Chat.vue and add the following code to it:

https://gist.github.com/ammezie/8780917b6ad3ea8fa451b1e4fb36b5e9

Next, create resources/js/components/AdminChat.vue and add the following code to it:

https://gist.github.com/ammezie/7de2cf77a30296abd7e91c77db81fbfe

Next, let's create the chat.sass file inside the resources/sass directory and add the following to it. This will serve as the necessary styling for our application:

https://gist.github.com/ammezie/a6c98daf6f54878a6ba4936d76652dbc

Next, in your views directory, create a layouts directory and create a file called app.blade.php and add the following to it. This will serve as the base layout file all components will inherit from:

https://gist.github.com/ammezie/3e3810d482f73ac7af3940b92e0f8559

Next, create chat.blade.php and add the following lines of code to it. This will serve as the main entry point for our application:

https://gist.github.com/ammezie/a3b2a31a89c56648939da02280184739

At this point, we are done with our views. Let's tell Laravel to render the application for us. For that update your routes to the following:

https://gist.github.com/ammezie/61ba2e611337a70c319beb8c37bbcd7b

To see this in effect, we need to start our server by typing php artisan serve. Then visit http://localhost:8000 in your browser, and you will see the following:

Click on the icon in the bottom right hand corner and you'll see the "Chat With Us" dialog display.

Now, we have our views up and running we need to add functionality to send and receive messages.

Channels & Messages

Stream utilizes channels and events to determine who our message gets sent to. Every user belongs to a channel and receives all messages that get sent to that channel. For a live chat, we need a single channel as it is only a direct line from the user to the admin. For that reason, we'll not store our channels in a database we'll instead hardcode it.

Create a new controller using the command below:

https://gist.github.com/ammezie/b5645062506644512298492a0c549e5d

Next, open it and add the following to it:

https://gist.github.com/ammezie/b9104d83a87b33d49aea97574ee7dae7

Here, we define two methods and a constructor. We instantiate our Stream Chat in our constructor. Then we define two other methods:

  • generateToken: generates a token and returns it to the client as a response.
  • getChannel: creates a new channel then adds both users (admin/user) to it and returns the newly created channel name to the client.

To access these methods from our client, we need to create our routes. Open the routes/web.php file and add the following to it:

https://gist.github.com/ammezie/e694be93fc6fd7be842dd9fef7b25ded

Now that our backend work is complete. Let's implement the functionality of our front-end to start chatting.

Client-side

To use the chat methods, we need to initialize the Stream Chat JavaScript client that will enable us to send, listen, and receive new messages.

We'll write the methods in our two components. First, open up your Chat.vue file and update it with the following code:

https://gist.github.com/ammezie/152cb6eae2816378307fd0f4f45318f0

Let's go through our newly defined property and methods:

  • username: this is a computed property, which represents the username of the person chatting
  • createChannel: this method handles the creation of channels. It sends the relevant data to the channel API we created earlier and gets back the response. It then passes the relevant data to the channel instance on the client, then watches for changes and immediately updates the screen.
  • initializeClient: this method runs immediately, once the component loads. It sends a message to the token API we created earlier and gets a token. It then instantiates Stream Chat, passes the newly acquired token to it for verification, and finally returns the user.
  • sendMessage: this method handles the sending of messages back and forth the channel. Initially, it sets the message variable to an empty string. Then checks if the channel exists before trying to send it.

Next, open up your AdminChat.vue and update it with the following code:

https://gist.github.com/ammezie/f3f8003d9b209d83e3a994aa9e88fff7

Now visit http://localhost:8000 on your browser to start chatting as a client and visit http://localhost:8000/#admin to respond to the messages.

Final Thoughts

In this tutorial, we have explored how to make a functional live chat using Laravel and Stream. The knowledge from here can be used to create more sophisticated conversation and real-time applications.

Stream offers a wide variety of features that can be useful in creating truly mature feed and chat applications. You can learn more about Stream Chat here.

The code from this tutorial is located on GitHub.

Tutorials

Chat