Node.js and – a basic tutorial

Level: advanced

Node.js itself is great. Let’s add and have possibilities, which formerly we could only dream of.

Node.js and

After presenting basics of node.js and how to work with databases, it’s time to reach for even more interesting things.

One of them certainly is Simply establish a connection between our site (front end) and the node script, running on the server:

var socket = io.connect('//localhost:1337');

But let’s start from scratch with node.js and, step by step.

As first we can customize our configuration by adding elements necessary to work with sockets. More about basic config file you can check in the previous article.

var config = {};
config.db = {};
config.general = {}; // added

config.db.type = 'mysql';
config.db.charset = 'utf8';
config.db.username = 'user';
config.db.password = 'pass'; = 'localhost';
config.db.dbname = 'node_tests'; // DB name

config.db.comments_tbl = 'comments';

// added = '//localhost'; // etc
config.general.port = 1337;
config.general.debug = false; // debug mode on/off

// export
module.exports = config;

We added new configuration parameters. Today we won’t use databases; this configuration will be also useful to us in the next tutorial.

To start, we need only module. So let’s install it in our folder with code:

$ npm install

or if we want – globally”

$ npm -g install

Let’s code! We will create two simple parts – frontend and backend.

1. A HTML page

<!DOCTYPE html>
        <title> tests</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src=""></script>
        <script src=""></script>

            var socket = io.connect('//localhost:1337');

            // emit some data
            socket.emit("user_online_data", {
                data: {id: 1, name: "Tester", msg: "Hello!"}

            // handle our events
            socket.on('welcome', function (data) {
                // process data from node script
                $('#messages').append('<li>' + data.message + '</li>');

                // emit data to node script
                socket.emit("sayhi", {
                    data: 'Hi node!'

            // another "event" we named "time"
            socket.on('time', function (data) {
                $('#messages').append('<li>' + data.time + '</li>');

            // if someting went wront and node script sent error data
            socket.on('error', function () {

        <ul id="messages"></ul>


The code from this file we can simply run in the browser, but this in a moment. We’ll also discuss whole code.

We still need the code working on the server side.

2. Node.js script (server) – test.js

 * node.js and tests

var http = require('http'),
    fs = require('fs'),
    index = fs.readFileSync(__dirname + '/index.html');

// setup
var config = require('./config.js');
var PORT = config.general.port;
var HOST =;

// send html content to all requests
var app = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});

// server is listening ...
var io = require('').listen(app);

// sample function:
// send current time to all connected clients
function sendTime() {
    io.sockets.emit('time', {
        time: new Date().toJSON()

// send current time every 10 secs
setInterval(sendTime, 10000);

// emit welcome message on connection
io.sockets.on('connection', function (socket) {
    socket.user_id = 0; // current user ID

    socket.emit('welcome', {message: 'Welcome!'});

    socket.on('sayhi', console.log); // just log data in console

    // process the data
    socket.on('user_online_data', function (data) {
        socket.user_id =; // "socket scope"

        var name =; // local scope
        console.log("#:" + socket.user_id + ", name: " + name);


console.log('Server running at ' + HOST + ':' + PORT + '/');
// console.log('Debug: ' + config.main.debug);

We assume that both files are located in the same folder. In this way, the node server which we just wrote, will serve us content of our web page (index.html) via WWW. It happens in the line:

    index = fs.readFileSync(__dirname + '/index.html');

Assuming we have the module already installed (npm install, we can start our server.

Open command line, go to folder with code and run test.js script:

$ node test.js

Then simply open in web browser our web page (remember about the port), e.g.:


Now we should see served page, which will be updated every 10 seconds by data from our node.js server:


And in the console we should see the data sent from the client:


Clean, efficient communication and data exchange. That’s the beauty of node.js and!

What happens in the code

We used here basic elements necessary for efficient work with node.js and Let’s discus them in sequence.

The index.html file

As first we add necessary libraries: and additionally – jQuery.

After connecting we go to the proper communication. Note: to connect properly remember about the port (for the code on client- and server- side must be the same).

We send the data using method emit as: socket.emit(“key_name”, { data });

In the further lines we handle the case of sending “welcome” message by the server:

socket.on('welcome', function (data) { ...

The next event we handle, is displaying detailed information about current time, send by the server every 10 seconds. This of course only something for demonstration:

socket.on('time', function (data) {
  $('#messages').append('<li>' + data.time + '</li>');

Now let’s talk about sever-side code

Server – test.js

The first thing here is “set up” of necessary modules:

var http = require('http'),
    fs = require('fs'),
    index = fs.readFileSync(__dirname + '/index.html');

The last line reads our index.html file, to serve content on the port configured for our server (here: 1337).

Certainly we don’t have to do it; usually when we develop web application, we have a separated code (e.g. based on PHP MVC framework). So the code for communication through we place e.g. in template of particular web page.

Then it’s enough to serve anything, e.g.:

var http = require('http'),
  index = "<html><body>Listening ...</body></html>";

Next operation in our code is to get settings and create the server.

Then we have the sendTime() function, called every 10 secs, which emits data – here the object with current date – as JSON.

And we go to the block of code that handles communication:

io.sockets.on('connection', function (socket) {

In case of successful connection, the code from this block will be executed. In our case it’s:

– send “welcome” message:

socket.emit('welcome', {message: 'Welcome!'});

– handle the “sayhi” event, emitted on client side:

socket.on('sayhi', console.log);

– at the end something more interesting – processing received data :

socket.on('user_online_data', function (data) {
  socket.user_id =; // "socket scope"

  var name =; // local scope
    console.log("User #:" + socket.user_id + ", name: " + name);

As we see, getting the data is very simple. We could also pay attention to the local variable (var) and a variable “within” the socket. For example when we want to use value of current user ID, in current connection, we can assign this value for the socket (socket.user_id =

Connection broken, disconnection

When we have our page opened in the browser, and we terminate server-side script (CTRL + C in console), certainly communication errors will occur.

Opening e.g. Firebug, we will see the failed calls:


There are many attempts of reconnection. To limit this, simply change the line responsible for connection:

var socket = io.connect('//localhost:1337', {reconnection: false});

This will block attempts of reconnection.

Additionally, to handle disconnection case (e.g. user closed browser window) on server side, we use the disconnect event:

socket.on('disconnect', function() {
  if (socket.user_id > 0) {
    // if (config.general.debug) { console.log('Bye #: ' + socket.user_id); }
    // do some cleanups ...

Full code of an example available here:

We talked here about basic elements, on which we can build our solutions based on node and The next tutorial will be with practical example – real time comments implementation.

Node.js and – summary

Well – these are great technologies, what we should notice in today’s examples. Although it was still only basic information.

I also encourage you to check the documentation of

Thank you!

You can leave a response, or trackback from your own site.