Extending TCP/UDP-based protocols to the browser by using WebSocket

WebSocket is a bi-directional AND full-duplex communication STANDARD to build next generations web applications. The WebSocket Protocol and its client APIs are getting more and more to their final state. You could say it is “TCP for the web”.

However WebSocket is NOT:

  • just a better Ajax or XHR, nor was it designed to be!
  • designed to be a one-size-fits-all replacement for HTTP!

When you build typical client-server applications you are using higher level protocols and APIs, such as XMPP, JMS or JDBC instead of raw TCP socket. You should think of WebSocket the same way! Instead of exchanging raw WebSocket data between the browser and the server (and introducing your own “protocol”), but you should use WebSocket to run these high level protocols on top of it! In fact the Kaazing WebSocket Gateway allows you to do this!

Here is an example that shows how to extend a (NodeJS-based) UDP program to the browser, by using the Kaazing WebSocket gateway.

Getting ready with NodeJS and the Kaazing gateway

  1. Download the Kaazing WebSocket Gateway (HTML5 Edition)
  2. Download and install NodeJS (only needed for this demo…)

The installation of the Kaazing WebSocket Gateway is quite esay: Unzip the archive and launch the gateway.start command in $KAAZING_HOME/bin. That’s it.

Now we can write pretty simple and straightforward UDP program, in Node:

var Buffer = require('buffer').Buffer;
var dgram = require('dgram');
// create the datagram socket
var sock = dgram.createSocket("udp4");
// some bogus news...
var news = [
   "Borussia Dortmund wins German championship",
   "Tornado warning for the Bay Area",
   "More rain for the weekend",
   "Android tablets take over the world",
   "iPad2 sold out",
   "Nation's rappers down to last two samples"
];
function broadcastNew() {
   var buf = new Buffer(news[Math.floor(Math.random()*news.length)]);
   sock.send(buf, 0, buf.length, 55555, "127.0.0.1");
   console.log("Sent " + buf + " to the wire...");
}
setInterval(broadcastNew, 3000);

The program is simple: Every three seconds it throws some data to its UDP connection (localhost:55555) and it logs the same message to the server console. You can run the broadcasting “server” with node yourFilename.js.

Next you need to add the following section to the gateway-config.xml file:

<service>
  <accept>ws://localhost:8000/nodejs</accept>
  <type>broadcast</type>
  <properties>
    <accept>udp://localhost:55555</accept>
  </properties>
  <cross-site-constraint>
    <allow-origin>*</allow-origin>
  </cross-site-constraint>
</service>

This maps any incoming WebSocket request for ws://localhost:8000/nodejs to the UDP tool we started on localhost:55555. The used cross-site-constraint ensures that you can invoke the Gateway from a different origin (e.g. different port). If you check the other configured Gateway services you see they do contain URIs for the cross-site-constraint parameter…

The missing piece here is a VERY simple WebSocket script, like:

<!DOCTYPE html>
<html>
  <head>
    <title> My first WebSocket app!</title>

<script src="./WebSocket.js"></script>

<script type="text/javascript">
function connectMeToNodeByUsingKaazing() {
  var ws = new WebSocket("ws://localhost:8000/nodejs");
  ws.onopen = function(ev) {
     console.log("connection is up");
};
ws.onmessage = function(ev) {
     console.log("The news: \"" + ev.data + "\"");
};
}
</script>
<body onLoad="connectMeToNodeByUsingKaazing()">
<h2>Open your JavaScript console to see the messages!</h2>
</body>
</html>

Now go to the $KAAZING_HOME directory and cd to “web/extras”:

  1. create a new folder in there (e.g. mkdir firstApp)
  2. copy the WebSocket.js file (from $KAAZING_HOME/lib/client/javascript/WebSocket.js) to the new ‘firstApp‘ folder.
  3. make sure the above HTML page is in that directory as well (e.g. simpleUDP.html)

That’s it!

If you now open that HTML page in a browser (e.g. http://localhost:8001/firstApp/simpleUDP.html) (and open the JavaScript console), you will see that the connection to the Kaazing gateway has been opened and that news items are coming across the wire!

The sweet part is that you have now been able to bring a UDP based communication to the browser, by using the Gateway server! Of course the demo is pretty simple and trivial, but it opens up for what’s possible when running the Kaazing gateway.

In fact the Kaazing WebSocket Gateway does already have support for JMS, XMPP, STOMP or even AMQP. You can now easily bring these backends to the web (including browsers like IE6)!!!

Have fun!

Howdy!

Posted in Uncategorized
2 comments on “Extending TCP/UDP-based protocols to the browser by using WebSocket
  1. […] in Vienna to speak about WebSocket (and its JSF integration). The first demo described how to bring UDP-based network traffic to the browser. Another demo from my presentation showed how to bring JMS to the browser, by using […]

  2. […] help of the Kaazing Gateway this is possible! As said before, you are basically able to bring any TCP- or UDP-based application to the […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: