Pada kesempatan kali ini saya ingin berbagi kepada para developer semua tentang Membuat Realtime Chat dengan menggunakan Firebase. Buat yang belum tau apa itu FireBase silakan baca disini Apa itu FIREBASE?
Sebelum ke praktek mari kita bahas dulu Kenapa harus menggunakan Firebase? toh pake Ajax bisa?. Jawabannya adalah Jika kita menggunakan ajax memerlukan proses request secara berulang-ulang yang dibutuhkan untuk mengambil data dari server sehingga akan membebankan server. Sedangkan jika kita menggunakan Firebase kita tidak perlu request data untuk mendapatkan sebuah data melainkan server yang akan memberikan data itu ketika ada sebuah perubahan. Contoh ketika kita menggunakan ajax agar realtime maka aplikasi kita akan melakukan request setiap 500ms sekali dengan kata lain 1 second terdapat 2 Request secara berulang ketika ada 100 user dalam waktu 1 Detik maka terdapat 200 request dalam 1 Detik dan terus menerus setiap menit, jam, hari, bulan dan server kita lebih sering Down. Berikut adalah penjelasan yang saya pelajari dan saya pahami.
Sebelum ke praktek mari kita bahas dulu Kenapa harus menggunakan Firebase? toh pake Ajax bisa?. Jawabannya adalah Jika kita menggunakan ajax memerlukan proses request secara berulang-ulang yang dibutuhkan untuk mengambil data dari server sehingga akan membebankan server. Sedangkan jika kita menggunakan Firebase kita tidak perlu request data untuk mendapatkan sebuah data melainkan server yang akan memberikan data itu ketika ada sebuah perubahan. Contoh ketika kita menggunakan ajax agar realtime maka aplikasi kita akan melakukan request setiap 500ms sekali dengan kata lain 1 second terdapat 2 Request secara berulang ketika ada 100 user dalam waktu 1 Detik maka terdapat 200 request dalam 1 Detik dan terus menerus setiap menit, jam, hari, bulan dan server kita lebih sering Down. Berikut adalah penjelasan yang saya pelajari dan saya pahami.
Nah kalo sudah paham kita lanjutkan tutorialnya. Pertama yang harus kita lakukan adalah menuju ke Firebase Console berikut link nya https://console.firebase.google.com.
Lalu kita buat proyek baru, akan muncul form isian lalu isi nama proyek dan negaranya.
Selanjutnya kita klik menu Database lalu pilih tab Aturan lalu buat menjadi seperti ini :
Lalu klik Publikasikan.
Selanjutnya kita pilih tab Data dan buat Child dengan nama Chat dan Value "" seperti ini :
Selanjutnya kita pilih tab Data dan buat Child dengan nama Chat dan Value "" seperti ini :
Oke, settingan untuk aturan sudah selesai sekarang kita menuju menu Overview lalu klik menu Tambahkan Firebase ke aplikasi web Anda. Maka akan muncul popup seperti gambar dan click salin.
Langkah selanjutnya adalah membuat file HTML untuk chat formnya dan jangan lupa menyispkan code dari popup yang sudah kita salin tadi dari firebase, kurang lebih seperti berikut :
<html>
<head>
<title>Realtime Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.message-bubble
{
padding: 10px 0px 10px 0px;
}
.message-bubble:nth-child(even) { background-color: #F5F5F5; }
.message-bubble > *
{
padding-left: 10px;
}
.panel-body { padding: 0px; }
.panel-heading { background-color: #3d6da7 !important; color: white !important; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<div class="container" id="chat_data">
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4">
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="msg" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.6.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAmW1Y2cudtWX_jTYUde01-yKz1K-WnMgk",
authDomain: "realtime-chat-6c6e4.firebaseapp.com",
databaseURL: "https://realtime-chat-6c6e4.firebaseio.com",
storageBucket: "realtime-chat-6c6e4.appspot.com",
messagingSenderId: "31374372226"
};
firebase.initializeApp(config);
$(document).ready(function(){
var rootchatref = firebase.database().ref('/');
var chatref = firebase.database().ref('/Chat');
chatref.on('child_added', function(snapshot) {
var data = snapshot.val();
//console.log(data);
$('#chat_data').prepend('<div class="row message-bubble"><p class="text-muted">'+data.user+'</p><span>'+data.msg+'</span></div>');
});
});
function writeChat(user, msg) {
// A post entry.
var postData = {
msg : msg,
user: user,
};
// Get a key for a new Post.
var newPostKey = firebase.database().ref().child('Chat').push().key;
// Write the new post's data simultaneously in the posts list and the user's post list.
var updates = {};
updates['/Chat/'+newPostKey] = postData;
return firebase.database().ref().update(updates);
}
$("#msg").keypress(function(e) {
var name = $('#name').val();
var msg = $('#msg').val();
if(e.which == 13) {
if(name == ''){
alert('Isi nama terlebih dahulu..');
$('#name').focus();
return false;
}
if(msg == ''){
alert('Pesan tidakk boleh kosong');
$('#msg').focus();
return false;
}
writeChat(name, msg);
$('#msg').val('');
}
});
</script>
</body>
</html>
Oke semua sudah selesai. dan untuk mencobanya kita buka 2 Browser untuk membuktikan Jika Chat Ini realtime.
Berhasil dan realtime :D
Mungkin cukup sekian sharingnya kali ini semoga bermanfaat untuk teman-teman semua.
Post a Comment