Ext.ux.data.proxy.WebSocket is among us!

[Wilky]

Hi ExtJSers!

Finally, I made it!

After two evenings of hard work, I'm proud to present you Ext.ux.data.proxy.WebSocket: http://wilk.github.io/Ext.ux.data.proxy.WebSocket/

Yeah, great, fantastic but.... what is that??
Did you remember Ext.ux.WebSocket? (http://wilk.github.io/ExtJS-WebSocket/)
Well, I made an extension to integrate easily HTML5 WebSockets with ExtJS grids and charts and every component that uses Ext.data.Store!!

It automagically communicates with the server, using CRUD operation through the sync/load store actions.

Here's a brief example:

var store = Ext.create ('Ext.data.Store', {
  fields: ['id', 'name', 'age'] ,
  storeId: 'myStore',
  proxy: {
    type: 'websocket',
    url: 'ws://localhost:8888',
    reader: {
      type: 'json',
      root: 'user'
    }
  }
});

var grid = Ext.create ('Ext.grid.Panel', {
  title: 'My Grid',
  width: 500,
  height: 300,
  store: store,
  columns: [{
    dataIndex: 'name',
    text: 'Name'
  }, {
    dataIndex: 'age',
    text: 'Age'
  }]
});

store.load(); // a read operation is sent to the server
...
store.sync ({ // commit updates by sending 'create' or 'update' or 'destroy' operation to the server
  success: function () {
    store.load (); // and then refresh the grid
  }
});

See other examples on the github page, clone the repo and try out the demo (I suggest you to open two browsers and see the magic in action!), star and fork the project, and if you like it, make the documentation with jsduck

Sencha Market: https://market.sencha.com/extensions...roxy-websocket

Cheers!!
Wilk

[Sesshomurai]

This is marvelous!

Will it work with websocket backends like socket.io?

Does this mean, the store will continually update its data as messages arrive over websocket?

Very cool indeed.

Question. How does this compare to Ext Direct?

[Wilky]

Thank you so much! Congratulations, questions and constructive criticism are welcome

Well, it doesn't work with socket.io because it's a particular backend.
However, it works great with other backends, like Tornado (Python): https://github.com/wilk/Ext.ux.data.proxy.WebSocket/blob/master/demo/server.py

Yes, the store is continually update by the proxy by intercepting new data incoming from server (push technology).

Honestly, I didn't think to Ext.Direct, so I don't know if you can integrate with it.
I'll give it a look!

Ciao!
Wilk

This is marvelous!

Will it work with websocket backends like socket.io?

Does this mean, the store will continually update its data as messages arrive over websocket?

Very cool indeed.

Question. How does this compare to Ext Direct?

[slemmon]

Thanks for sharing!

[Wilky]

Now available on Sencha Market: https://market.sencha.com/extensions...roxy-websocket

Wilk

[kreativ-software]

Nice. Tx for the work!
A Socket.IO version would be awesome.

[Wilky]

Nice. Tx for the work!
A Socket.IO version would be awesome.

Thank you!
I'll try to make ExtJS-WebSocket (the websocket wrapper behind Ext.ux.data.proxy.WebSocket) compatible with socket.io

[kreativ-software]

That would be great!!
I don't like the gridplugins method.
Implement it in the store is the best thing to do.
I'm thinking about making a Ext.Direct Socket.IO implementation myself, or are there any implementations already?

[Wilky]

That would be great!!
I don't like the gridplugins method.
Implement it in the store is the best thing to do.
I'm thinking about making a Ext.Direct Socket.IO implementation myself, or are there any implementations already?

I don't know if exists an implementation of Ext.Direct + Socket.io.
However, there's extjs-socketio: https://github.com/softwarezman/extjs-socketio
I think I will give it a look to make ExtJS-WebSocket working with socketio

Cheers!
Wilk

[elgs]

Hi @wilky, thanks for your great contribution!

I have a question regarding the server side when I am trying to play with your WebSocket ux. I saw a server.py from the source repository. As I don't have much knowledge about python, I'm planning to write my server program using Java. I tried to understand the server.py, and here's my understanding, would you please confirm or correct me:
1, What the server.py does is to echo whatever it received to all connected/registered clients?
2, server.py does not contain any special logic that could be a dependency for the clients?

I think if the answer to the first question would be yes, then automatically the answer to the second question would be yes.

Would you please help to confirm or correct me? Thanks.