Node.js - Enviar notificacion de servidor a cliente.

 
Vista:
sin imagen de perfil
Val: 3
Ha disminuido 1 puesto en Node.js (en relación al último mes)
Gráfica de Node.js

Enviar notificacion de servidor a cliente.

Publicado por leandro (3 intervenciones) el 02/11/2019 17:29:15
Buen dia.
Les comento mi problema a ver si lo pueden solucionar.
Estoy haciendo un proyecto de automatizacion de una casa. Para ello uso un servidor que esta instalado en una pc y modeulos NodeMcu (ESP-8266).

En resumen lo que tengo que hacer es desde un apagina de internet prender un led que esta conectado a un Nodemcu.

Lo que quiero hacer es que una vez que el ciente mande la peticion , el Nodemcu ademas de prender el Led mande un mensaje al servidor afirmando que el led se prendio y el servidor que mande una alerta al navegador confirmando que el led esta prendido.

Lo que no logro hacer es mandar el mensaje del servidor al cliente. No se si me conviene hacerlo con AJAX, con sockets o con algun otro framework.

Les dejo el codigo del servidor y del cliente.
Cabe aclarar que funciona todo. Solo le falta agregar el mensakje del servidor al cliente cuando se prende el LED.
Codigo servidor Node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
const express = require('express');
//const morgan=require('morgan');
//const mongoose=require('mongoose');
const app = express();
var http = require('http').Server(app);
let fs = require('fs');
const hyf=require('./obtenerfyh');
const au=require('./auto2');
const su=require('./suscrib2');
 
// require('dotenv').config({path: __dirname + '/.env.variables.json'})
// import {envSetup} from 'env.json'
// envSetup()
//var x1="00";
//------------------inicio function para automarizar (horarios) auto.js-----------------
au.z();
//------------------fin function para utomarizar (horarios)-----------------
 
 
//------------------inicio function para suscribir (a esp8266) suscrib.js-----------------
su.suscrib2();
 
//------------------fin function para suscribit -----------------
// var mqtt    = require('mqtt');
// var client  = mqtt.connect(ip,{clientId:"ESP_60B4E8"});
// var topic2="casa/despacho/estado";  //asignas el topic
// client.on('connect',function(){
//   client.subscribe(topic2);
//   console.log("conecatado a topix",topic2);
//   client.on('message',function(topic2, message){
//     console.log("message is "+ message);
//     console.log("topic is "+ topic2);
//   });
// });
// client.on('message',function(topic2, message){
//   console.log("message is "+ message);
//   console.log("topic is "+ topic2);
// });
 
 
// var io = require('socket.io')(server);
// io.on('connection',function(socket){
//     socket.emit('welcome_event', { info: 'world' });
//     socket.on('response_evet',function(data){
//         console.log("Data desde el cliente",data);
//     });
// });
 
const socketio = require('socket.io')
const io = socketio(server)//iniciando el server de socket.io
io.on('connection',function(socket){
    socket.emit('welcome_event', { info: 'world' });
    socket.on('response_evet',function(data){
        console.log("Data desde el cliente",data);
    });
});
 
//-----------------mqtt-------------------
//var mqtt    = require('mqtt'); //requiere la libreria mqtt
//var client  = mqtt.connect("mqtt://192.168.0.1",{clientId:"ESP_60B4E8"}); //ip de la raspberry(el mqtt no sacarlo)
//console.log("connected flag  " + client.connected);
//---------------------- fin mqtt-----------------
 
 
 
//setting
app.use(express.static('views'));
app.set('port',3000);//setea el puerto 4000
//establece un motor de renderizado de html
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
var ip="mqtt://192.168.0.194"; //direccion ip de la raspberry
//fin establece un motor de renderizado de html
//middlwears
//app.use(morgan('dev'));//muestra en la consola del servidor que el navegador hizo una peticion
//app.use(express.json());
 
 
 
//fin pruebaaaaaaaaaaaaaaaaaaj
//routes
//router.get('/routes/tasks', (req,res)=>{
  // res.send('This is api.');
