DevExtreme Data Grid von DevExpress ist ein leistungsstarkes Data Grid für JavaScript. Eine seiner Funktionen sind partielle Updates, mit denen sich ein Datensatz im Grid aktualisieren lässt, ohne die gesamte Seite neu zu laden. Üblicherweise wird das Update über das WebSocket-Protokoll empfangen.
Die sgcWebSockets-Bibliothek lässt sich mit dem DevExtreme Data Grid kombinieren, sodass du das Grid in Echtzeit ohne Leistungseinbußen aktualisieren kannst.
Push-API
DevExtreme nutzt eine Push-API, um das Grid bei neuen Änderungen zu aktualisieren. Der Server reicht die Daten an die Clients weiter, üblicherweise über das WebSocket-Protokoll, und schickt die Änderungen anschließend ins 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
Unten ein Beispiel für die Verwendung des sgcWebSockets-Dataset-Protokolls mit der DevExtreme-Push-API. Es zeigt einen WebSocket-Server, der allen verbundenen Clients Echtzeit-Aktienkurse liefert.
// ... 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}]);
}
});
Unten findest du die kompilierte DevExtreme Data Grid + sgcWebSockets-Demo für Windows.