Video học lập trình mỗi ngày

Có nhiều bạn vẫn đang thắc mắc hoặc đang đi tìm giải pháp "is writing.." or "typing" khi làm chat (conversations). Và bài này mình sẽ giới thiệu một cách trong nhiều cách, nhưng mình thấy cách này tương đối ngon nên mạo muội chia sẻ đến cho các bạn...

Lưu ý mình chỉ giới thiệu cho các bạn nào đang xài FireBase nhé, còn Socket.io thì mình sẽ có bài tiếp theo nếu bạn nào đang sử dụng Socket để làm chat.

Các bạn thấy đó trong mỗi ứng dụng nào đều cũng có chức năng này, có giúp cho User tương tác một cách trực quan hơn, và quan trọng đúng là realtime :D.

Ví dụ: what's app, facebook, line...

Rất nhiều và nó rất phổ biến trong ứng dụng chat. Vậy làm sao để có được tính năng như vậy trên FireBase.

Nếu bạn nào đáng sử dụng FireBase để Store data và làm event Realtime thì bài này danh cho các bạn. Bắt đầu nào:

Đầu tiên bạn phải tạo cho mình một FireBase Database, Cách tạo thì link này nhé: https://firebase.google.com/docs/database/ios/structure-data

Bước đầu tiên là sự kiện khi User bắt đầu chat thì chúng ta dùng sự kiện này:

 
// Khai báo fireabase
var ref = new Firebase('https://anonystick-83a85.firebaseio.com/');
// su kien moi nguoi khi chat se hien thi o day
ref.on('value', function(snapshot) {
 users.innerText = '';
 
 snapshot.forEach(function(typer) {
 var li = document.createElement('li');
 li.innerText = typer.key() + ': is writing...' ;
 users.appendChild(li);
 })
 
})


Còn sử kiện này là nó hiện thị tất cả các User đang chat trong room chúng ta.
document.getElementById('mytext').addEventListener('input',function(e) {
 
 // KHi user bat dau chat thi se set gia tri cho User nay
 ref.child(uid).set(true);
 // xoa su kien sau khi timer bat dau
 if (timer) clearTimeout(timer);
 // remove user nay trong vong 1 second
 timer = setTimeout(function() {
 ref.child(uid).remove();
 }, 1000);
})


Full code bao gồm html,  các bạn có thể test tại đây : jsbin.com