DevExtreme Datagrid WebSocket Protocol

DevExpress'in DevExtreme Data Grid bileşeni, JavaScript için güçlü bir Data Grid'dir. Özelliklerinden biri, tüm sayfayı güncellemeden bir grid kaydını güncellemeye olanak tanıyan kısmi güncellemelerdir. Genellikle güncelleme WebSocket protokolü kullanılarak alınır.

sgcWebSockets kütüphanesi, DevExtreme Data Grid ile birlikte kullanılabilir ve performans kaybı olmadan Grid'i Gerçek Zamanlı güncellemeye olanak tanır.

Push API 

DevExtreme, yeni bir değişiklik alındığında Grid'i güncellemek için bir push API'si kullanır. Sunucu, verileri istemcilere genellikle WebSocket protokolünü kullanarak iletir ve ardından değişiklikleri grid'e gönderir (push).

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şağıda, sgcWebSockets Dataset Protokolünün DevExtreme Push API'si ile kullanımına dair bir örnek bulunmaktadır. Bu, bağlı tüm İstemcilere Gerçek Zamanlı Hisse Senedi Fiyatları sağlayan bir WebSocket sunucusudur.

    // ... 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}]);
	  }
	});	 

Derlenmiş DevExtreme Data Grid + sgcWebSockets Windows demosunu aşağıda bulabilirsiniz.