From a45f36de2b9f8435002db6eb10e397b625dda0b5 Mon Sep 17 00:00:00 2001
From: Bob Plugge <bob@itnm.nl>
Date: Mon, 20 Apr 2015 10:39:41 +0200
Subject: [PATCH] Changes made so the websocket proxy can work with buffered
 stores. Including update of demo and server. You may notice a websocket bug
 where data is not showed. It is fixed by Putting the following line in the
 ext.ux.websocket constructor: this.messageQueue = [];

---
 WebSocket.js   | 38 +++++++++++++++++++++++++++++++++-----
 demo/demo.js   | 42 ++++++++++++++++++++++++++++++++++++++++++
 demo/server.js | 18 ++++++++++++++++++
 3 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/WebSocket.js b/WebSocket.js
index 71920dd..408d2e4 100644
--- a/WebSocket.js
+++ b/WebSocket.js
@@ -188,7 +188,12 @@ Ext.define('Ext.ux.data.proxy.WebSocket', {
         /**
          * @cfg {Boolean} keepUnsentMessages Keep unsent messages and try to send them back after the connection is open again.
          */
-        keepUnsentMessages: true
+        keepUnsentMessages: true,
+        
+        /**
+         * Callback counter for buffered stores.
+         */
+        callbackCounter: 1
     },
 
     /**
@@ -441,6 +446,9 @@ Ext.define('Ext.ux.data.proxy.WebSocket', {
      */
     read: function (operation) {
         this.runTask(this.getApi().read, operation);
+        
+        // return value required for buffered store.
+        return 1;
     },
 
     /**
@@ -472,10 +480,18 @@ Ext.define('Ext.ux.data.proxy.WebSocket', {
         var me = this ,
             data = {} ,
             ws = me.getWebsocket() ,
-            i = 0;
+            i = 0, callback;
+
+        // buffered store.
+		if (operation._limit){
+	    	callback = action + "_" + this.callbackCounter;
+	    	this.callbackCounter ++;    
+		} else {
+		    callback = action;
+		}
 
         // Callbacks store
-        me.callbacks[action] = {
+        me.callbacks[callback] = {
             operation: operation
         };
 
@@ -487,6 +503,10 @@ Ext.define('Ext.ux.data.proxy.WebSocket', {
 
             // copy any sorters, filters etc into the params so they can be sent over the wire
             Ext.applyIf(data, me.getParams(operation));
+            
+            // Copy read operation callback name to match.
+            if (operation._limit)
+	            Ext.apply(data, {"callback": callback});
         }
         // Create, Update, Destroy
         else {
@@ -508,12 +528,20 @@ Ext.define('Ext.ux.data.proxy.WebSocket', {
      * Completes a pending operation (push/pull)
      * @private
      */
-    completeTask: function (action, event, data) {
+    completeTask: function (action, e, data) {
         var me = this ,
+        	event,
             resultSet = me.getReader().read(data);
 
+        // Data for buffered stores should have a callback parameter matching the request because the buffered store can do multiple reads at the same time.
+        if (data.callback){
+            event = data.callback;
+        } else {
+            event = e;
+        }
+
         // Server push case: the store is get up-to-date with the incoming data
-        if (!me.callbacks[event]) {
+        if (!data.callback || !me.callbacks[event]){
             var store = Ext.StoreManager.lookup(me.getStoreId());
 
             if (typeof store === 'undefined') {
diff --git a/demo/demo.js b/demo/demo.js
index 9783dd2..c709097 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -172,4 +172,46 @@ Ext.onReady(function () {
         height: 300,
         store: treeStore
     });
+
+    var bufferedStore = Ext.create('Ext.data.Store',{
+        storeId: 'myBufferedStore',
+        autoLoad: true,
+        buffered: true,
+        pageSize: 50,
+        loadingBufferZone: 150,
+        trailingBufferZone: 150,
+        remoteSort: true,
+        remoteFilter: true,
+        fields:['id','name'],
+        proxy: {
+            type: 'websocket',
+            url: 'ws://localhost:9001',
+            storeId: 'myBufferedStore',
+            api: {
+                read: 'buffered/read'
+            },
+            reader: {
+                type: 'json',
+                rootProperty: 'data',
+                totalProperty: 'totalCount'
+            }
+        }
+    });
+
+    var bufferedGrid = Ext.create('Ext.grid.GridPanel',{
+        renderTo: Ext.getBody(),
+        store: bufferedStore,
+        title: 'WebSocketed Infinite Scrolling',
+        width: 500,
+        height: 300,
+        columns: [{
+           dataIndex: 'name',
+           header: 'name',
+           flex: 1
+        }],
+        viewConfig: {
+            loadMask: false,
+            reserveScrollbar: true
+        }
+    });
 });
diff --git a/demo/server.js b/demo/server.js
index 31e0b59..56d7779 100644
--- a/demo/server.js
+++ b/demo/server.js
@@ -98,6 +98,24 @@ wss.on('connection', function (ws) {
                 }
             }));
         }
+        else if (event === 'buffered/read'){
+            var dat = [];
+            for (var t=0; t<message.data.limit; t++){
+                dat.push({
+                    id: Faker.Helpers.randomNumber(1000000),
+                    name: Faker.Name.firstName() + " " + Faker.Name.lastName()
+                });
+            }
+            ws.send(JSON.stringify({
+                event: event,
+                data: {
+                    callback: message.data.callback,
+                    data: dat,
+                    totalCount: "10000",
+                    success: true
+                }
+            }));
+        }
         else if (event === 'update') {
             message.data.forEach(function (user) {
                 var index = -1;