Getting Started

Getting Started with NowJS

###Installation NowJS is a node.js module, which means you'll need node installed before proceeding. If you don't have node yet, proceed to 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 behaves the same as any other Javascript object, so you can perform all the regular actions on it. 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.

Only the client directly uses now, whereas the server uses either everyone.now or this.now, both of which cannot be accessed by the client. everyone.now controls simultaneously all now objects of connected clients; this.now accesses only the client that is currently interacting with the server.

###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. This is an example of a simple chat room. Once the clients connect to the server, they can each enter a name. When a client inputs a message and click a "send" button, all other clients sees the message and who sends it. In this example we'll create two functions for now, distributeMessage and receiveMessage. Keep an eye on how they're used.

---

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.

---

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

This is where the the server creates the everyone namespace. No now object exists yet; instead, they will be created implicitly when clients connect.

---

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 short notice will be written to the console. Note the use of this.now.name here. this.now refers to the now object that belongs to a specific client that is currently interacting with the server(ie. connecting or disconnecting). 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 either the server or the client.

---

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

Here is the tricky part. This is one key attribute of now: distributeMessage is defined here, but it is meant to be actually called by the client. We'll see how this is done soon. Also take note that inside distributeMessage, we have this.now, which is also the now of the client who is calling.

---

Now we move on to the "helloworld.html" file. We'll skip the html labels and get straight to the point:

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, when the server calls receiveMessage, it is executed on all the clients. Also, the first argument this.now.name (as on the server) is the name of the client who calls distributeMessage. This way, when executing receiveMessage, each client sees the name of whoever sends the message followed by the message itself.

---

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

});

Here distributeMessage is bound to a "send" button. Upon clicking, distributeMessage is called by the client, passing the entry in the input box, or the message, as the argument. Once again, distributeMessage is defined on everyone.now on the server, it is thus made available to all the connected clients. If any client calls this function, it gets executed on server.

---

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

When a client connects, 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 any client clicks the "send" button, distributeMessage is called. The server executes distributeMessage by calling receiveMessage, passing the caller's name and the message as arguments. All clients then execute receiveMessage locally, printing the message as well as its sender's name.

To help you understand things visually, this table shows where each function is defined, called, and executed:

	distributeMessage	receiveMessage
defined	server	client
called	client	server
executed	server	client