DevExtreme Data Grid, di DevExpress, è una potente Data Grid per JavaScript. Una delle sue funzionalità sono gli aggiornamenti parziali, che consentono di aggiornare un record della grid senza ricaricare l'intera pagina. Di solito l'aggiornamento viene ricevuto tramite il protocollo WebSocket.
La libreria sgcWebSockets può essere usata con DevExtreme Data Grid, permettendoti di aggiornare la grid in tempo reale senza perdere prestazioni.
Push API
DevExtreme usa un'API push per aggiornare la grid quando viene ricevuta una nuova modifica. Il server passa i dati ai client, di solito tramite il protocollo WebSocket, e poi propaga le modifiche alla 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
Di seguito un esempio di utilizzo del protocollo Dataset di sgcWebSockets con l'API push di DevExtreme. È un server WebSocket che fornisce quotazioni azionarie in tempo reale a tutti i client connessi.
// ... 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}]);
}
});
Di seguito la demo compilata DevExtreme Data Grid + sgcWebSockets per Windows.