如何使用node js将消息从Web服务器推送到浏览器

Posted

技术标签:

【中文标题】如何使用node js将消息从Web服务器推送到浏览器【英文标题】:how to push a message from web server to browser using node js 【发布时间】:2016-11-10 14:53:27 【问题描述】:

<!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>
bodybackground-color:#dedede;font-family:arial
#navlist-style:none;margin: 0px;
padding: 0px;
#nav li 
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;

#nav li acolor:#333333;text-decoration:none
#nav li a:hovercolor:#006699;text-decoration:none
#notification_liposition: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 是服务器。

谢谢。

【问题讨论】:

【参考方案1】:

你可以使用 node 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');
);

&lt;/body&gt;之前的你的前端 index.html

<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>

在终端或 CLI 上运行您的 index.js 文件以激活服务器。并且不要忘记安装以下节点模块

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

【讨论】:

祝你好运,编码愉快。【参考方案2】:

Node js 中通知机制的最佳实践是使用 socket.io。它非常简单易用,最适合实时更新。

查看此链接:-

http://socket.io/

【讨论】:

谢谢你。这个链接很有帮助【参考方案3】:

在 javascript 上使用 http 请求对象并从中获取响应,然后将其附加到您的 html 中。或者你也可以使用 jquery ajax。

【讨论】:

感谢支持

以上是关于如何使用node js将消息从Web服务器推送到浏览器的主要内容,如果未能解决你的问题,请参考以下文章

JAVA从服务器推送到客户端

将数据从 web 服务推送到 android 应用程序:C2DM

使用 Node.js 和 Socket.io 将更改推送到所有客户端

如何防止 Node.js 将套接字消息拆分成更小的块

从异步回调函数将对象推送到本地数组

如何将消息从 Activemq 推送到消费者