Membuat Typing Indicator Menggunakan Pusher Pada Laravel 6.0 Dengan HTML Dan JQuery


Apa itu Typing indicator?

Typing indicator merupakan sebuah tanda dimana seseorang sedang mengetik pesan, biasanya typing indicator ini digunakan untuk aplikasi chatting seperti WhatssApp, Skype, Facebook Messenger dan lain sebagainya.

lalu apa itu Pusher?

Pusher yaitu salah satu layanan untuk membuat real-time pada aplikasi yang kita bangun, seperti untuk real-time notifikasi pesan, menghitung jumlah pengunjung web dan lain sebagainya, sehingga layanan Pusher ini sangat populer untuk digunakan.

Nah pada artikel ini saya akan membahas langkah demi langkah bagaiamana jika Membuat Typing Indicator Menggunakan Pusher Pada Laravel 6.0 Dengan HTML Dan JQuery. yang dimana kamu nanti bisa mengembangkannya lagi sesuai dengan kreatifitas masing - masing. Silakan ikuti langkah - langkahnya di bawah ini :

1. Install Laravel

Kamu install terlebih dahulu laravel frameworknya dengan menggunakan composer, jika belum terinstall composernya silakan download composernya terlebih dahulu Download Composer

, jika sudah ketikan perintah di bawah ini pada terminal atau cmd jika kalian menggunakan windows, dengan cara berikut

$ composer create-project --prefer-dist laravel/laravel chat

Masuk ke dalam direktori laravelnya kemudian setup seperti biasa, dan buat database kamu masing - masing dan jika setelah semuanya kamu setup dan setelah muncul seperti gambar di bawah ini, kita lanjut ke tahap selanjutnya.

2. Install Pusher

Setelah itu install paket pushernya dengan cara sebagai berikut

$ composer require pusher/pusher-php-server

3. Install Laravel Authentication

Setelah paket pusher terinstall dalam laravelnya, kita buat auth bawaan dari laravelnya sendiri. Oh iya temen - temen, ternyata pada laravel versi 6 ini agak berbeda caranya untuk membuat Auth nya, tapi tenang jangan khawatir intinya sih sama, cuma beda cara installnya saja, silakan ketikan perintah di bawah ini.

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

4. Install Node Modules

Nah pada bagian ini kita diharuskan untuk menginstall Node Package Manager atau sering disebut npm pada laravelnya dengan cara seperti ini.

$ npm install

Jika sudah di install npm nya kita lakukan building atau bisa di bilang semacam compile kali ya :D, caranya cukup mudah hanya mengetikan ini saja di terminal.

$ npm run dev

Sehingga nanti akan terlihat seperti ini

5. Create users table seeder

Lalu kita buat user seeder terlebih dahulu.

$ php artisan make:seeder createUsersSeeder

Silakan copas saja untuk source code seeder nya di bawah ini.

<?php

use Illuminate\Database\Seeder;
use App\User;

class createUsersSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::insert([
            [
                'name' => 'user 1',
                'email' => '[email protected]',
                'password' => \Hash::make('password'),
            ],
            [
                'name' => 'user 2',
                'email' => '[email protected]',
                'password' => \Hash::make('password'),
            ]
        ]);
    }
}

Setelah itu kamu migrate seedernya dengan cara.

$ php artisan migrate:fresh --seed

Lalu jalankan kembali

$ php artisan serve

Jika sepert ini maka kalian sudah berhasil membuat auth di laravel versi 6 ini.

6. Membuat akun pusher & setup file environment

Setelah itu daftar dulu pushernya lalu create App, sehingga akan seperti ini jika kamu sudah membuat app di puserhnya

Terlihat apda gambar terdapat app_id, key, secret dan clusterpindahkan ke file .env kita di laravel nya pada bagian

PUSHER_APP_ID=app_id
PUSHER_APP_KEY=key
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=cluster

Kemudian ubah juga pada bagian dibawah ini masih dibagian file .env

BROADCAST_DRIVER=log

Diubah menjadi seperti ini

BROADCAST_DRIVER=pusher

7. Membuat halaman home

