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 chatMasuk 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-server3. 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 --auth4. 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 installJika 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 devSehingga nanti akan terlihat seperti ini
5. Create users table seeder
Lalu kita buat user seeder terlebih dahulu.
$ php artisan make:seeder createUsersSeederSilakan 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 --seedLalu jalankan kembali
$ php artisan serveJika 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=logDiubah menjadi seperti ini
BROADCAST_DRIVER=pusher7. 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
@endsection8. Membuat typing event
Kemudian buat file event TypingEvent.php dengan cara.
$ php artisan make:event TypingEventKemudian 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 MessageControllerlalu 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', 'HomeController@index')->name('home');
Route::post('typing-event', 'MessageController@typingEvent')->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