Page 1 of 3 123 LastLast
Results 1 to 10 of 32

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    74

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

    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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Posts
    294

    Default

    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?

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    74

    Default

    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

    Quote Originally Posted by Sesshomurai View Post
    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?

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Thanks for sharing!

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    74

    Default

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

    Wilk

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Location
    Hengelo, The Netherlands
    Posts
    6

    Default

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

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    195

    Default

    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.

  8. #8
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    74

    Default

    Yeah, you're right!

    server.py does two things: 1) registers websockets; 2) catches and broadcasts back every incoming messages with their data. That's all.
    You can see the communication between client and server as a protocol via websockets, which is the only dependency both for the clients and the server =)

    For any further doubt, fell free to ask me about this extension

    Ciao!
    Wilk

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    195

    Default

    Thank you @wilky. I like this very elegant design.

  10. #10
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    74

    Default

    Thanks

Page 1 of 3 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •