如何從Web服務器，使用推送消息到瀏覽器節點JS

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title></title> 
 
<link rel="stylesheet" href="css/animate.css"> 
 
<link rel="stylesheet" href="css/style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="js/jquery.min.js"></script> 
 

 
<script type="text/javascript" > 
 
$(document).ready(function() 
 
{ 
 
$("#notificationLink").click(function() 
 
{ 
 
$("#notificationContainer").fadeToggle(300); 
 
$("#notification_count").fadeOut("slow"); 
 
return false; 
 
}); 
 

 
//Document Click 
 
$(document).click(function() 
 
{ 
 
$("#notificationContainer").hide(); 
 
}); 
 
//Popup Click 
 
$("#notificationContainer").click(function() 
 
{ 
 
return false 
 
}); 
 

 
}); 
 
</script> 
 
<style> 
 
body{background-color:#dedede;font-family:arial} 
 
#nav{list-style:none;margin: 0px; 
 
padding: 0px;} 
 
#nav li { 
 
float: left; 
 
margin-right: 20px; 
 
font-size: 14px; 
 
font-weight:bold; 
 
} 
 
#nav li a{color:#333333;text-decoration:none} 
 
#nav li a:hover{color:#006699;text-decoration:none} 
 
#notification_li{position:relative} 
 
#notificationContainer { 
 
background-color: #fff; 
 
border: 1px solid rgba(100, 100, 100, .4); 
 
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); 
 
overflow: visible; 
 
position: absolute; 
 
top: 30px; 
 
margin-left: -170px; 
 
width: 400px; 
 
z-index: -1; 
 
display: none; 
 
} 
 

 

 
#notificationsBody { 
 
padding: 33px 0px 0px 0px !important; 
 
min-height:300px; 
 
} 
 

 
#notification_count { 
 
padding: 3px 7px 3px 7px; 
 
background: #cc0000; 
 
color: #ffffff; 
 
font-weight: bold; 
 
margin-left: 100px; 
 
border-radius: 9px; 
 
position: absolute; 
 
margin-top: 0px; 
 
font-size: 11px; 
 
} 
 
</style> 
 
</head> 
 

 
<body > 
 
<div style="margin:0 auto;width:900px; margin-top: 30px;"> 
 
<ul id="nav"> 
 

 
<li id="notification_li"> 
 
<span id="notification_count">5</span> 
 
<a href="#" id="notificationLink">Notifications</a> 
 
<div id="notificationContainer"> 
 
<div id="notificationTitle">Notifications</div> 
 
<div id="notificationsBody" class="notifications"> 
 
</div> 
 

 
</div> 
 
</li> 
 
</ul> 
 

 
</div> 
 

 
</body> 
 
</html>

我的工作已經從服務器獲取通知的網頁上。我只是創建一個按鈕和一個小的div顯示通知號碼。我想讓該div在服務器推送到該div時從服務器獲取通知。如何從服務器獲取推送通知。我希望客戶端代碼能夠接收來自服務器的通知。我只是使用另一個系統和節點js是服務器。

謝謝。

來源

2016-07-08 Melbin Mathai

您可以使用節點的js實現它。以下是一個工作代碼示例。 節點JS：index.js

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get("/", function (req, res) { 
    res.sendFile("index.html", {root: __dirname}); 
}); 
io.on("connection", function (socket) { 
    socket.on("notify", function (notification_request) { 
     io.emit('notify', JSON.stringify(notification_request)); 
    }); 
}); 
http.listen(3000, function() { 
    console.log('listenting on 3000'); 
});

您frontent的index.html前</body>

<script> 
    var socket = io(); 
    $('button').click(function() { //notify event triggered 
     socket.emit('notify', {notification-1: "message1", notification-2: "message2", notification-3: "message3"}); 
     return false; 
    }); 
    socket.on('notify', function (notification) { 
     var notifications = JSON.parse(notification); //process notication array 
     $('#notification-div').append(notifications); //display the notification here which is going to be reflected for all clients 
    }); 
</script>

運行您index.js的終端或CLI文件來激活服務器。並且不要忘記安裝以下節點模塊

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http);

來源

2016-07-08 07:04:27

這是幫助我 –

祝你好運，快樂的編碼。 –

在javascript上使用http請求對象，並從中獲取響應，然後將其附加到您的html。或者你也可以使用jquery ajax。

來源

2016-07-08 06:03:15 user3277804

感謝您的支持 –

Node js中通知機制的最佳做法是使用socket.io。這是非常簡單的&易於處理&實時更新的最佳選擇。

退房此鏈接： -

http://socket.io/

來源

2016-07-08 06:04:04 rroxysam

謝謝你。這個鏈接是有用的 –

如何從Web服務器，使用推送消息到瀏覽器節點JS

回答

相關問題