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.
•about 1 year ago
Being able to communicate with a group of people in real-time over chat is one of the most powerful features of modern messaging. Real-time messaging with 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.
What we’ll be building
In this tutorial, we’ll be building a chat room where users can join and chat with other users in real-time. 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. Once you’re logged in, you can save the keys from the app that's automatically created for you. Or, if you prefer, 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.
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:
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:
For this tutorial, we'll be concerned with the
resources/js directory, which is where Vue.js will be instantiated. Here is a tutorial on building a real-time chat app with Vue.
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:
Once that’s installed, we can run the command below to create the authentication scaffolding:
Now, we can run the default migrations that Laravel created for us:
Note: Make sure you have set up your database before running the migrations.
Let’s add our Stream Chat keys to
Remember to update the
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
Let’s start our application to make sure everything is working as expected:
Now, we have Laravel default authentication in place. Let’s make some modifications to suit our application needs. Add the following code inside
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
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:
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.
ChatController.php inside the
Controllers directory and add the following to it:
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.
routes/api.php and add the following to it:
Now our backend work is done. Let’s implement the functionality of our frontend to start chatting.
Building the frontend
Next, we need to create and initialize our components. Open
resources/js/app.js and add the following code to it:
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.
resources/js/components directory, create a
ChatRoom.vue file and add the following code to it:
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.
() 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.
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.
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:
Testing the Application
Now, let’s test what we’ve been building so far. First, let’s make sure our application is still running:
Navigate to http://127.0.0.1:8000 and open the application in three separate browser windows and login and start chatting.
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.
The complete code for this tutorial is available on GitHub.