//});
//static files
//console.log(__dirname) //para saber la ruta
//app.use(express.static(__dirname+'/public'));//aca el servidor lo coencta con la carpeta public que va a estar todo lo del fronthead
 
 
//-------------------inicio funcion para controlar leds exterior------------------
function exterior(vector){
    console.log("exterior");
    console.log(vector);
    var mqtt    = require('mqtt');
    var client  = mqtt.connect(ip,{clientId:"ESP_60B4E8"}); //ip de la raspberry(el mqtt no sacarlo)
    console.log("connected flag  " + client.connected);
    client.on('connect', function(x){ //funcion que debe esatr si o si
      console.log("conectado");
      client.publish(topic,vector,options);
      client.end(); //lo desconecta porque sino queda siempre coenctado y manda datos continuamente
    });
 
 
  /*Callback for lost connection*/
    function ConnectionLost(res) {
      if (res.errorCode !== 0) {
        console.log("Connection lost:" + res.errorMessage);
        Connect();
      }
    }
 
    var topic="casa/despacho/exterior";  //asignas el topic
    var options={ //asignas las opciones
      retain:false,
      qos:2};
}
//------------fin funcion para controlar leds exterior----------------------
 
//-------------------inicio funcion para controlar leds interior------------------
function interior(vector){
  var mqtt    = require('mqtt');
  var client  = mqtt.connect(ip,{clientId:"ESP8266Client_interior"}); //ip de la raspberry(el mqtt no sacarlo)
  var topi_estado="casa/despacho/estado";
  client.subscribe(topi_estado)
    console.log("interior");
    console.log(vector);
    console.log("connected flag  " + client.connected);
    client.on('connect', function(x){ //funcion que debe esatr si o si
      console.log("conectado");
      client.publish(topic,vector,options);
      client.end(); //lo desconecta porque sino queda siempre coenctado y manda datos continuamente
    });
}
 
 
  //Callback for lost connection
    function ConnectionLost(res) {
      if (res.errorCode !== 0) {
        console.log("Connection lost:" + res.errorMessage);
        Connect();
      }
    };
 
    var topic="casa/despacho/interior";  //asignas el topic
    var options={ //asignas las opciones
      retain:false,
      qos:2};
//------------fin funcion para controlar leds interior----------------------
 
 
app.get('/controlexterior', (req, res)=>{
  res.render('controlexterior.html');  //levanta la pagina control.html
});
app.get('/automatizaciondos', (req, res)=>{
  res.render('automatizaciondos.html');  //levanta la pagina control.html
});
app.get('/led', (req, res)=>{
  var vector=req.query.led;
  console.log(vector);
  vector=vector.split(".").join("");
  for (var x=0; x<vector.length; x++)
      console.log(vector[x]+"<br>");
  console.log(vector[1])
  if ((vector[0]=="0") && (vector[1]=="0")){
    exterior(vector)
    // res.json({
    //   led:['prendido']
    // });
    //res.append('Warning','hola real')
    //res.send('prendio led 1')
    console.log("entro exterior");
  }
    else if ((vector[0]=="0") && (vector[1]=="1")) {
        interior(vector);
        console.log("entro interior");
      };
  res.render('controlexterior');
});
 
app.get('/product', (req, res)=>{
    // res.json({
    //   led:['prendido']
    // });
    //res.append('Warning','hola real')
    res.send('prendio led 1')
    console.log("prendio led 1");
    res.render('controlexterior');
});
 
app.post('ruta',(req,res)=>{
  res.send('guardando...');
});
 
app.put('ruta',(req,res)=>{
  res.send('actualizandoo...');
});
app.delete('ruta',(req,res)=>{
  res.send('eliminando...');
});
 
 
//-----------Para que la aplicacion escuche el puerto port--------------
var server= app.listen(app.get('port'),()=>{
  console.log('server on port',app.get('port'));
});

Codigo Cliente web
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!--Import Google Icon Font-->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="../auto_horario.js"></script>
  <script>
    var socket = io('./index.js');
    socket.on('welcome_event', function (data) {
        console.log(data);
        socket.emit('response_evet', { hola: 'mundo' });
    });
  </script>
	<title>Automatización </title>
</head>
<body>
 
