Add Messaging Functionality to Your Laravel App

Add Messaging Functionality to Your Laravel App

If you are building an app with Laravel and want to add a social aspect, such as chat, Stream Chat provides exactly what you need. In this tutorial, we'll do a deep dive into how to use Stream to add a messaging feature to your Laravel-based application. One of the most significant advantages to using Stream to accomplish this feat is that it significantly reduces the time and effort required; Stream's Chat API allows you to build a fully-featured user engagement platform in just a few hours.

Here is a preview of the app we’ll be building:

Stream Chat Example with Laravel

Prerequisites

Please, make sure the following are installed on your system:

To follow along with this tutorial comfortably, you should also have a basic understanding of Laravel, JavaScript, and Vue.js.

Creating a Stream Account

To be able to use the Stream API, you need to have an account. Visit the Stream Chat website and then click on the appropriate Login or Signup button.

To sign up, on the popup page that appears, fill in your Username, Email Address, and Password and then click on the Create Free Account button:

Stream Onboarding

Upon successfully logging in or creating your account, you will be taken to your dashboard, which contains metrics and credentials for your Stream app(s). If you've just created your account, your first app will have been created for you; if you've logged into your existing account, you'll likely need to create a new app for this tutorial.

From your dashboard, take note of your APP ID, API Key, and API Secret:

Stream Account Dashboard

Be sure to keep your app credentials safe and private! We’ll use these to authenticate with the SDK soon...

Bootstrapping a Laravel App

If you already have a Laravel app, you can skip this step; otherwise, open up a terminal and run the command below to bootstrap the Laravel app files:

$ composer global require laravel/installer
$ laravel new laravel-stream-one-on-one

Next, cd into your new project directory:

$ cd laravel-stream-one-on-one

Once you are within your app directory, navigate to your .env file and set up the database by changing DB_CONNECTION=mysql to DB_CONNECTION=sqlite. Since this is just a small test application, we'll be using SQLite, which is both portable and reliable, given its file-based nature. We can create the file for our SQLite database (database.sqlite) in the database directory by running:

$ touch ./database/database.sqlite

Because we are no longer using a hosted MySQL database, we can delete the following key-value pairs from the .env file:

https://gist.github.com/BrightnBubbly/65c7add9cb728c46065d637c702f9c89

To update our app with the database changes we just made, execute the following command:

$ php artisan migrate

Next, add the Stream Chat keys (that we grabbed from our dashboard and tucked away in a safe place) to the .env file:

https://gist.github.com/BrightnBubbly/5b8a18ea9d80f142a568a800e2a04a39

Make sure to update the <STREAM_API_KEY> and <STREAM_API_SECRET> placeholders with your correct API Key and Secret, respectively.

Finally, you can start up your local development server, by running:

$ php artisan serve

Now, if you visit http://localhost:8000, you should see the default Laravel app landing page:

Laravel Landing Page

Preparing Our Generic App for Custom Development

Before we start the code that will make the intended magic happen, open another terminal tab/window and cd into the root directory of the project (laravel-stream-one-on-one). Then, run the commands below to install all of the necessary the dependencies, and to run the app and watch for file changes:

$ yarn install
$ yarn run watch

"watching" our app will automatically rebuild the Vue components with our changes, in real time, so we aren't constantly having to restart our app to see our changes.

Make sure to leave both the local development server and our yarn run watch command running while you follow along from here on out.

Installing Chat SDKs

We’ll use Stream Chat's PHP API Client to reach the Chat API endpoints on the server, and its JavaScript SDK on the client.

To install the server SDK, open a new terminal in the project root directory and install the PHP SDK:

$ composer require get-stream/stream-chat

Then, install the JavaScript SDK:

$ yarn add stream-chat

Adding Authentication

We need users in order to chat! Adding authentication allows us to 1) create users with unique credentials and 2) later identify returning users via their credentials.

Luckily for us, Laravel provides a single command that allows us to quickly scaffold all of the routes and views we'll need for authentication; add authentication to the app by running:

$ composer require laravel/ui
$ php artisan ui vue --auth

If you refresh the app again, you will see that login and register links are now available!

Creating Users

Let's update the create function in app/Http/Controllers/Auth/RegisterController.php to configure the registration process. Upon registration, we'll create a StreamClient instance and define the user and then update the Stream server by creating the user, there:

https://gist.github.com/BrightnBubbly/68ce936461b4e30732c0a162fcfa123d

Note that we also imported the SDK to the file, by adding:

use GetStream\StreamChat\Client as StreamClient;

Finally, create an EventBus that we can use to share data between our Vue components, by adding the following code to the resources/js/app.js file:

https://gist.github.com/BrightnBubbly/767357a40db09d7d77e7af0f8180a31a

Make sure to add the above code right after the window.Vue = require('vue'); code line.

Crafting the Chat Interface

Since we are building the UI using Vue.js, we will divide the UI into smaller manageable components:

  • StreamChat.vue - The parent component that will be holding other components
  • UsersComponent.vue - For listing available users with whom we can converse on the app
  • ActiveChatsComponent.vue - For holding all active chats
  • MessagesComponent.vue - Contains logic for sending and rendering of messages

Create the above components files (StreamChat.vue, UsersComponent.vue, ActiveChatsComponent.vue, MessagesComponent.vue), and import them to the resources/js/components directory by adding the following to resources/js/app.js:

https://gist.github.com/BrightnBubbly/9b872b03160f5f59b0b9cdd9aa03caac

Make sure to place the code right after the Vue.component('example-component',… component already present in the file.

Then, finally, add this component to the view file - resources/views/home.blade.php:

<stream-chat :autheduser="{{ Auth::user() }}"></stream-chat>

So that the file looks like below:

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

This will render the chat. We are adding this to the home.blade.php file because Laravel, by default, renders the file as the dashboard when a user logs in. If you want the chat to appear on a different page, you just need to add it to your preferred page!

StreamChat Component

To start building out the StreamChat component, add the code below to the resources/js/components/StreamChat.vue file:

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

Using this, we can easily duplicate the chat across various pages. We pass the logged in user details as autheduser to the props of the component, so we can use it across the components.

Users Component

To create the Users component, add the following code to the resources/js/components/UsersComponent.vue file:

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

Once the component is created, we make a request to the /api/get-users endpoint and fetch all the available users, then list them. We are yet to create the endpoint, but we’ll be doing that soon!

Messages Component

To flush out the Messages component, add the following code to the MessagesComponent.vue file:

https://gist.github.com/BrightnBubbly/3f1e2b864aaa5372eb46a76f1e496594

ActiveChats Component

To create our final "ActiveChats" component, add the code for listing the active chats to resources/js/components/ActiveChatComponent.vue file:

https://gist.github.com/BrightnBubbly/2594250091da2d72e0ab79654b71b21f

The Styles

Finally, update the styles in the resources/saas/app.scss file:

https://gist.github.com/BrightnBubbly/41c13fa25e1673506e10a4b4d93a1bb9

Our chat UI is now ready! Although chatting is not yet working, you can still move around within the app and get the feeling of it.

Now, if you log in to the app, you should see something that looks a lot like this:

Laravel Auth

Here, only the UsersComponent is visible, since there is no user listed yet.

Generating a Token

The Stream Chat JavaScript SDK requires a valid token for us to start using it. The next thing we’ll do is create an endpoint where this token can be generated!

Create a new controller named ChatController.php in the app/Http/Controllers/ directory. Then, add the following code to your new ChatController.php file:

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

In the code above, after initializing the PHP SDK, we create a function for handling the generation of token, named generateToken.

To actually use the generated token, add the route to handle the token request by adding the code below to the routes/api.php file:

Route::post('/generate-token', 'ChatController@getnerateToken');

To generate tokens, we'll simply make a POST request to /api/generate-token, passing along the username of the user.

Get All Users

Since we want conversations to take place among all users on the app, we need to list these users in the available users list for every logged user; add the following function for fetching users to ChatController.php to accomplish this:

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

Then, create the route for handling the request by adding the following code to the routes/api.php file:

https://gist.github.com/BrightnBubbly/909d5e2cb283de0bda6b80c41a26e53b

Now, if you visit http://localhost:8000/api/get-users, you should see a JSON containing all the registered users on the app.

If you reload the app again, you should now see a list of users. When you click on a user, you will see the MessageComponent for that user appear to the left:

One-on-one Chat with Stream

Wiring Things Up

We are almost finished with our chat! What is left is to initialize the Stream Chat JavaScript SDK, and send and listen for new messages.

Add a function for initializing the Stream Chat JavaScript SDK to the methods:{…} block of the resources/js/components/ActiveChatsComponent.vue file:

https://gist.github.com/BrightnBubbly/3646290a864dc81d9aacc23014cf2093

Since Laravel's default auth does not provide a username, but uses email instead, to uniquely identify registered users, we will be using the email as the username for Stream Chat. We’ll replace the “@” and “.” characters in the email with “_”s, for convenience.

In the above code, after initializing the Client, we set the current user to it using await client.setUser.

Once the component is created, call the initialize function in the created hook to initialize the Client SDK:

https://gist.github.com/BrightnBubbly/338d7f87247a9b24ebeb8872a1829381

Notice that we are passing the initialized client down to the messages component via its props - this.client = client, so we can make use of it there.

Next, initialize a channel to the created:{…} block of the resources/js/components/MessagesComponent.vue file, to allow two users to converse, when they so choose:

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

Then, fetch messages on that channel, if any, and start listening for new messages to the channel:

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

Finally, create function for sending new messages to the message: {…} block of resources/js/components/MessagesComponent.vue:

https://gist.github.com/BrightnBubbly/1de51bd6801cbc3ec177bece299e17a4

Testing the Chat

Good job! You have successfully added a one-to-one chat to your Laravel app! To test the app:

  1. Open two tabs on your browser
  2. Register or log into two different users
  3. On both tabs, select the other users from the list of users
  4. Start chatting!

Wrapping Up

In this tutorial, you learned how to add a one-to-one chat to your Laravel app! Although you have gotten a solid foundation of how to use the Stream Chat API and some of the features it provides, there are even more awesome features that will make your chat more lively. This includes features like:

  1. Adding a typing indicator feature
  2. Showing when a user is online or offline
  3. Showing unread messages
  4. Alerting the user of new messages

Check out the events that enable you to add these features here!

You can also find the codebase for this tutorial in the GitHub repo and let us know how you have modified this app to suit your needs!

Thanks for reading, and happy coding!

TutorialsChat