Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 32

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

  1. #11
    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

  2. #12
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    195

    Default

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

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

    Default

    Thanks

  4. #14
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    195

    Default

    Hi @wilky, I got the WebSocket to work in my environment now. It's really awesome. However, I have a few questions:

    1, if the WebSocket.js and WebSocketManager.js are in the ux folder, seems I need to change the demo.js from
    Code:
    Ext.Loader.setConfig ({
        enabled: true
    });
    to
    Code:
    Ext.Loader.setConfig ({
        enabled: true,
        paths:{
            'Ext.ux': './ux'
        }
    });
    2, In the documentation generated by jsduck, You mentioned a stop event:
    Code:
    // 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);
    });
    However, I didn't see the stop event anywhere in the ux source code.

    3, For the function receiveEventMessage from WebSocket.js:
    Code:
    receiveEventMessage: function (message) {
            var me = this;
            
            try {
                var msg = Ext.JSON.decode (message.data);
                me.fireEvent (msg.event, me, msg.data);
                me.fireEvent ('message', me, msg);
            }
            catch (err) {
                Ext.Error.raise (err);
            }
        }
    As there's no example calling this function, I have no idea how the argument message will be constructed. From the source code, it seems like the message should look something like this:
    Code:
    {
        'data' : {
            'event' : 'some_event',
            'data' : 'some_data'
        }
    }
    Is it correct? If this is the case, who is responsible to construct this message structure?

    Thanks,
    Elgs

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

    Default

    Quote Originally Posted by elgs View Post
    Hi @wilky, I got the WebSocket to work in my environment now. It's really awesome. However, I have a few questions:
    Hi elgs!
    First of all, I'm really happy to know that you're using my extension! So, thank you

    Quote Originally Posted by elgs View Post
    1, if the WebSocket.js and WebSocketManager.js are in the ux folder, seems I need to change the demo.js from
    Code:
    Ext.Loader.setConfig ({
        enabled: true
    });
    to
    Code:
    Ext.Loader.setConfig ({
        enabled: true,
        paths:{
            'Ext.ux': './ux'
        }
    });
    Thank you so much!
    When I added CDN sources, I forgot to setup the Loader correctly: it works good now with your correction

    Quote Originally Posted by elgs View Post
    2, In the documentation generated by jsduck, You mentioned a stop event:
    Code:
    // 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);
    });
    However, I didn't see the stop event anywhere in the ux source code.
    Yes, but the 'stop' event doesn't belong to Ext.ux.WebSocket: it's a message sent by the server and fired up by the extension. Actually, messages are treated as events, so you can setup a single handler for each message incoming from the server and/or setup a generic handler for every message by listening on the 'message' event.

    Quote Originally Posted by elgs View Post
    3, For the function receiveEventMessage from WebSocket.js:
    Code:
    receiveEventMessage: function (message) {
            var me = this;
            
            try {
                var msg = Ext.JSON.decode (message.data);
                me.fireEvent (msg.event, me, msg.data);
                me.fireEvent ('message', me, msg);
            }
            catch (err) {
                Ext.Error.raise (err);
            }
        }
    As there's no example calling this function, I have no idea how the argument message will be constructed. From the source code, it seems like the message should look something like this:
    Code:
    {
        'data' : {
            'event' : 'some_event',
            'data' : 'some_data'
        }
    }
    Is it correct? If this is the case, who is responsible to construct this message structure?
    Pay attention: receiveEventMessage, receiveTextMessage, receiveBothMessage, sendEventMessage, sendTextMessage and sendBothMessage are private methods and they are used internally by the class, so do not use them directly!
    You can send messages via 'send' method in two different ways:

    as text:
    Code:
    ws.send ('I love Javascript');
    as event:
    Code:
    ws.send ('love message', {
      subject: 'I',
      action: 'love Javascript'
    });
    And then you can use both ways together.
    What does the server receive?

    In the first case (pure-text communication), just a string:

    Code:
    def on_message (self, message):
      print 'Client says: ' + message
    While, in the second case (event-driven communication), a JSON encoded object:

    Code:
    def on_message (self, message):
      event = message['event']
      data = message['data']
      print 'Client has sent an event: ' + event
      print data['subject'] + ' ' + data['action']
    Quote Originally Posted by elgs View Post
    Thanks,
    Elgs
    I hope this explanation will help you with your work

    Ciao!
    Wilk

  6. #16
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    195

    Default

    Thanks @Wilky, your explanations make sense to me and have answered my questions. I really appreciate that you implemented the event model on the client side.

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

    Default

    Update for Ext.ux.WebSocket and Ext.ux.data.proxy.WebSocket:

    I've added the auto re-connect behaviour to my WebSocket extensions. Now, when the server closes the connection and open it back again, Ext.ux.WebSocket re-estabilish the connection automagically: with this behaviour, the user doesn't realize if the connection has been lost for a while.

    It can be configured via autoReconnect ((default)true|false) and autoReconnectInterval (int (default 5000ms)) properties.

    Ciao!
    Wilk

  8. #18
    Sencha User
    Join Date
    Oct 2012
    Posts
    6

    Default Error: Uncaught Ext.ux.WebSocket.receiveEventMessage(): (No description provided)

    I'm trying to use this extension. The browser receives data from my socket server.
    However, when this happens, an error 'Uncaught Ext.ux.WebSocket.receiveEventMessage(): (No description provided)' is thrown.


    On debugging I find that this error is thrown at the line 'eventName = eventName.toLowerCase();' in the fireEvet function of the ext-all-debug.js:


    Code:
    ireEvent: function(eventName) {
            eventName = eventName.toLowerCase(); // Error occurs here
            var me = this,
                events = me.events,
                event = events && events[eventName],
                ret = true;
                ...
    },
    At this point, both the values of 'event' and 'eventName' are 'undefined'.

    Now, my model definition is:

    Code:
    Ext.define('ExtMVC.model.Stock', {
        extend: 'Ext.data.Model',
        
        proxy: {
            type: 'websocket',
            storeId: 'StatsWebSocket',
            url: 'ws://localhost:8087/ws',
            reader: {
                type: 'json',
                root: 'data'
            }
        },
        
        fields: [
            { name: 'fileName' },
            { name: 'fileTypeCode' },
            ...
        ]
    });
    And my store as:


    Code:
    var statsStore = Ext.create('Ext.data.Store', {
        model: 'ExtMVC.model.Stock',
        storeId: 'StatsWebSocket'
    });
    And finally, my grid:


    Code:
    Ext.define('ExtMVC.view.portlet.GridPortlet', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.gridportlet',
        
        
        autoHeight: true,
        minHeight: 400,
        title: '',
    
    
        initComponent: function(){
            
            this.id = 'gridportlet_id';
            
            this.columns = [
                {
                id: 'fileName',
                text: 'Original File Name',
                flex: 2,
                sortable: true,
                dataIndex: 'fileName'
                },
                {
                text: 'File Type Code',
                flex: 1,
                width: 75,
                sortable: true,
                dataIndex: 'fileTypeCode'
                }
                ...
            ]
            
            this.callParent(arguments);
        }
    });
    I instantiate this in the portlet container as:


    Code:
    var statsGrid = Ext.create('ExtMVC.view.portlet.GridPortlet', {
        store: statsStore 
    });
    The data is actually received on the browser, but somehow, it doesn't end up in my grid. Any idea what I may be doing wroing?
    Last edited by okello; 1 May 2013 at 10:52 PM. Reason: Adding more information.

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

    Default

    Hi okello and thanks for use my extension!

    Can you tell me what kind of data does your server send?
    By default, Ext.ux.data.proxy.WebSocket works with CRUD API, so every call have the following structure:

    Code:
      {event: 'CRUD_action', data: [{id: 'first_record_id', ...}]}
    and it expects to receive the same structure from the server.

    Now, I think the problem here is that your server sends data with a different structure, so make sure that it sends data as follows:

    Code:
      {event: 'create', data: [{id: 'first_record_id', ...}]}
      {event: 'read', data: [{id: 'first_record_id', ...}]}
      {event: 'update', data: [{id: 'first_record_id', ...}]}
      {event: 'destroy', data: [{id: 'first_record_id', ...}]}
    If you don't like these events, customize them through 'api' property of Ext.ux.data.proxy.WebSocket, like this:

    Code:
      {
         type: 'websocket',
         url: 'ws://localhost:8087/ws',
         api: {
           create: 'makeUser',
           read: 'getUser',
           update: 'changeUser',
           destroy: 'removeUser'
         },
         ....
      }
    Cheers!
    Wilk

  10. #20
    Sencha User
    Join Date
    Oct 2012
    Posts
    6

    Default

    Thanks @Wilky. The issue was with the structure of my JSON. I was just returning JSON data without adhering to the structure you've described. Having altered my JSON data to conform to this structure has sorted out my issue. Thanks.

Page 2 of 4 FirstFirst 1234 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
  •