socket.io with ExtJS and socket.io-client

Question

This should be pretty trivial but for whatever reason, I'm having a little trouble connecting ExtJS4 to a socket.io/node.js service (using latest versions from npm and node 0.6.3). I'm trying to send a message to my server. It handshakes but it never gets in the message block. I'm using "emit" to send it from socket.io-client but no luck. Any idea what I'm doing wrong?

I have all my code (forked from Nils Dehl excellent example) and debug out from the server as follows...

I have this code as my server.js:

var http = require('http'),
           sys  = require('util'),
           fs   = require('fs'),
           io   = require('socket.io');
var Connect = require('connect');

var server = Connect.createServer(
        Connect.logger(), // Log responses to the terminal using Common Log Format.
        Connect.staticCache(), // Add a short-term ram-cache to improve performance.
        Connect.profiler(), 
        Connect.favicon(),
        Connect.static(__dirname + "/public") // Serve all static files in the current dir.
);
var sockets = io.listen(server);
server.listen(4000);

sockets.on('connection', function(socket) {
console.log("Receiving msg...");
        var user;

        socket.on('message', function(message) {
                if (!user) {
                        user = message;
                        socket.send({ message: 'Welcome, ' + user.nickname + '!', nickname: 'server', gravatar: '' });
                        return;
                }
                var response = {
                        'nickname': user.nickname,
                        'gravatar': user.gravatar,
                        'message': message.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
                };
                sockets.emit(response);
        });

});

Then on the client side I'm using ExtJS and socket.io-client to send the message. My interface in ExtJS looks like this to call into socket-io.client:

App.util.Socketio = Ext.extend(Ext.util.Observable, { 
        constructor: function(options){ 
                options = options || {}; 
                App.util.Socketio.superclass.constructor.call( 
                        this 
                ); 
                this.socket = new io.Socket(options); 
                var that = this; 
                this.socket.on('connect', function(){ 
                        that.onConnect(); 
                }); 
                this.socket.on('message', function(data){ 
                        that.onMessage(data); 
                }); 
                this.socket.on('close', function(){ 
                        that.onClose(); 
                }); 
                this.socket.on('disconnect', function(){ 
                        that.onDisconnect(); 
                }); 
        }, 
        connect: function() { 
                this.socket.connect(); 
        }, 
        disconnect: function(){ 
                this.socket.disconnect(); 
        }, 
        send: function(message) { 
                this.socket.emit(message); 
        }, 
        onConnect: function() { 
                this.fireEvent('connect'); 
        }, 
        onDisconnect: function() { 
                this.fireEvent('disconnect'); 
        }, 
        onClose: function() { 
                this.fireEvent('close'); 
        }, 
        onMessage: function(message) { 
                this.fireEvent('message', message); 
        } 
}); 

This is what I see for output:

info  - socket.io started 
   debug - client authorized 
   info  - handshake authorized 16300591002012036186 
   debug - client authorized 
   info  - handshake authorized 4532571941614163017 
   debug - setting request GET /socket.io/1/websocket/ 
16300591002012036186 
   debug - set heartbeat interval for client 16300591002012036186 
   debug - client authorized for 
   debug - websocket writing 1:: 
   debug - setting request GET /socket.io/1/websocket/ 
4532571941614163017 
   debug - set heartbeat interval for client 4532571941614163017 
   debug - client authorized for 
   debug - websocket writing 1:: 
   debug - emitting heartbeat for client 16300591002012036186 
   debug - websocket writing 2:: 
   debug - set heartbeat timeout for client 16300591002012036186 
   debug - emitting heartbeat for client 4532571941614163017 
   debug - websocket writing 2:: 
   debug - set heartbeat timeout for client 4532571941614163017 
   debug - got heartbeat packet 
   debug - cleared heartbeat timeout for client 16300591002012036186 
   debug - set heartbeat interval for client 16300591002012036186 
   debug - fired heartbeat timeout for client 4532571941614163017 
   info  - transport end 
   debug - set close timeout for client 4532571941614163017 
   debug - cleared close timeout for client 4532571941614163017 
   debug - discarding transport 

Answer 1

Two things

1. Instead of socket.send({ message: 'Welcome, ' + user.nickname + '!', nickname: 'server', gravatar: '' }) change that to socket.emit(hello, { message: 'Welcome, ' + user.nickname + '!', nickname: 'server', gravatar: '' }. You should use emit for sending JSON

   Example - https://github.com/parj/node-websocket-demo/blob/socket_emit/server.js

2. For socket.emit you need use a custom event - sockets.emit('response', response);

On the client side for

1. With reference to - socket.emit(hello, { message: 'Welcome, ' + user.nickname + '!', nickname: 'server', gravatar: '' }

   socket.on('hello', function (data) {
      $('#message').text("Received - " + data.message);
    });
   

2. With reference to - sockets.emit('response', response);

   socket.on('resonse', function (data) {
      $('#message').text("Received - " + data.response);
    });
   

socket.send is just for sending a string - Example socket.send("Hello");

For a full working example on socket.send see - https://github.com/parj/node-websocket-demo For socket.emit see - https://github.com/parj/node-websocket-demo/tree/socket_emit/public