Jika sudah buat tampilan seperti ini di dalam dahsboard nya. silakan edit di bagian file home.blade.php lalu paste source code berikut.

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            @if(request()->user_id)
                @php
                    $user = \App\User::find(request()->user_id);
                @endphp
                <div class="col-md-8">
                    <a href="/home" class="btn btn-success">
                        Kembali
                    </a>
                    <br><br>
                    <div class="card">

                        <div class="card-header">
                            <b>{{ $user->email }}</b><br>
                            <em id="typingInfo"></em>
                        </div>

                        <div class="card-body">
                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <div class="form-group">
                                <textarea class="form-control" name="message" id="message" placeholder="Type a message ..." is-typing="0" onkeyup="_isTyping()" onblur="_isNotTyping()"></textarea>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="col-md-8">

                    @php
                        $users = \App\User::all();
                    @endphp

                    <table class="table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>User</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                                @if($user->id != Auth::user()->id)
                                    <tr>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->name }}</td>
                                        <td class="text-center">
                                            <a href="{{ url()->current() }}?user_id={{ $user->id }}" class="btn btn-success">
                                                <i class="fa fa-comments"></i> Chat
                                            </a>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('scripts')

    <script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>

    @if(request()->user_id)

        <script src="https://js.pusher.com/4.4/pusher.min.js"></script>

        <script type="text/javascript">

            Pusher.logToConsole = true;
            var pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
                cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
                forceTLS: true
            });

            var subscribeTypingEvent = pusher.subscribe('is-typing-event_{{ $user->id }}-{{ Auth::user()->id }}');

            subscribeTypingEvent.bind('App\\Events\\TypingEvent', function(data) {
                var typingInfo = jQuery('#typingInfo');
                if(data.isTyping == 1) {
                    typingInfo.html(`<em>Typing...</em>`);
                } else {
                    typingInfo.html(``);
                }
            });

            function _isTyping() {
                var isTyping = jQuery('#message');
                if(isTyping.attr('is-typing') == 0) {
                    isTyping.attr('is-typing', 1);
                    jQuery.ajax({
                        url : '{{ route('event.typing') }}',
                        data : 'isTyping=' + isTyping.attr('is-typing') + '&user_id={{ $user->id }}',
                        method : 'post',
                        headers : {
                            'X-CSRF-TOKEN' : '{{ csrf_token() }}'
                        },
                        success : function(response) {
                            console.log(response);
                        }
                    });
                }
            }

            function _isNotTyping() {
                var isTyping = jQuery('#message');
                if(isTyping.val() == '' && isTyping.attr('is-typing') == 1) {
                    isTyping.attr('is-typing', 0);
                    jQuery.ajax({
                        url : '{{ route('event.typing') }}',
                        data : 'isTyping=' + isTyping.attr('is-typing') + '&user_id={{ $user->id }}',
                        method : 'post',
                        headers : {
                            'X-CSRF-TOKEN' : '{{ csrf_token() }}'
                        },
                        success : function(response) {
                            console.log(response);
                        }
                    });
                }
            }

        </script>
    @endif
@endsection

8. Membuat typing event

Kemudian buat file event TypingEvent.php dengan cara.

$ php artisan make:event TypingEvent

Kemudian Paste source code berikut

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class TypingEvent implements ShouldBroadcast
{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $sender, $recipient, $isTyping;

    /**
    * Create a new event instance.
    *
    * @return void
    */
    public function __construct($sender, $recipient, $isTyping)
    {
        $this->sender = $sender;
        $this->recipient = $recipient;
        $this->isTyping = $isTyping;
    }

    /**
    * Get the channels the event should broadcast on.
    *
    * @return \Illuminate\Broadcasting\Channel|array
    */
    public function broadcastOn()
    {
        return [ 'is-typing-event_'.$this->recipient.'-'.$this->sender ];
    }
}

9. Membuat message controller

Buat lah file controllernya MessageController.php dengan cara

$ php artisan make:controller MessageController

lalu paste kembali source code dibawah ini.

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\TypingEvent;

class MessageController extends Controller
{
    public function typingEvent(Request $request)
    {
        event(new TypingEvent($request->user_id, \Auth::user()->id, $request->isTyping));
        return [
            'typing' => $request->isTyping
        ];
    }
}

10. Membuat route typing event

Kemudian tahap terakhir, buat route untuk mengirim data nya, berikut route nya.

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', '[email protected]')->name('home');
Route::post('typing-event', '[email protected]')->name('event.typing');

Berikut adalah hasilnya dimana jika User 1 sedang mengetik pesan maka akan mengirimkan data realtime kepada User 2 bahwa User 1 sedang mengetik pesan. untuk melakukan percobaan ini saya menggunakan 2 browser User 1 menggunakan browser Chrome dan User 2 menggunakan Firefox

User 2 Sedang Mengetikan Pesan Ke User 1
User 1 mendapatkan notifikasi dari User 2 bahwa user tersebut sedang mengetik pesan

Nah sekian dulu tutorial kali ini dari saya, semoga bermanfaat untuk kita semua, oh ya silakan kalian bisa download sourc code full nya secara gratis di bawah ini

Download Full Source Code

0 Response to "Membuat Typing Indicator Menggunakan Pusher Pada Laravel 6.0 Dengan HTML Dan JQuery"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel