Я занимаюсь разработкой приложения с использованием express / socket.io / knockout.js, я впервые использую knockout.js, а точнее, я использую пример simpleGrid из живого примера knockout, но с той разницей, что я получить JSON из сокета в server.js, у меня нет проблем с этим, я получаю json с сервера в клиентское приложение, но я не могу обновить / обновить простую сетку с помощью json. Сетка заполняется в первый раз через ajax-вызов, но не обновляется с помощью socket.io, и я могу регистрироваться с использованием данных console.log json, поступающих с сервера .emit.
Ура,
SR109
Вот мой index2.html, клиент приложения:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title of the document</title>
<script type='text/javascript' src='js/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='js/knockout-3.4.2.js'></script>
<script type='text/javascript' src='js/knockout.simpleGrid.3.0.js'></script>
<script type='text/javascript' src="http://localhost:3000/socket.io/socket.io.js"></script>
<link rel="stylesheet" type="text/css" href="cs/sheetindex2.css">
</head>
<body>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
</div>
<script>
var registros = [];
var registros2 = [];
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
ko.applyBindings(new PagedGridModel(registros2));
},
error: function(req, err){
console.log('my message' + err);
}
})
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
console.log(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Fecha", rowText: "fecha" },
{ headerText: "Turno", rowText: "turno" },
{ headerText: "1", rowText: "h1" },
{ headerText: "2", rowText: "h2" },
{ headerText: "3", rowText: "h3" },
{ headerText: "4", rowText: "h4" },
{ headerText: "5", rowText: "h5" },
{ headerText: "6", rowText: "h6" },
{ headerText: "7", rowText: "h7" },
{ headerText: "8", rowText: "h8" }
],
pageSize: 30
});
};
var socket = io.connect('http://localhost:3000');
console.log('Un cliente se ha conectado');
socket.on('messages', function(data) {
console.log(data);
PagedGridModel.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
ko.applyBindings(new PagedGridModel(registros2));
}
});
</script>
</body>
</html>
И мой server2.js (у меня нет проблем с этим):
var express = require('express');
var mysql = require('mysql');
var path = require('path');
var connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'rootadmin',
database: 'mecanizado'
})
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
//app.use("/cs", express.static(__dirname + 'client' + '/css'));
//app.use("/js", express.static(__dirname + 'client' + '/js'));
app.use(express.static(__dirname));
app.use(express.static(__dirname + 'js'));
app.use(express.static(__dirname + 'cs'));
app.route('/aplicacion').get(function(req,res){
console.log(__dirname + '/index2.html');
res.sendFile(__dirname + '/index2.html');
});
app.route('/resultado').get(function(req,res){
res.send("resultado1");
res.end();
});
app.route('/usuario').get(function(req,res){
res.json({'results': 'parametro'});
res.end();
});
app.route('/json').get(function(req,res){
//connection.connect();
//connection.query('SELECT * FROM mecanizado.isla1', function(err,rows,fields){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
res.json(rows);
});
//connection.end();
});
var server = app.listen(3000, function() {
console.log('Server started on port');
});
var io = require('socket.io').listen(server);
io.on('connection', function (socket) {
//socket.emit('messages', { hello: 'world' });
//setInterval(()=>socket.emit('messages','mensaje'),1000);
setInterval(()=>consulta(socket), 1000);
/* socket.on('my other event', function (data) {
console.log('cliente conectado');
//setInterval(socket.send('${new Date()}'), 1000);
setInterval(socket.emit('messages','mensaje'),1000);
}); */
});
function consulta (socket){
connection.query("SELECT DATE_FORMAT(fecha,'%Y-%m-%d') AS fecha, turno, h1,h2,h3,h4,h5,h6,h7,h8 FROM mecanizado.isla1 order by fecha desc, FIELD(turno,'mañana','tarde','noche') desc", function(err,rows,fields){
//res.json(rows);
console.log(rows);
socket.emit('messages',rows);
});
}