Express.js/socket.io/knockout.js simpleGrid更新通过socket.io
Express.js/socket.io/knockout.js simpleGrid update throught socket.io
我正在使用 express/socket.io/knockout.js 开发一个应用程序，这是我第一次使用 knockout.js，确切地说，我正在使用来自 knockout live example 的 simpleGrid example ，但是，与我从 server.js 中的套接字获得 JSON 不同，我对此没有问题，我从服务器获得 json 到客户端应用程序，但我是无法 refresh/update 简单网格与 json 恢复。第一次通过 ajax 调用填充网格，但没有使用 socket.io 进行更新，我可以使用来自服务器 .emit.
的 console.log json 数据进行记录
干杯，
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);
});
}
我们需要访问您用于在 HTML 上应用绑定的实际实例。只有这样我们才能修改值。为此，我们需要将实例保存在一个变量中。我是这样做的：window.vm = new PagedGridModel(registros2);
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
window.vm = new PagedGridModel(registros2);
ko.applyBindings(window.vm);
},
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);
window.vm.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
//ko.applyBindings(new PagedGridModel(registros2));
}
});
我正在使用 express/socket.io/knockout.js 开发一个应用程序，这是我第一次使用 knockout.js，确切地说，我正在使用来自 knockout live example 的 simpleGrid example ，但是，与我从 server.js 中的套接字获得 JSON 不同，我对此没有问题，我从服务器获得 json 到客户端应用程序，但我是无法 refresh/update 简单网格与 json 恢复。第一次通过 ajax 调用填充网格，但没有使用 socket.io 进行更新，我可以使用来自服务器 .emit.
的 console.log json 数据进行记录干杯， 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);
});
}
我们需要访问您用于在 HTML 上应用绑定的实际实例。只有这样我们才能修改值。为此，我们需要将实例保存在一个变量中。我是这样做的：window.vm = new PagedGridModel(registros2);
$.ajax({
url:"http://localhost:3000/json",
type: "get",
success: function(data){
registros = JSON.stringify(data);
registros2 = data;
//console.log(registros);
//console.log(registros2);
window.vm = new PagedGridModel(registros2);
ko.applyBindings(window.vm);
},
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);
window.vm.items(data);
if(typeof registro2 != "undefined" && array != null && array.length != null && array.length > 0){
registros2=data;
//ko.applyBindings(new PagedGridModel(registros2));
}
});