如何使用节点js将消息从web服务器推送到浏览器
<!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> 我正在从服务器获取通知的页面上工作。 我只是创build一个button和一个小的div显示通知号码。 我想让该div从服务器获取通知时，服务器推到该div。 我怎样才能从服务器获得推送通知。 我希望客户端代码接收来自服务器的通知。 我只是使用另一个系统和节点js是服务器。
谢谢。
您可以使用节点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'); });
你的前面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>
在terminal或CLI上运行你的index.js文件来激活服务器。 不要忘记安装以下节点模块
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http);
在javascript上使用http请求对象，并从中获取响应，然后将其附加到您的html。 或者你也可以使用jquery ajax。