<div class="container">
    <nav class="teal lighten-1 nav-extended">
		<div class="nav-wrapper">
        <a  class="brand-logo " href="#datos">MastroWeb</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a  href="control.html">Control</a></li>
        <li><a  href="alarma.html">Alarma</a></li>
        <li><a  href="automatizacion">Automatización</a></li>
        <li><a  href="automatizaciondos.html">Automatización 2</a></li>
        <!----<img src="../public/imagenes/recurso2.jpg" alt="">-->
        </ul>
        <ul class="sidenav" id="mobile-demo">
            <li><div class="user-view">
                <div class="background">
                  <img src="domotica.jpg">
                </div>
                <a href="#user"><img class="circle" src="IMG_1251.JPG"></a>
                <a href="#name"><span class="white-text name">Leandro Mastromarino</span></a>
                <a href="#email"><span class="white-text email">leandromastromarino@gmail.com</span></a>
            <li><a ><i class="subheader material-icons">home</i>Control</a>
              <li class="center"><a href="#test1">Control Interior</a></li>
              <li class="center"><a class="active" href="#test2">Control exterior</a></li>
            </li>
            <div class="divider"></div>
            <li><a  href="alarma.html">Alarma</a></li>
            <div class="divider"></div>
            <li><a  href="automatizacion"><i class="material-icons">settings_power</i>Automatización</a></li>
            <div class="divider"></div>
            <li><a  href="automatizaciondos">Automatización 2</a></li>
            <div class="divider"></div>
            <div class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r active"><i
                      class="sv-slim-icon fas fa-chevron-right"></i>
                    Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect active">
                          <span class="sv-slim"> SL </span>
                          <span class="sv-normal">Submit listing</span></a>
                      </li>
                      <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> RF </span>
                          <span class="sv-normal">Registration form</span></a>
                      </li>
                    </ul>
                  </div>
                </li>
              </div>
 
    </div>
    <div class="nav-content">
        <ul class="tabs tabs-transparent">
          <li class="tab"><a href="controlinterior.html">Control Interior</a></li>
          <li class="tab"><a class="active" href="controlexterior.html">Control exterior</a></li>
        </ul>
      </div>
      </nav>
		<div class="row card-panel grey lighten-5">
      <div class="col s6 push-s1 section">
      <h5>Habitación 1</h5>
           <br><br>
          <div>Led1</div>
            <br>
            <div>
              <form action="/led" method="GET">
              <button id="led1" type="submit" name="led" value="0.0.1"class="btn teal lighten-1" href="control.html">Encender</button>
              <button type="submit" name="led" value="0.0.0"class="btn teal lighten-1">Apagar</button>
              <button id='product' class="btn teal lighten-1">prueba</button>
              <br>
            </div><br><br>
            <div>Led2</div>
              <br>
              <div >
                <form action="/led" method="GET">
                <button type="submit" name="led" value="0.0.a.1"class="btn teal lighten-1">Encender</button>
                <button type="submit" name="led" value="0.0.a.0"class="btn teal lighten-1">Apagar</button>
                <br>
              </div><br><br>
              <div>Led3</div>
                  <br>
                  <div>
                    <form action="/led" method="GET">
                    <button type="submit" name="led" value="0.0.a.a.1"class="btn teal lighten-1">Encender</button>
                    <button type="submit" name="led" value="0.0.a.a.0"class="btn teal lighten-1">Apagar</button>
                      <br>
                  </div>
                </div>
      <div class="col s6 push-s1 section">
          <h5>Habitación 2</h5>
           <br><br>
           <div >Led1</div>
             <br>
               <div >
                   <form action="/led" method="GET">
                   <button type="submit" name="led" value="0.1.1"class="btn teal lighten-1">Encender</button>
                   <button type="submit" name="led" value="0.1.0"class="btn teal lighten-1">Apagar</button>
               </div><br><br>
               <div>Led2</div>
                   <br>
                   <div>
                     <form action="/led" method="GET">
                     <button type="submit" name="led" value="0.1.a.1"class="btn teal lighten-1">Encender</button>
                     <button type="submit" name="led" value="0.1.a.0"class="btn teal lighten-1">Apagar</button>
                   </div><br><br>
                  <div>Led3</div><br>
                       <div>
                           <form action="/led" method="GET">
                           <button type="submit" name="led" value="0.1.a.a.1"class="btn teal lighten-1">Encender</button>
                           <button type="submit" name="led" value="0.1.a.a.0"class="btn teal lighten-1">Apagar</button>
                             <br>
                       </div>
          </div>
      <div class="clear"></div>
    </div>
		<div class="content5">
			<div class="barra_inferior">
          <blockquote >
              This is an example quotation that uses the blockquote tag.
            </blockquote>
					<p>Leandro Mastromarino</p>
			</div>
		</div>
</div>
</form>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>
<script src="./app.js"></script>
<script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
var ps = new PerfectScrollbar(sideNavScrollbar);
</script>
</body>
</html>

Espero se haya entenido.

En resumen tengo que mandar un mensaje de alerta del servidor al cliente y no se como hacerlo.

Desde ya muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder