Introduction to WebSockets – Server, Client examples using Node.js

Posted on by Naeem

Initially the paradigm about web was Client/Server model, in which clients job is to request data from a server, and a servers job is to fulfill those requests. This paradigm fulfills the web requirement for number of years, but later on with Introduction of AJAX makes us enable to communicate with server asynchronously.

Now using AJAX it was easy to communicate with server but we still need more power when talk in term of real time applications. an simple example http request could be like bellow.

GET /users/ HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
Pragma: no-cache
Cache-Control: no-cache
So every time you make an HTTP request a bunch of headers and cookie data are transferred to the server and in response you will response header along with data. If you are working on a real time application or game running in browser, you will have problems running things smoothly because every request contain a lot of unnecessary data which is not needed every time you make request to server. so here comes WebSockets which is a way of creating a persistent, low latency connection that can support transactions initiated by either the client or server.
Using WebSockets you can start a bidirectional connection where client/server can use to start send data at any time. Client establishes connection through a process called WebSocket handshake, client will send regular HTTP request to the server – upgrade header is included in this request to let server know that a client want to establish a WebSocket connection.
GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Now if the server supports the WebSocket protocol, it will send upgrade header back in the response.

TTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

After handshake is complete the initial HTTP connection is replaced by a WebSocket connection that uses TCP/IP connection and now either party can starting sending data.

A simple client side connection is like bellow.

var socket = new WebSocket('ws://example.com');
// onopen send/recieve data
socket.onopen = function(event) {
console.log("connected to server.")
};
// Handle any errors that occur.
socket.onerror = function(error) {
console.log('WebSocket Error: ' + error);
};

To send a message through the WebSocket connection you call the send() method. You can send both text and binary data through a WebSocket.

Now if you want to create a simple socket server using Express.js and Socket.IO.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.sendfile('index.html');
});

io.on('connection', function(socket){
console.log('a user connected');
});

http.listen(3000, function(){
console.log('listening on *:3000');
});

Server is now listening at port 3000, which can recieve and send data.