如何从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

回答

相关问题