Real time Notification When any Changes In Datasase

Question

Firstly  i say Thanks ,

 

My stuck is That i have try to Implement Real time Notification  since Last few day  but i cant Done  Becouse When i implement it then   my Code are Working fine but No Notification Has Been Displayin client Side .

 

My code are give Below.

 

Its Is My Repositrycore When I checke that Data from Data Base.

 

 

Use Folowiing JS library

 

 

 

This Is My Code :

<script type="text/javascript">
function getAllMessagesForBlog() {
$.ajax({
type: "POST",
url: "Chat.aspx/getAllMessagesForBlog",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$('#messagesTable tbody').empty();
var table = $('#messagesTable tbody');
var row = '';
for (var i = 0; i < result.d.length; i++) {
displayNotification("Click Here", "http://localhost:1386/asset/images/Icontesty.png", result.d[i].BlogTitle, 'http://localhost:1386/blog/' + result.d[i].BlogTitleURL);
}
},
error: ErrorMessage
});
function ErrorMessage(result) {
document.location.href = '/something-went-wrong?error=' + result.status + ' ' + result.statusText + ' ' + result.responseText;
} //c
}
function getAllMessagesForProduct() {
$.ajax({
type: "POST",
url: "Chat.aspx/getAllMessagesForProduct",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$('#messagesTable tbody').empty();
var table = $('#messagesTable tbody');
var row = '';
for (var i = 0; i < result.d.length; i++) {
displayNotification("Click Here", "http://localhost:1386/asset/images/Icontesty.png", result.d[i].ProductName, 'http://localhost:1386/' + result.d[i].CategoryAlias + '/' + result.d[i].FlavourAlias + '/' + result.d[i].OccasionAlias + '/' + result.d[i].ProductAlias, 6000000);
}
},
error: ErrorMessage
});
function ErrorMessage(result) {
document.location.href = '/something-went-wrong?error=' + result.status + ' ' + result.statusText + ' ' + result.responseText;
} //c
}
function displayNotification(body, icon, title, link, duration) {
link = link || 0; // Link is optional
duration = 30000; // Default duration is 5 seconds
var options = {
body: body,
icon: icon
};
var n = new Notification(title, options);
if (link) {
n.onclick = function () {
window.open(link);
};
}
setTimeout(n.close.bind(n), duration);
}
function makeNotification() {
$(function () {
var notifications = $.connection.myChatHub;
notifications.client.updateMessages = function () {
// alert('hello');
//getAllMessagesForProduct();
getAllMessagesForBlog()
};
$.connection.hub.start().done(function () {
//alert('hello12');
// getAllMessagesForProduct();
getAllMessagesForBlog();
}).fail(function (e) {
alert(e);
});
});
}
window.onload = function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
makeNotification();
}
else if (Notification.permission != 'denied') {
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
makeNotification();
}
});
}
else {
var notification = new Notification("New notification Blocked!");
}
}
</script>

But I have No Notification In Real Time please chaeck 

 

this code in global file 

 

 

Please Provide Best solution If Have you Done Before and have Working fine Please Share Code With all REfrence with all dependency

 

thankyou.