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
Ext.ux.WebSocket
Originally Posted by harrydeluxe
Looks promising.
Reply With Quote
