HTML5 Websockets, Node.js And Socket.io On Windows

Assuming that you already Googled around for the terms “HTML5 WebSockets”, “node.js” and “socket.io” and you came to the point where you wanted to actually test it a bit, you can follow the steps below so that you can create the magic with your own hands.

“The server side”
What do you need to do in order to run your first WebSockets server on Windows:
- go to http://nodejs.org and download the “Windows Installer”
- install it
- in command prompt, go to C:\Program Files\nodejs and run the following command:

npm install socket.io

- under C:\Program Files\nodejs create a new file named server.js with the following content:

var http = require('http');
var io = require('socket.io');
 
//WebSocket
var server = http.createServer(function(request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end('WebSocket server is up and running!');
}).listen(33334);
 
//Socket.IO
var socket = io.listen(server).set('log level', 1);
 
//Listeners for intercepting client messages
socket.on('connection', function(client) {
    client.on('message', function(data) {
        console.log('Message from client: ', data);
    });
    client.on('customMessage', function (data) {
        console.log('Custom message from client: ', data);
 
        var now = new Date().getTime();
 
        //Emits back to the client a message
        client.emit('customMessageResponse', data + '->' + now);
 
        //Broadcasts to all the clients a message
        client.broadcast.emit('customMessageResponse', data + '(broadcasted)->' + now);
    });
    client.on('disconnect', function(){
        console.log('Client disconnected');
    });
});

- in command prompt run the following command:

node server.js

- voila! the server is up and running
So far so good with the server side. But what about the client side?

“The client side”
- download a test HTML file from here http://goo.gl/9ul1O
- allow the file to be served by your favorite web server (IIS, Apache etc.)
Now for the tests!

“The magic”
- go to http://localhost/downloaded_html_file.html (for demonstration purposes, I will open it in 3 separate browser instances)
- almost instantly you should see the message “Client connected to the Server!”
- type something in the first input box, click on “Send Message!” and you should see the message in the WebSockets server log window, just like in the image below:

- now let’s test the broadcast functionality of the WebSocket – type something in the second input box, click on “Send CustomMessage!” and you should not only see the message in the WebSockets server log window but also in the 3 separate browser instances:

- if you’re curious to inspect the HTTP traffic (through Fiddler for example), you can see that in order to establish a WebSocket connection, the HTTP connection must be upgraded to a WebSocket connection (HTTP/1.1 101 Switching Protocols)

- unfortunately Fiddler logs the client-server communication in a way that’s a bit messy

Comments are closed.