Trước bối cảnh công nghệ hiên tại việc người người realtime , nhà nhà lên cloud sẽ sớm trở nên phổ biến
Bài viết này sẽ cung cấp hướng dẫn cho bạn cách tạo 1 ứng dụng chat room sữ dụng Firebase's Javascript API. Tuy còn đơn giản nhưng hi vọng sẽ giúp bạn có thêm lựa chọn và hiểu hơn về dữ liệu realtime và sữ dụng cho ứng dụng của mình.
Nếu bạn chưa biết về Firebase thì đó là 1 dịch vụ host cung cấp database lưu trũ (dưới định dạng JSON )và đồng hóa dữ liệu cho ứng dụng realtime của bạn được sự dụng bởi 70000 dev và quan trọng nhất là có gói free . Mọi chi tiết hơn có thể tham khảo tại FireBase.
Chuẩn bị
Để bắt đầu cài đặt và sữ dụng Firebase tất nhiên bạn phải đăng kí tài khoản và tạo database,tên app và database sẽ là duy nhất nên bạn nên đặt tên đặc biệt, một khi đã có được link database chúng ta sẽ bắt đầu tạo ứng dụng Chat room đơn giản . Ở bài viết này tôi sữ dụng
https://boiling-fire-5700.firebaseio.com/
Khởi đầu
Việc đầu tiên tất nhiên là có được khung sườn HTML , ngoài ra tôi sẽ sữ dụng Bootstrap để hiểu quả hơn, chú ý thêm
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
Phần head HTML sẽ như sau
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Firebase Chat Application</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1 /css/bootstrap.min.css">
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
Sau khi đã có các thư viện cần thiết chúng ta tiếp tục xây dựng 1 form chat room như thường thấy với phần đọc tin nhắn và phần viết tin nhắn nút gửi và xóa tin nhắn
<div class="container">
<h1>Firebase Chat Application</h1>
<div class="panel panel-default">
<div class="panel-body">
<div id="comments-container"></div>
</div>
<div class="panel-footer">
<form role="form">
<div class="form-group">
<label for="comments">Please enter your comments here</label>
<input class="form-control" id="comments" name="comments">
</div>
<button type="submit" id="submit-btn" name="submit-btn"
class="btn btn-success">Send Comments</button>
<button type="reset" class="btn btn-danger">Clear Comments</button>
</form>
</div>
</div>
</div>
Sau khi đã có được diện mạo thích hợp chúng ta sẽ tới phần quan trọng nhất tạo nên chương trình
Javascript
Trong tag <script> ta sẽ đường dẫn liên kết với firebase của mình nếu không có đường liên kết ta không thể gửi hoặc nhận dữ liệu từ database của mình
Để tạo biến phục vụ cho liên kết của bạn có thể làm như sau:
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL");
tiếp theo là sự kiện khi ta clink nút Gửi sẽ gửi lấy text và trim những khoảng trống
$("#submit-btn").bind("click", function() {
var comment = $("#comments");
var comment_value = $.trim(comment.val());
return false;
});
Lúc này là lúc ta cần các hàm để viết dữ liệu vào database
Viết data vào Firebase
Firebase’s API cung cấp một số hàm cho việc viết dữ liệu vào database . Trong khuôn khổ bài viết ta sẽ tập trùng vào 2 hàm chính là set() và push(). Hãy xem các hàm này cho phép ta làm gì:
- Hàm set là hàm viết dữ liệu vào database, và cũng viết đè lên bất cứ dữ liệu trùng nào có sẵn
- Hàm push mặc khác sẽ viết vào database với dạng 1 child mới mới 1 cái tên duy nhất . Tên duy nhất này thường có 1 tiền tố là time-stamp, điều này tạo nên dữ liệu có 1 thứ tự sắp xếp theo thời gian
Sau khi phân tích ta có thể thấy trong ứng dụng Chat này ta phải sữ dụng hàm push() nếu không ta sẽ cứ ghi đè lên tin nhắn mới nhất và như thế thật buồn cười.
Để thực hiện điều này chúng ta trở lại với JS. Chúng ta cần push text tại textfield vào database ,và nhớ rằng dữ liệu được push lên có thể có nhiều định dạng như obj,array,number,string, boolear hoặc thậm chí null .Thêm vào đó chúng ta sẽ gọi callback để trả về 1 obj báo lỗi hoặc null nếu thành công.
$("#submit-btn").bind("click", function() {
var comment = $("#comments");
var commentValue = $.trim(comment.val());
fireBaseRef.push({comment: commentValue}, function(error) {
if (error !== null) {
alert('Unable to push comments to Firebase!');
}
});
return false;
});
Vẫn còn khá đơn giản chúng ta nên thêm cả điều kiện để không phải gửi cả những tin nhắn rỗng vào database
$("#submit-btn").bind("click", function() {
var comment = $("#comments");
var commentValue = $.trim(comment.val());
if (commentValue.length === 0) {
alert('Comments are required to continue!');
} else {
_fireBaseRef.push({comment: commentValue}, function(error) {
if (error !== null) {
alert('Unable to push comments to Firebase!');
}
});
comment.val("");
}
return false;
});
Vậy là chúng ta đã xong phần gửi thông tin lên database và như mọi cuộc trò chuyện khác chúng ta cũng cần nhận tin nhắn đáp lại từ database
Đọc dữ liệu từ Firebase
Fibase API cung cấp nhiều phương thức để đọc dữ liệu từ database ở bài này ta sẽ tập trung vào phương thức on().
Hàm on() có nhiều đối số để ta có thể sữ dụng hãy xem 2 đối số đáng chú ý sau eventType và callback:
eventType
đối số eventType có một số tùy chọn hãy cùng xem và chọn tùy chọn mà ta cần
- “value” : được kích hoạt 1 lần và đọc toàn bộ comment và mỗi khi có 1 comment thay đổi nó sẽ được kích hoạt lại và đọc lại 1 lần nữa
- “child_added” : kích hoạt cho mỗi comment , cũng như mỗi khi có comment mới
- “child_removed” : kích hoạt mỗi khi có comment bị xóa;
- “child_changed” : kích hoạt mỗi khi có comment bị thay đổi
- “child_moved” : kích hoạt mỗi khi có comment bị thay đổi vị trí ( trong db);
Có vẻ Child_added là thứ chúng ta cần tìm , even sẽ được kích hoạt khi ta gửi tin mới hoặc có người khác gửi tin đến database và nó sẽ không trả về toàn bộ db mà chỉ trả về child mới được thêm vào .
Callback
Callback của firebase có thể xem như là "snapshot của data” và cũng có nhiều hàm . Bài viết này sẽ sữ dụng name() và val()
Nếu bạn còn nhớ thì khi ta push dữ liệu lên firebase dữ liệu sẽ được thêm 1 child mới với 1 cái tên duy nhất . Hàm name() chính là để trả về cái tên đó
Còn hàm val() cung cấp cho ta 1 js object và ta có thể đọc giá trị thông qua các key value như ở trường hợp chúng ta là “comment” chúng ta có thể sữ dụng val().comment hoặc val()["comment"] đều được
fireBaseRef.on('child_added', function(snapshot) {
var uniqName = snapshot.name();
var comment = snapshot.val()["comment"];
});
Rendering the comment
Sau khi đã nhận được dữ liệu việc còn lại chỉ là render ra html
Để đơn giản ta chỉ cần render mỗi comment trong 1 thẻ div và gán nhãn cho mỗi cm 1 cái tên duy nhất . thông thường thì mỗi Comment được đi với tên người gửi nhưng ở đây ta sẽ làm chat room ẩn danh nên ta dùng luôn tên được lưu trong firebase . Việc thêm 1 trường tên người gửi và gửi đến firebase có lẽ không khó khăn gì.
var commentsContainer = $('#comments-container');
$('<div/>', {class: 'comment-container'})
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment);
Tuy nhiên ta cần add thêm rất nhiều comment nên cần có scrollbar và sẽ tự động kéo xuống khi có cm mới để luôn theo dõi được cm mới nhất
var commentsContainer = $('#comments-container');
$('<div/>', {class: 'comment-container'})
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment)
.appendTo(commentsContainer);
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight'));
thêm vào 1 chút css để dễ nhìn hơn, không quan trọng nhưng cũng đáng công
.container {
max-width: 700px;
}
#comments-container {
border: 1px solid #d0d0d0;
height: 400px;
overflow-y: scroll;
}
.comment-container {
padding: 10px;
margin:6px;
background: #f5f5f5;
font-size: 13px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.comment-container .label {
margin-right: 20px;
}
.comment-container:last-of-type {
border-bottom: none;
}
sau khi chỉnh trang và làm đẹp chúng ta sẽ cho chạy thử lần đầu để xem thành quả
Demo thành quả và code
Tôi sẽ dùng codepen để chạy thử và các bạn có thể mở 2 tab cùng lúc để xem realtime
http://codepen.io/win123139/pen/Jtugw
nếu muốn xem qua bên trong firebase bạn có thể truy cập
https://boiling-fire-5700.firebaseio.com/
với cominit@gmail.com / cominit@gmail.com
tuy còn đơn giản nhưng hi vọng có thể giúp bạn có thêm 1 lựa chọn khi viết ứng dụng của mình nếu chi tiết hơn các bạn có thể tham khảo http://firebase.github.io/firechat/ để thấy 1 ứng dụng đầy đủ hơn
One comment
Đang cần tìm hiểu thì thấy bài viết.
Leave a Comment