как отправить сообщение с веб-сервера в браузер с помощью node js

#javascript #html #css #ajax #server

Вопрос:

 <!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.
Как я могу получить push-уведомление с сервера. Мне нужен код на стороне клиента для получения уведомления от sever. Я просто использую другую систему, а узел js является сервером.

Спасибо.

Ответ №1:

Вы можете достичь этого, используя узел 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>

Запустите свой index.js файл на терминале или в командной строке для активации сервера. И не забудьте установить следующие модули узлов

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

Ответ №2:

Используйте объект http-запроса на javascript и получите от него ответ, а затем добавьте его в свой html. Или вы также можете использовать jquery ajax.

Ответ №3:

Наилучшей практикой для механизма уведомления в узле js является использование socket.io. Это действительно просто и легко в обращении и лучше всего подходит для обновления в реальном времени.

Проверьте эту ссылку : —

http://socket.io/