Skip to content
This repository

Getting Started with NowJS

Installation

NowJS is a node.js module, which means you'll need node installed before proceeding. If you don't, see the node.js website for an introduction and instructions on how to get it.

After installing node, you'll need to grab npm (a node.js package manager). Once npm is installed, you can type "npm install now" at the command line and get access to NowJS.

Understanding The Basic Idea

NowJS provides a now object that both the client and the server share access and control. A now object is created for each client when it connects to the server. now acts as a regular Javascript object; what's special is that both the client and the server can modify it, ie. store data and define functions, for the other side to use.

There is also an everyone.now object that is only seen by the server. It gives simultaneous access to all now objects of connected clients.

Building Your First NowJS Server

Here is a fast demonstration on how to write a simple chat server using NowJS. In this example you will see how now is used for information sharing. You can find the code here.

Setting Up

The "helloworld_server.js" file starts with the following code:

var fs = require('fs');
var server = require('http').createServer(function(req, response){
  fs.readFile(__dirname+'/helloworld.html', function(err, data){
    response.writeHead(200, {'Content-Type':'text/html'});
    response.write(data);
    response.end();
  });
});
server.listen(8080);

These lines are required to set up the server and prepare the "helloworld.html" file for the client.

Creating everyone

var nowjs = require("../../");
var everyone = nowjs.initialize(server);

This is where the the server creates the everyone group. Notice that no now object exists right now; instead, they will be created implicitly when clients connect.

Keeping Track Of Connections

everyone.on("connect", function(){
  console.log("Joined: " + this.now.name);
});

everyone.on("disconnect", function(){
  console.log("Left: " + this.now.name);
});

Whenever a client connects or disconnects, a log will be recorded in the console. Notice the use of this.now.name here. this.now refers to the now object that belongs to this specific client, while name is a field to be created by the client (as we'll see in a minute). This step is optional; it doesn't affect the behavior of neither the server or the client. But it's nice to have everything written down.

Sending Out The Message

everyone.now.distributeMessage = function(message){
  everyone.now.receiveMessage(this.now.name, message);
};

Here is the tricky part. We see two functions, namely distributeMessage, which is defined here on the server, and receiveMessage, whose definition is not given. This is one key attribute of now: distributeMessage is defined here, but it is meant to be called by the client. Inside distributeMessage, this.now refers to the now of the caller.

On The Client, In The Meantime...

now.receiveMessage = function(name, message){
  $("#messages").append("<br>" + name + ": " + message);
}

This is how the client receives the message from the server. Remember that on the server, receiveMessage is defined on everyone.now? As a result, upon calling, this function gets carried out by all clients. Also, the first argument this.now.name on the server is the name of the client who calls distributeMessage. This way, each client sees the name of whoever sends the message followed by the message itself.

Other Than That...

$("#send-button").click(function(){ now.distributeMessage($("#text-input").val()); $("#text-input").val(""); });

Here distributeMessage is linked with a "send" button. Upon clicking, distributeMessage is called by the client. Once again, on the server distributeMessage is defined on everyone.now, thus when any client calls this function, it gets executed on server.

Lastly, The Name

now.name = prompt("What's your name?", "");

When first connected, a prompt window asks for the name of the client and the name is stored to a newly created field now.name, which will be used as a tag for the client.

Putting Things Together

When a client connects to the server, a now object for this client is created and a name can be entered. If the client clicks the "send" button, distributeMessage is called

Something went wrong with that request. Please try again.