Tạo notification realtime cùng với Firebase + Javascript và JQuery

Học JQuery 17/05/2014 07:00 3019
Tiếp tục một ứng dụng nhỏ nhỏ nữa thì trong bài viết này mình sẽ hướng dẫn các bạn xây dựng một chức năng notification realtime cùng với Firebase + Javascript và JQuery.

Hiển thị thông báo trình duyệt từ ứng dụng web

Hôm nay tôi sẽ hướng dẫn các bạn hiển thị thông báo của trình duyệt từ ứng dụng website của bạn. Đối tượng Notification

Trong bài viết trước mình đã giới thiệu tới các bạn về Firebase cùng với Javascript và JQuery. Đồng thời mình cũng hướng dẫn cách tạo một Project trên Google Firebase. Nhúng các thư viện cần thiết khi sử dụng Firebase cùng với Javascript và JQuery. Mình cũng đã hướng dẫn các bạn xây dựng một ứng dụng Chat Simple để các bạn hiểu hơn về cách xây dựng một ứng dụng Web sử dụng Firebase cùng với Javascript và JQuery.

Thì trên website này mình cũng đã chia sẻ với các bạn cách hiển thị một thông báo(notification) của trình duyệt Chrome rồi. Thì trong bài viết này mình sẽ hướng dẫn các bạn làm một chức năng cho phép trình duyệt Chrome hiển thị thông báo realtime đó sử dụng Firebase cùng với Javascript và JQuery.

Ok ! Chúng ta bắt đầu nào !!

1. Tạo một Project.

Thì việc đầu tiên bạn cần có một Project ở Google Firebase. Nếu bạn chưa có một Project nào thì bạn truy cập vào website https://firebase.google.com/ để tạo một Project. Ngược lại bạn có thể sử dụng một Project bất kỳ của bạn. Trong ứng dụng này chúng ta chỉ cần dịch vụ Database của Google Firebase mà thôi nên bạn cần lưu ý đường link của APP.

Thì trong ứng dụng này mình sẽ vẫn sử dụng Project Chat Simple từ bài viết trước và có đường link truy xuất Database của APP là:

2. Chèn thư viện JQuery và Firebase

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>

3. Yêu cầu trình duyệt Chrome cấp quyền nhận thông báo

