DevExtreme Data Grid, de DevExpress, es un potente Data Grid para JavaScript. Una de sus características son las actualizaciones parciales, que permiten actualizar un registro del grid sin recargar la página entera. Normalmente la actualización se recibe mediante el protocolo WebSocket.
La librería sgcWebSockets se puede usar con DevExtreme Data Grid, permitiendo actualizar el grid en tiempo real sin perder rendimiento.
Push API
DevExtreme usa una push API para actualizar el grid cuando llega una nueva modificación. El servidor pasa los datos a los clientes, normalmente usando el protocolo WebSocket, y después envía las modificaciones al grid.
store.push([{ type: "insert", data: data }]); // if a new object is created
store.push([{ type: "update", data: data, key: key }]); // if an existing object is changed
store.push([{ type: "remove", key: key }]); // if an object is removed
A continuación tienes un ejemplo de uso del protocolo Dataset de sgcWebSockets con la Push API de DevExtreme. Es un servidor WebSocket que proporciona cotizaciones de bolsa en tiempo real a todos los clientes conectados.
// ... create a new websocket connection using dataset protocol
var ws = new sgcws_dataset("ws://127.0.0.1:5413");
// ... when the client connects to websocket server
ws.on('open', function(evt){
// first request all quotes
ws.subscribe_all();
// create the grid configuration
$("#gridContainer").dxDataGrid({
dataSource: store,
showBorders: true,
repaintChangesOnly: true,
highlightChanges: true,
columns: [
{dataField: "Id"},
{dataField: "Symbol"},
{
dataField: "Open",
dataType: "number",
format: "#0.####"
},
{
dataField: "High",
dataType: "number",
format: "#0.####"
},
{
dataField: "Low",
dataType: "number",
format: "#0.####"
},
{
dataField: "Last",
dataType: "number",
format: "#0.####"
}]
});
});
// ... synchronization starts
ws.on('sgcbeforesynchronize', function(evt) {
vSync = true;
});
// ... synchronization ends
ws.on('sgcaftersynchronize', function(evt) {
vSync = false;
});
// ... record update is received
// ... create a new JSON object with stock data information
// ... call push method to update the grid
ws.on('sgcdataset', function(evt){
var id = evt.dataset["ID"];
var symbol = evt.dataset["NAME"];
var open = evt.dataset["OPEN"].replace(',', '.');
var high = evt.dataset["HIGH"].replace(',', '.');
var low = evt.dataset["LOW"].replace(',', '.');
var last = evt.dataset["LAST"].replace(',', '.');
var change = evt.dataset["CHANGE"].replace(',', '.');
var quote = JSON.parse("{\"Id\":" + id + ", \"Symbol\":\"" + symbol + "\", \"Open\": " + open + ", \"High\": " + high + ", \"Low\": " + low + ", \"Last\": " + last + ", \"Change\": " + change + "}");
if (vSync == true)
{
store.push([{ type: "insert", key: quote.Id, data: quote, index: -1 }]);
}
else
{
store.push([{ type: "update", key: quote.Id, data: quote}]);
}
});
A continuación tienes la demo compilada de DevExtreme Data Grid + sgcWebSockets para Windows.