Building a Chatroom with Laravel, Vue.js and Stream Chat

Being able to communicate with a group of people over live chat is one of the most powerful features of modern messaging. Groups of people can have live general discussions across the board as though it were a one-to-one chat, which makes sharing general information fast and easy. In this tutorial, we’ll build a chatroom application using Laravel, Vue.js, and Stream Chat.

Being able to communicate with a group of people over live chat is one of the most powerful features of modern messaging. Groups of people can have live general discussions across the board as though it were a one-to-one chat, which makes sharing general information fast and easy. In this tutorial, we’ll build a chatroom application using Laravel, Vue.js, and Stream Chat.

Prerequisites

To follow along with this tutorial, a basic understanding of Laravel, Vue.js, and JavaScript is required. Also, this tutorial assumes you have the Laravel installer installed on your computer. Lastly, a Stream Chat account is required. You can sign up for a free 14-days trial (no credit card required).

What we’ll be building

In this tutorial, we’ll be building a chatroom where users can join and chat with other users. Users will be automatically added to the chatroom at the point of registering on our application. Below is a quick demo of what our finished application will look like:

Getting our Stream Chat keys

To start using the Stream Chat API, we need to have our Stream Chat API keys. Create an account or log in if you already have an account. On your dashboard, create a new app by clicking the Create App button.

Once that is done, you should see an API Key, Secret, and App ID of your newly created application.

Take note of these keys as we’ll be needing them shortly.

Getting Started

To get started, we’ll be using the Laravel installer to create a new Laravel application. Run the following command to create a new Laravel application:

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

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

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

Now, we can start building our application.

Building the backend

As already mentioned, the backend will be built with Laravel, since we already have a new Laravel project, let’s start fleshing it out. For our chatroom application, we want users to register before they are granted access to the chatroom, so we’ll start by adding authentication. Laravel makes this seamless. In Laravel 6, the authentication scaffolding is extracted to a separate package, so we need to install the following package:

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

Once that’s installed, we can run the command below to create the authentication scaffolding:

https://gist.github.com/ammezie/29c74d6731b457ba79c9c9a8fc211957

Now, we can run the default migrations that Laravel created for us:

https://gist.github.com/ammezie/8088f0e97a3c7146b2942a309727d55a

Note: Make sure you have set up your database before running the migrations.

Let’s add our Stream Chat keys to .env:

https://gist.github.com/ammezie/5e62bb70defb0ba4ebc69a74539cf631

Remember to update the YOUR_STREAM_API_KEY and YOUR_STREAM_API_SECRET placeholders with your actual API details. To be able to access these environment variables in our frontend as well, we need to prefix them with MIX_.

Let’s start our application to make sure everything is working as expected:

https://gist.github.com/ammezie/111848d6582261e48384f1dfe731da24

Now, we have Laravel default authentication in place. Let’s make some modifications to suit our application needs. Add the following code inside app/Http/Controllers/Auth/RegisterController.php:

https://gist.github.com/ammezie/530169be0b2d64b4f4acbfb9388f2e3c

The registered() function gets called once a user has registered within our application.

In addition to creating users on our end, we want to also create the users in Stream Chat, so we use the updateUser() function on the StreamClient instance.

We will need to extract a username from the user's email address, which we then use as the users id on Stream Chat and name as the user's name.

Also, we create a channel on Stream Chat of the type messaging, which we call chatroom. Using the create(), we set the creator of the channel to an admin user. Lastly, we add the newly registered user as a member of the channel.

Now, whenever a user registers within our application, they’ll automatically be added to the channel.

Before we move on, let’s install the Stream Chat PHP client:

https://gist.github.com/ammezie/981bb7e9dc2a35fee0afe655a601ec54

Our final task on our backend will be to send an authentication token from our backend to the frontend. This is what Stream Chat will use to authenticate the origin of the request and if the frontend is allowed to have the information.

Create a ChatController.php inside the app/Http/Controllers directory and add the following to it:

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

The generateToken() generates a token using the user’s id and sends it back to the client-side. To have access to this method, we need to create a route for it.

Open up routes/api.php and add the following to it:

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

Now our backend work is done. Let’s implement the functionality of our frontend to start chatting.

Building the frontend

Let’s go ahead and build the frontend of our application. Laravel supports Vue.js out of the box. So everything is already set up. To be able to use Stream Chat on our Vue.js frontend, we need to install the JavaScript client. Run the following in your terminal:

https://gist.github.com/ammezie/2b36108fc8e9a1a308625ad25c5478c7

Next, we need to create and initialize our components. Open resources/js/app.js and add the following code to it:

https://gist.github.com/nparsons08/57a164e79034c257632c8a72d8d23974

We haven’t created our component yet, so technically, this will throw an error if we start up our application. Let’s build the component now.

In the resources/js/components directory, create a ChatRoom.vue file and add the following code to it:

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

The UI of this component is made up of two parts: a list of channel members and the chat itself. The component accepts a required prop called authUser, which is the currently authenticated user. Just as we need on the backend, we create a username computed property, which simply extracts the username from the authenticated user’s email address. We want to perform some logic as soon as the component is created, so we wrap them inside a dedicated method and add them in the created life cycle hook.

The getToken() is used to get the token from our backend, this token will be used to authenticate our connection with Stream Chat from the frontend. Next, in the initializeStream(), we instantiate a new instance of Stream Chat. Then we specify the current user with setUser(), which accepts an object of the user (here, we are only specifying the user’s id and name) and the user token.

The initializeChannel() initializes the channel we created on the backend earlier. Then we fetch the channel’s members and messages and subscribe to the channel for any future activities on it. Since we are subscribed to this channel and listening for events, we want to update the chats once messages are added. We also want to update the member list whenever a new member joins the channel. This is where Stream Chat events come into play. First, we listen for the message.new event, and update the messages array with the new message, which is passed along with the event. Next, we listen for the member.added event, and update the members array with the newly added member.

The sendMessage() is called whenever the chat form is submitted. Using the channel instance created earlier, we call a sendMessage()on it, which accepts an object of the message content. In our case, we are only sending a text. Then, we clear the form field.

Finally, we need to display the chat room component and pass to it the authUser props. In Laravel, logged in, users are redirected to the /home route, which uses the home view. Open resources/views/home.blade.php and update it as below:

https://gist.github.com/ammezie/532f729cebfff6fe9d6d0c798864bed0

Testing the Application

Now, let’s test what we’ve been building so far. First, let’s make sure our application is still running:

https://gist.github.com/ammezie/111848d6582261e48384f1dfe731da24

Navigate to http://127.0.0.1:8000 and open the application in three separate browser windows and login and start chatting.

Conclusion

In this tutorial, we have explored how to make a functional chatroom using Laravel, Vue.js, and Stream Chat. The knowledge from here can be used to create more complex group chat and real-time applications.

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

The complete code for this tutorial is available on GitHub.

Tutorials

Chat