DevExtreme 데이터 그리드 WebSocket 프로토콜

DevExpress의 DevExtreme 데이터 그리드는 강력한 JavaScript 데이터 그리드예요. 주요 기능 중 하나인 부분 업데이트를 통해 전체 페이지를 새로 고치지 않고 그리드의 레코드를 업데이트할 수 있어요. 업데이트는 보통 WebSocket 프로토콜을 통해 수신돼요.

sgcWebSockets 라이브러리를 DevExtreme 데이터 그리드와 함께 사용하면 성능 저하 없이 실시간으로 그리드를 업데이트할 수 있어요.

Push API

DevExtreme는 새로운 변경 사항이 수신될 때 Push API를 사용하여 그리드를 업데이트해요. 서버가 데이터를 클라이언트에 전달할 때(보통 WebSocket 프로토콜 사용) 그리드에 변경 사항을 푸시해요.

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 

아래는 DevExtreme Push API와 함께 sgcWebSockets Dataset 프로토콜을 사용하는 예시예요. 연결된 모든 클라이언트에 실시간 주식 시세를 제공하는 WebSocket 서버예요.

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

아래에서 Windows용으로 컴파일된 DevExtreme 데이터 그리드 + sgcWebSockets 데모를 확인할 수 있어요.