1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Italy
    Posts
    71
    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
    71
    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
    71
    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
    71
    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
    71
    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
    71
    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
    71
    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
    9
    Vote Rating
    0
    jylaxx is on a distinguished road

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar