1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      1  

    Default Ext.ux.WebSocket

    Ext.ux.WebSocket


    Hi there!
    Today I wanted to have a WebSocket interface in ExtJS 4.1.1.
    Considering that I haven't found anything on the web and in the documentation. So, I created this extension for people who want to use the HTML5 WebSocket with ExtJS.

    Ext.ux.WebSocket + Ext.ux.WebSocketManager
    ExtJS-WebSocket.png

    What tar (zip) file contains:
    - ux: directory of the websocket extension
    - index.html and test.js: client-side tester
    - server: server-side tester (python + tornado)
    - README: easy how-to run the test and other interesting stuff

    *** UPDATE ***

    Well, yesterday evening I was really tired so I didn't write any useful guidelines on this post.
    Ok, let's do it now!

    How this extension works?

    There are two classes:
    - Ext.ux.WebSocket
    - Ext.ux.WebSocketManager

    The first one provide a wrapper for the HTML5 WebSocket object and it allows you to do different types of communications:
    - pure text: the client send and receive text-only messages
    - pure event-driven: the client send and receive a pair of string/object ({String} event, {String/Object} data). In this case, you can drive your application through the event that has to be fired by the websocket.
    - mixed: both text and event-driven communication

    Pure text communication
    Code:
        var websocket = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8888' ,
            listeners: {
                open: function (ws) {
                    console.log ('The websocket is ready to use');
                    ws.send ('This is a simple text');
                } ,
                close: function (ws) {
                    console.log ('The websocket is closed!');
                } ,
                error: function (ws, error) {
                    Ext.Error.raise (error);
                } ,
                message: function (ws, message) {
                    console.log ('A new message is arrived: ' + message);
                }
            }
        });
    Pure event-driven communication (similar to socket.io)
    Code:
        var websocket = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8888' ,
            listeners: {
                open: function (ws) {
                    console.log ('The websocket is ready to use');
                    ws.send ('init', 'This is a simple text');
                    ws.send ('and continue', {
                        'my': 'data' ,
                        'your': 'data'
                    });
                } ,
                close: function (ws) {
                    console.log ('The websocket is closed!');
                }
            }
        });
    
        // A 'stop' event is sent from the server
        // 'data' has 'cmd' and 'msg' fields
        websocket.on ('stop', function (data) {
            console.log ('Command: ' + data.cmd);
            console.log ('Message: ' + data.msg);
        });
    Mixed communcation
    Code:
        var websocket = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8888' ,
            listeners: {
                open: function (ws) {
                    console.log ('The websocket is ready to use');
                    ws.send ('This is only-text message');
                    ws.send ('init', 'This is a simple text');
                    ws.send ('and continue', {
                        'my': 'data' ,
                        'your': 'data'
                    });
                } ,
                close: function (ws) {
                    console.log ('The websocket is closed!');
                } ,
                message: function (ws, message) {
                    console.log ('Text-only message arrived is: ' + message);
                }
            }
        });
    
        // A 'stop' event is sent from the server
        // 'data' has 'cmd' and 'msg' fields
        websocket.on ('stop', function (data) {
            console.log ('Command: ' + data.cmd);
            console.log ('Message: ' + data.msg);
        });
    While the second class (Ext.ux.WebSocketManager) allows to manage registered websockets and it provides useful functions, like broadcasting messages!

    Here an example:
    Code:
        var ws1 = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8888'
        });
    
        Ext.ux.WebSocketManager.register (ws1);
    
        var ws2 = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8900'
        });
    
        Ext.ux.WebSocketManager.register (ws2);
    
        var ws3 = Ext.create ('Ext.ux.WebSocket', {
            url: 'http://localhost:8950'
        });
    
        Ext.ux.WebSocketManager.register (ws3);
    
        Ext.ux.WebSocketManager.broadcast ('system shutdown', 'BROADCAST: the system will shutdown in few minutes.');
    
        Ext.ux.WebSocketManager.closeAll ();
    
        Ext.ux.WebSocketManager.unregister (ws1);
        Ext.ux.WebSocketManager.unregister (ws2);
        Ext.ux.WebSocketManager.unregister (ws3);
    These example are on the documentation and you can get it with jsduck:

    Code:
      $ jsduck ux --output docs
    Read the README file to test this extension.

    That's all for now. Hope you find it funny and useful

    Fork ExtJS-WebSocket on github: https://github.com/wilk/ExtJS-WebSocket


    Any suggestions accepted!

    Ciao!

    Wilk
    Last edited by Wilky; 19 Jul 2012 at 3:04 AM. Reason: improved explanation and added examples, fixed and improved grammar and syntax

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Ok, I just added some useful examples

  3. #3
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    N├╝rnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    Looks promising.

    test.js Line: 38
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Hi hope!
    I took socket.io as reference and I redesigned it for ExtJS
    I think this extension could be improved: so, if there are any requested features to implement, just tell me

    Cyaz

    Wilk

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Quote Originally Posted by harrydeluxe View Post
    Looks promising.

    test.js Line: 38
    Haha, yes and why not test.js Line: 73 ?
    No problem, the server app only echos messages

    Anyway, I'm going to change those lines :P

    Cyaz

    Wilk

  6. #6
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Hey guys!
    I improved the extension and you can see recent developings right here on github
    I also uploaded the documentation made with jsduck on my web site

    Hope you like it

    And don't forget: if you have any suggestions, just tell me!

    Ciao

    Wilk

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    reidmeonce is on a distinguished road

      0  

    Default node.js

    node.js


    Is this WebSocket extension work with node.JS ?
    I found the URL for websocket usually start with "WS://...."
    why does this extension use

  8. #8
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Quote Originally Posted by reidmeonce View Post
    Is this WebSocket extension work with node.JS ?
    I found the URL for websocket usually start with "WS://...."
    why does this extension use
    Hi reidmeonce,
    I don't know if it can work with socket.io.... I'll give it a check and I'll tell you if it's possible or not

    About the schema (HTTP insted of WS), I forgot to edit this thread but you can find updater version of ExtJS WebSocket on github: http://github.com/wilk/ExtJS-WebSocket

    Hope this helped you!

  9. #9
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    72
    Vote Rating
    7
    Wilky is on a distinguished road

      0  

    Default


    Unfortunately, you can't bind ExtJS-WebSocket with socket.io. Maybe, in future versions you will, but not for now.

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    15
    Vote Rating
    10
    jylaxx will become famous soon enough

      0  

    Default


    Hi,I just found your work which could be very interesting for me...Before more investigation, just one question about secure websocket. Can we use your implementation with wss protocol ?Thanks