Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Getting Started

curraheerecursed edited this page · 27 revisions
Clone this wiki locally

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 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.

Only the client directly uses now, whereas the server uses either everyone.now or this.now, both of which are not used by the client. everyone.now controls simultaneously all now objects of connected clients. (everyone is in fact a group that contains all clients. You will learn more about using groups with NowJS in the future.) 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. 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 group. 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 log will be recorded in the console. Note on 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 either the server or the client.


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

Here is the tricky part where we have our two functions. distributeMessage is defined here on the server, though receiveMessage, is not. 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. Inside distributeMessage, we have a this.now, which is also the now of the caller.


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 linked with a "send" button. Upon clicking, distributeMessage is called by the client. Once again, distributeMessage is defined on everyone.now, thus if any one of all the connected clients calls this function, it gets executed on server.


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, with the field this.now.name referring to the name of the caller. distributeMessage in turn calls 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.

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
Something went wrong with that request. Please try again.