I'm doing an application where I read a database in MySQL (MariaDB) and the result (an array) I render it to a template in jade.
I try to create a slider for 8 images in 4 columns Bootstrap and 2 images with descriptive information in 8 columns of a single row. With static data I do it and it works sending the information from the database to the template in Jade (pug) and shows the screenshot as I want but when using socket.io it does not work.
I use socket.io to update the results of reading the database and, therefore, I use a script in the jade template to declare a variable slidder and assign a set of HTML along with the variables transmitted to the template jade by the socket.
I can not find the way to handle this arrangement with HTML content sent from the app in nodejs to a container DIV.
rendered in the app (node js )
app.get('/punto2',function(peticion,respuesta){
// Doing count register with estado=0
var query = client.query(conteoquery, function(error, result){
if(error){
var query = client.query(aceros, function(err, result) {
console.log("Registro actualizado!!");
console.log("2. Cambiados: "+result.changedRows+"; Afectados: "+ result.affectedRows);
});
throw error;
}else{
// Doing the database query
client.query(cadquery,function selectCb(err, dattos, fields) {
// Los datos recibidos estan en dattos
if (err) {
var query = client.query(aceros, function(err, result) {
console.log("2. Cambiados: "+result.changedRows+"; Afectados: "+ result.affectedRows);
});
throw err;
}
else{
for(var i=0;i<dattos.length;i++)
{
console.log(dattos[i].cab)
}
ip=peticion.hostname;
console.log("/punto2. ip server: ",ip);
**respuesta.render('indexn2sck2.jade',{data:dattos,ip:ip});**
}
})
}
});
});
the socket
var pollingLoop = function() {
// Doing the database query
var cadquery='SELECT * from articulos WHERE estado <> TRUE limit 1,8';
var query = client.query(cadquery),
users = []; // this array will contain the result of our db query
//var query1=client.query(cadquery1);
// setting the query listeners
query
.on('error', function(err) {
// Handle error, and 'end' event will be emitted after this as well
console.log("Error en pollingLoop: "+err);
/* updateSockets(err);*/
})
.on('result', function(user) {
// it fills our array looping on each user row inside the db
//console.log("onresult ");
users.push(user);
})
.on('end', function() {
// loop on itself only if there are sockets still connected
if (connectionsArray.length) {
pollingTimer = setTimeout(pollingLoop, POLLING_INTERVAL);
// console.log("onend ");
updateSockets({
turnos: users
});
} else {
console.log('El Servidor fue parado porque no existen mas conexiones');
}
});
}
var updateSockets = function(data) {
// adding the time of the last update
data.time = new Date();
console.log("updateSockets: ",data.turnos[0].nombre);
//console.log('Pushing new data to the clients connected ( connections amount = %s ) - %s', connectionsArray.length , data.time);
// sending new data to all the sockets connected
console.log("%s %s %s // %s %s %s",data.time.getFullYear(),data.time.getMonth()+1,data.time.getDay()+1,data.time.getHours(),data.time.getMinutes(),data.time.getSeconds());
connectionsArray.forEach(function(tmpSocket) {
tmpSocket.volatile.emit('notification', data);
});
};
the jade template (pug): index.jade
body
#titulo.titulo
#contenedor.contenedor
img(src='img/nombre.png', alt='nombre')
script(src="js/jquery-3.1.1.min.js")
script(src='http://#{ip}:7200/socket.io/socket.io.js')
script.
var slidder;
var ips='http://#{ip}:7200/socket.io/';
$(document).ready(function() {
// create a new websocket
var socket = io.connect(ips);
// on message received we print all the data inside the #container div
socket.on('notification', function (data) {
**slidder**='<div class="container-fluid"><div class="row"><div class="col-md-4"><div id="carousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-1" data-slide-to="0" class="active"></li><li data-target="#carousel-1"data-slide-to="1"></li><li data-target="#carousel-1" data-slide-to="2"></li><li data-target="#carousel-1" data-slide-to="3"></li><li data-target="#carousel-1" data-slide-to="4"></li><li data-target="#carousel-1" data-slide-to="5"></li><li data-target="#carousel-1" data-slide-to="6"></li><li data-target="#carousel-1" data-slide-to="7"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/#{data[0].imagen}" class="img-responsive" alt="slide 1"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[0].nombre}</h3><br><p>#{data[0].generales}</p></div></div><div class="item"><img src="img/#{data[1].imagen}" class="img-responsive" alt="slide 2"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[1].nombre}</h3><br><p>#{data[1].generales}</p></div></div><div class="item"><img src="img/#{data[2].imagen}" class="img-responsive" alt="slide 3"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[2].nombre}</h3><br><p>#{data[2].generales}</p></div></div><div class="item"><img src="img/#{data[3].imagen}" class="img-responsive" alt="slide 4"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[3].nombre}</h3><br><p>#{data[3].generales}</p></div></div><div class="item"><img src="img/#{data[4].imagen}" class="img-responsive" alt="slide 5"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[4].nombre}</h3><br><p>#{data[4].generales}</p></div></div><div class="item"><img src="img/#{data[5].imagen}" class="img-responsive" alt="slide 6"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[5].nombre}</h3><br><p>#{data[5].generales}</p></div></div><div class="item"><img src="img/#{data[6].imagen}" class="img-responsive" alt="slide 7"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[6].nombre}</h3><br><p>#{data[6].generales}</p></div></div><div class="item"><img src="img/#{data[7].imagen}" class="img-responsive" alt="slide 8"><div class="carousel-caption hidden-xs hidden-sm hidden-md hidden-lg"><h3>#{data[7].nombre}</h3><br><p>#{data[7].generales}</p></div></div></div></div></div><br><div class="col-md-8"><div class="item1"><div class="cab"><div class="well well-sm"><span class="dattum">#{data[0].cab}</span></div></div><div class="propi"><div class="configuracion">Codigo:<span class="dattum">#{data[0].codigo}</span></div><div class="configuracion">Nombre:<span class="dattum">#{data[0].nombre}</span></div><div class="configuracion">Potencia:<span class="dattum">#{data[0].potencia}</span></div><div class="configuracion">Velocidad:<span class="dattum">#{data[0].velocidad}</span></div><div class="configuracion">Alimentacion:<span class="dattum">#{data[0].alimentacion}</span></div><div class="configuracion">Uso:<span class="dattum">span #{data[0].uso}</span></div><div class="configuracion">Generales:<span class="dattum">#{data[0].generales}</span></div></div><div class="imagen"><img src="/img/#{data[0].imagen}" class="img-responsive" alt="slide 1"></div><div class="pie"><div class="well well-sm">#{data[0].pie}</div></div></div><div class="item2"><div class="cab"><div class="well well-sm"><span class="dattum">#{data[1].cab}</span></div></div><div class="propi"><div class="configuracion">Codigo:<span class="dattum">#{data[1].codigo}</span></div><div class="configuracion">Nombre:<span class="dattum">#{data[1].nombre}</span></div><div class="configuracion">Potencia:<span class="dattum">#{data[1].potencia}</span></div><div class="configuracion">Velocidad:<span class="dattum">#{data[1].velocidad}</span></div><div class="configuracion">Alimentacion:<span class="dattum">#{data[1].alimentacion}</span></div><div class="configuracion">Uso:<span class="dattum">span #{data[1].uso}</span></div><div class="configuracion">Generales:<span class="dattum">#{data[1].generales}</span></div></div><div class="imagen"><img src="/img/#{data[1].imagen}" class="img-responsive" alt="slide 1"></div><div class="pie"><div class="well well-sm">#{data[1].pie}</div></div></div></div></div></div>';
**$('#contenedor').html(slidder);**
});
});
#pie.pie
img(src='img/nombre.png', width='20%', height='7%', alt='citturn' style='float:left')
Where slider is the variable and the data from app.js are named
#data[0].nombre
#data[0].cab
etc.
Employment local addressing for bootstrap and for jquery.
Errors
The socket data reaches the rendered html file but I can not show it. I appreciate your help. Thanks in advance.