How to create a live chat app using Laravel and Vue.js

How to create a live chat app using Laravel and Vue.js

In this tutorial, we will be looking at how to build a live chat using Laravel and Vue.js where people can log in and chat with each other. This is a feature we see in applications like YouTube or Facebook during a live event.

Introduction

In this article, we’ll be building an app where users can log in with their usernames and then join a live chat. Here is what our app will look like:

live chat app

Requirements

To follow along with this article, you need the following:

If you have these requirements we can begin.

Creating our Laravel application

We will start by creating a new Laravel application. By now, you should have the Laravel CLI, so you can just run this command to create a new project:

$ laravel new larachat

This will create a new Laravel application in a larachat folder.

Setting up Pusher Chatkit in the app

Before we go ahead to enable Chatkit in our app, open the Chatkit app, go to the Console tab and create a new user named admin. Create a new room named live-chat with the admin.

Open the room you have just created and note the room ID. Copy it out as you will soon need it.

live chat app

To enable Chatkit in our app, we will need to add the keys to our app environment. Add these new properties at the bottom of the .env file found in your project directory:

If you don’t have the .env file for some reason, rename the .env.example file to .env and run the command: php artisan key:generate

    # File: .env
    # [...]

    CHATKIT_INSTANCE_LOCATOR="INSTANCE_LOCATOR_HERE"
    CHATKIT_SECRET_KEY="SECRET_KEY_HERE"
    CHATKIT_GENERAL_ROOM_ID="GENERAL_ROOM_ID"

    MIX_APP_URL="${APP_URL}"
    MIX_CHATKIT_INSTANCE_LOCATOR="${CHATKIT_INSTANCE_LOCATOR}"

You need to replace the placeholder values with the credentials from your Chatkit app. The CHATKIT_INSTANCE_LOCATOR and CHATKIT_SECRET_KEY can be gotten from the Credentials tab of the Chatkit instance. Replace CHATKIT_GENERAL_ROOM_ID with the room ID you copied out earlier. MIX_APP_URL and MIX_CHATKIT_INSTANCE_LOCATOR references the APP_URL and CHATKIT_INSTANCE_LOCATOR respectively.

Still in the .env file, update the APP_URL like so:

    APP_URL=http://localhost:8000

To enable our application can use the environment credentials we added earlier, open the config/services.php file and in there add the snippet below to the array of third-party services:

    // File: config/services.php
    'chatkit' => [
        'secret' => env('CHATKIT_SECRET_KEY'),
        'locator' => env('CHATKIT_INSTANCE_LOCATOR'),
    ],

Next we will need to do is install the Chatkit PHP SDK. Run this command in the root directory of your project to install the Chatkit package:

$ composer require pusher/pusher-chatkit-server

Next, open app/providers/AppServiceProvider.php and add the following code inside the register method:

    // File: app/providers/AppServiceProvider.php
    $this->app->bind('ChatKit', function() {
        return new \Chatkit\Chatkit([
            'instance_locator' => config('services.chatkit.locator'),
            'key' => config('services.chatkit.secret'),
        ]);
    });

The above snippet will bind the Chatkit service within the register method into Laravel’s IoC container. We can now resolve it from anywhere within our app and it will return an instance of the configured Chatkit class.

Building the application logic

Now we have our Laravel application configured and Chatkit SDK setup, let’s write the core functionality of our chat app.

First, we will create and update some controllers. Still in your root directory, run this command to create a new controller:

$ php artisan make:controller ChatkitController

Open the app/Http/Controllers/ChatkitController.php file and replace the contents with this snippet:

    <?php
    // File: app/Http/Controllers/ChatkitController.php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class ChatkitController extends Controller
    {
        private $chatkit;
        private $roomId;

        public function __construct()
        {
            $this->chatkit = app('ChatKit');
            $this->roomId = env('CHATKIT_GENERAL_ROOM_ID');
        }

        /**
         * Show the welcome page.
         *
         * @return \Illuminate\Contracts\Support\Renderable
         */
        public function index(Request $request)
        {
            $userId = $request->session()->get('chatkit_id')[0];

            if (!is_null($userId)) {
                // Redirect user to Chat Page
                return redirect(route('chat'));
            }

            return view('welcome');
        }

        /**
         * The user joins chat room.
         *
         * @param  \Illuminate\Http\Request $request
         * @return mixed
         */
        public function join(Request $request)
        {
            $chatkit_id = strtolower(str_random(5));

            // Create User account on Chatkit
            $this->chatkit->createUser([
                'id' =>  $chatkit_id,
                'name' => $request->username,
            ]);

            $this->chatkit->addUsersToRoom([
                'room_id' => $this->roomId,
                'user_ids' => [$chatkit_id],
            ]);

            // Add User details to session
            $request->session()->push('chatkit_id', $chatkit_id);

            // Redirect user to Chat Page
            return redirect(route('chat'));
        }

        /**
         * Show the application chat room.
         *
         * @return \Illuminate\Contracts\Support\Renderable
         */
        public function chat(Request $request)
        {
            $roomId = $this->roomId;

            $userId = $request->session()->get('chatkit_id')[0];

            if (is_null($userId)) {
                $request->session()->flash('status', 'Join to access chat room!');
                return redirect(url('/'));
            }

            // Get messages via Chatkit
            $fetchMessages = $this->chatkit->getRoomMessages([
                'room_id' => $roomId,
                'direction' => 'newer',
                'limit' => 100
            ]);

            $messages = collect($fetchMessages['body'])->map(function ($message) {
                return [
                    'id' => $message['id'],
                    'senderId' => $message['user_id'],
                    'text' => $message['text'],
                    'timestamp' => $message['created_at']
                ];
            });

            return view('chat')->with(compact('messages', 'roomId', 'userId'));
        }

        /**
         * Receives a client request and provides a new token.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return mixed
         */
        public function authenticate(Request $request)
        {
            $response = $this->chatkit->authenticate([
                'user_id' => $request->user_id,
            ]);

            return response()
                ->json(
                    $response['body'],
                    $response['status']
                );
        }

         /**
         * Send user message.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return mixed
         */
        public function sendMessage(Request $request)
        {
            $message = $this->chatkit->sendSimpleMessage([
                'sender_id' => $request->user,
                'room_id' => $this->roomId,
                'text' => $request->message
            ]);

            return response($message);
        }

        /**
         * Get all users.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return mixed
         */
        public function getUsers()
        {
            $users = $this->chatkit->getUsers();

            return response($users);
        }

        /**
         * Get all users.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return mixed
         */
        public function logout(Request $request)
        {
            $request->session()->flush();

            return redirect(url('/'));
        }
    }

In the ChatkitController above we have several methods, namely: index, join, chat, authenticate, sendMessage, getUsers and logout.

The index method returns the welcome page if a user ID doesn’t exist in the current session else it redirects to the chat page.

The join method uses the resolved Chatkit SDK instance, creates a new user on Chatkit and add the user to the live-chat room and then save the users Chatkit ID in the current session before redirecting the user to the chat page.

The chat method handles the chat page when loaded on the browser. Inside it, we get the current user Chatkit ID from the session. If a Chatkit ID is not found, we return the user to the welcome page. The Chatkit ID, room ID, and chat room messages properties are then passed to the chat page view.

The authenticate method will act as a token provider server that receives the client's request and returns a valid JWT to your Chatkit client.

In the sendMessage method, we use the SDK’s sendSimpleMessage method, which accepts the sender_id, room_id and text to send a message to the chat room. The getUsers method returns all the users created on our Chatkit instance. Our logout method flushes the current session and redirects to the welcome page.

Next, we will update the web routes. Open routes/web.php and paste the code below to override the default :

    // File: routes/web.php
    Route::get('/', '[email protected]');
    Route::post('/', '[email protected]');
    Route::get('chat', '[email protected]')->name('chat');
    Route::post('logout', '[email protected]')->name('logout');

Open routes/api.php and add the code below in the file:

    // File: routes/api.php
    Route::post('authenticate','[email protected]');
    Route::get('users', '[email protected]');
    Route::post('message','[email protected]');

The newly added routes will provide endpoints to authenticate a client request, show a chat and send a message.

Building the application frontend

First, we will update the welcome page of the app. Open a resources/views/welcome.blade.php file and paste the code below to update the file:



    getLocale()) }}">



        Live Chat












                    Join Live Chat

                @if(Session::has('status'))

                        {{ Session::get('status') }}

                @endif


                        @csrf

                            <input type="text" name="username" class="form-control" 
                              placeholder="Enter your username">


                                  Join








The welcome.blade.php view contains a Join Live Chat title and a simple form that submits the entered username in the input field to join the live chat room.

Next, we will build the chat page to read and send messages. A chatbox component will be created using Vue.js to handle the chat feature.

Open a terminal tab in your project directory and run the command below:

$ npm install

This command installs the required development dependencies in the package.json file. Next, we need to install Chatkit. Run this command to install it:

$ npm install moment @pusher/chatkit-client --save-dev

Now create a ChatBoxComponent.vue file in the resources/js/components/ directory and paste the code snippet below inside the file.






                * ({{ formatTime(message.timestamp) }}) * : **{{ findSender(message.senderId).name }}**
                {{ message.text }}



* * *




              Send






The ChatBoxComponent.vue single file component is divided into three sections:

  • template tag contains our HTML syntax for the chat box providing the information to be shown.
  • script tag holds the logic that keeps data and methods. It also performs various operations like authentication, sending and receiving messages.
  • style tag provides the simplest option to add CSS to a Vue.js component.

The script tag keeps the logic of our Vue component. Inside this tag, first, we imported the libraries we will make use of. The export default block exports an object literal as our component’s view model and is responsible for the behavior of our component. This block houses other sections.

The props section helps us to pass custom data to the component from its instances. The data section is used to set up the component state. Every property you define in data becomes reactive meaning that if there is a change, it will be reflected in the view.

The method section holds the methods just as the name implies. In our component, we have six methods for various actions.

  • connectToChatkit method handles the connection to Chatkit from the client (browser) interface. It defines a TokenProvider and then the ChatManager is created with the token provider, allowing the client to connect to the Chatkit servers. On a successful connection, the currentUser data state is updated and the subscribeToRoom method is called.
  • subscribeToRoom method handles the connection to a particular room and is able to hook in some actions to respond to certain events like when a new message is sent, a user joins the room or leaves the room.
  • getUser method fetches all users on the Chatkit instance and updates the users data state with the response body gotten.
  • sendMessage method gets data from the input field and makes a post request to send the message.
  • findSender method accepts a senderId parameter and uses this to find a user on the this.users data.
  • formatTime method using the imported moment library returns a human readable time.

The created section is one of the used life cycle hooks used for initialization. In our case, we called the connectToChatkit and getUsers method there.

Next, open resources/js/app.js and add the Vue instance like so:

    // resources/js/app.js
    Vue.component('chatbox', require('./components/ChatBoxComponent.vue').default); 

The above code line registers the ChatBoxComponent.vue using chatbox as its basename. Now, go back to the terminal and run the command below:

$ npm run dev

This command will run a development build process using webpack to compile all resources/js files into the public/js/app.js file.

The command npm run prod is used in the case you want to it in a production environment

Next, create a resources/views/chat.blade.php file and paste the code below:



    getLocale()) }}">





        Live Chat











                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                document.getElementById('logout-form').submit();">
                    Leave Chat Room


                    @csrf






                             Live Chat Room 








Inside the chat.blade.php, we added the chatbox tag that renders our ChatBoxComponent we created earlier and above it, we have Leave Chat Room link that logs the user out.

Finally, to test our app run the command below to serve the application:

$ php artisan serve

Now open http://localhost:8000 on two separate browser windows. Register two different accounts and try chatting between the two users. You should have results similar to this:

Conclusion

In this tutorial, we have seen how to add a live chatting experience to our app. The application was created using Laravel and Vue.js. The Chatkit API is very extensible and provides features not covered in this tutorial. You can leverage this knowledge to work with other features Chatkit provides in a Laravel app.

The source code is available on GitHub.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Learn GraphQL with Laravel and Vue.js - Full Tutorial

Learn how to use GraphQL with Laravel and Vue.js in this tutorial course. We'll be using the Lighthouse package on the backend with Laravel and Vue Apollo on the frontend. We'll build a book recommendation app from scratch as a project. Laravel is a PHP framework and Vue.js is a JavaScript frontend framework.

Creating a To-Do List App with Vue.js & Laravel

In this tutorial, we will build a to-do app with Vue.js and Laravel using Pusher to add the realtime functionality. Vue.js is such a great JS framework as it speeds up frontend development and helps achieve more with less code.