document.addEventListener('DOMContentLoaded', function () {
	if (Notification.permission !== "granted"){
		Notification.requestPermission();
	}
}

4. Xây dựng hàm notifications

function notifyBrowser(title,desc,url){
	if (!Notification) {
		console.log('Desktop notifications not available in your browser..'); 
		return;
	}
	if (Notification.permission !== "granted"){
		Notification.requestPermission();
	}
	else {
		var notification = new Notification(title, {
			//icon:'http://exaple.com/logo.png',
			body: desc,
		});

		// Remove the notification from Notification Center when clicked.
		notification.onclick = function () {
			window.open(url);      
		};
	
		// Callback function when the notification is closed.
		notification.onclose = function () {
			console.log('Notification closed');
		};
	}
}

Trong đó.

  • title: Tiêu đề của thông báo
  • desc: Nội dung sẽ được hiển thị trên thông báo.
  • url: Liên kết của thông báo khi người dùng click vào thông báo.

Chúng ta se xây dựng một form đơn giản gồm.

  • Textarea: Nhập vào nội dung thông báo.
  • Button: Submit FORM tạo thông báo.
<div class="notification-app">
    <div class="notification-input">
        <textarea tabindex="2" placeholder="Enter your message" id="notification-message"></textarea>
        <br />
        <button id="notification-button" class="btn btn-success">Nitification</button>
    </div>
</div>

Chúng ta bắt đầu viết JS với Firebase nào.

var dbRef = new Firebase("https://chatsimple-abc.firebaseio.com/");
// Di chuyển tới node notifications
var notificationsRef = dbRef.child('notifications');
// Lấy một node mới nhất đã được thêm vào
var notificationsLastQuery = notificationsRef.orderByKey().limitToLast(1);

Như thường lệ chúng ta sẽ bắt sự kiện child_added là khi bất kỳ một node con được thêm vào.

notificationsLastQuery.on("child_added", function(snap) {
	var notifier = snap.val();
	// Kiểm tra node đã hiển thi chưa
	if(notifier.is_notification==false){
		notifyBrowser('Thông báo', notifier.notification, '/');
	}
	// Cập nhật node đã hiển thị thông báo
	notificationsRef.child(snap.key()).update({
		'is_notification' : true
	});
});

Hàm update cho phép chúng ta cập nhật lại giá trị của một property nào đó trong một node với giá trị Key.

  • snap.key Lấy về Key của node.
  • sap.value Lấy về value của node.

Thì trong đoạn code trên mình có sử dụng môt biến là is_notification biến này được giữ vai trò như một cờ hiệu. Nếu lúc chưa hiển thị thông báo thì cơ hiều này bằng FALSE. Ngược lại lúc thông báo đã được hiển thị thì cờ hiệu TRUE.

Tiếp tục chúng ta sẽ bắt sự kiện khi người dùng click vào button notification.

document.querySelector("#notification-button").addEventListener("click", function(e){
	e.preventDefault();
	if($('#notification-message').val()==''){
		$('#notification-message').focus();
		return false;
	}
	// Save notification
	var notification = {
		'is_notification' : false,
		'notification' : $.trim($('#notification-message').val())
	};
	notificationsRef.push(notification);
	$('#notification-message').val('');
	return false;
});

Full Code.

<script type="text/javascript">
	var dbRef = new Firebase("https://chatsimple-abc.firebaseio.com/");
	var notificationsRef = dbRef.child('notifications');
	var notificationsLastQuery = notificationsRef.orderByKey().limitToLast(1);
	
	notificationsLastQuery.on("child_added", function(snap) {
		var notifier = snap.val();
		// Kiểm tra node đã hiển thi chưa
		if(notifier.is_notification==false){
			notifyBrowser('Thông báo', notifier.notification, '/');
		}
		// Cập nhật node đã hiển thị thông báo
		notificationsRef.child(snap.key()).update({
			'is_notification' : true
		});
	});
	document.addEventListener('DOMContentLoaded', function () {
		if (Notification.permission !== "granted"){
			Notification.requestPermission();
		}
		document.querySelector("#notification-button").addEventListener("click", function(e){
			e.preventDefault();
			if($('#notification-message').val()==''){
				$('#notification-message').focus();
				return false;
			}
			// Save notification
			var notification = {
				'is_notification' : false,
				'notification' : $.trim($('#notification-message').val())
			};
			notificationsRef.push(notification);
			$('#notification-message').val('');
			return false;
		});
	});
	function notifyBrowser(title,desc,url){
		if (!Notification) {
			console.log('Desktop notifications not available in your browser..'); 
			return;
		}
		if (Notification.permission !== "granted"){
			Notification.requestPermission();
		}else {
			var notification = new Notification(title, {
				//icon:'http://exaple.com/logo.png',
				body: desc,
			});
			// Remove the notification from Notification Center when clicked.
			notification.onclick = function () {
				window.open(url);      
			};
			// Callback function when the notification is closed.
			notification.onclose = function () {
				console.log('Notification closed');
			};
		}
	}
</script>
<style type="text/css">
	.notification-app{ width:400px; margin:50px auto;}
	.notification-input > textarea{ width:96%; padding:2%; border:1px solid #DDD;}
</style>
<div class="notification-app">
	<div class="notification-input">
		<textarea tabindex="2" placeholder="Enter your message" id="notification-message"></textarea>
		<br />
		<button id="notification-button" class="btn btn-success">Nitification</button>
	</div>
</div>

Tổng kết.

Như vậy mình đã hướng dẫn xong các bạn làm một ứng dụng nhỏ nhỏ là Tạo notification realtime cùng với Firebase + Javascript và JQuery. Thì ứng dụng này được áp dụng vào đâu thì gần đây nhất mình đã áp dụng cái này vào việc thông báo trên màn hình của người quản trị thông báo có đơn hàng mới. Và thông báo tình trạng có ai đó đã đặt phòng khách sạn.vvv

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.