DevExtreme Data Grid van DevExpress is een krachtige Data Grid voor JavaScript. Een van de functies is partial updates, waarmee een record van een grid kan worden bijgewerkt zonder de hele pagina te verversen. Meestal wordt de update ontvangen via het WebSocket-protocol.
De sgcWebSockets-bibliotheek kan worden gebruikt met DevExtreme Data Grid, waardoor het grid in realtime kan worden bijgewerkt zonder prestatieverlies.
Push API
DevExtreme gebruikt een push-API om het grid bij te werken wanneer er een nieuwe wijziging binnenkomt. De server geeft de data door aan de clients, meestal via het WebSocket-protocol, en pusht vervolgens de wijzigingen naar het 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
Hieronder een voorbeeld van het gebruik van het sgcWebSockets Dataset-protocol met de DevExtreme push-API. Het is een WebSocket-server die realtime-koersen levert aan alle verbonden clients.
// ... 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}]);
}
});
Hieronder vind je de gecompileerde DevExtreme Data Grid + sgcWebSockets-demo voor Windows.