Tag Archives: nodejs

NowJS and Node.js Tutorial – Creating a multi room chat client

NOTE: This is a really old tutorial. The library used in this example (NowJS) has pretty much been abandoned by the developers for several years. You might still be able to find the NowJS library code at the NowJS Github Page.

However if you are trying to create a HTML5 Websocket/Node.js chat client, I’d recommend using Websocket-Node or Socket.IO instead of NowJS.


Node.js is a server side environment for Javascript. NowJS is a framework built on top of Node.js that connects the client side and server side Javascript effortlessly.

The core of NowJS functionality lies in the now object.The now object is special because it exists on the server and the client.

This means variables you set in the now object are automatically synced between client and server. Also server functions can be directly called on the client and client functions can be called directly from the server.

All in realtime.

You can have a working HTTP server up and running in Node.JS with just a few lines of code. For example –

This little snippet of code will create an HTTP server, listen on port 8080, and send back “Hello World” for every request. That’s it. Nothing more needed.

Using NowJS, communication between the client and server side is just as simple.

Client Side:

In this code snippet, the client side sets a variable to ‘someValue’ and calls serverSideFunction(), which is declared only on the server.

Server Side:

The server side is then able to access clientSideVariable, which is declared only on the client.

All the details such as establishing connections and communicating change of data between the server and client are handed automagically by the framework.

In fact writing code using this framework is so simple, the NowJS hello world example is a working chat client and server written in under a dozen lines of code. Go check it out.

As a simple exercise to get comfortable with the NowJS API, we can modify the chat client example to support multiple chat rooms. Let’s take a look at how easy it is.

Server Side (multiroom_server.js)

1. The first thing we need to do is modify the distributeMessage() function to only send messages to users in the same chat room as the user.

We store the name of the server room on the client side (this.now.serverRoom). When the client calls the distributeMessage() function we send the message to everyone in the same chat room by using getGroup() and using the group.now object instead of the everyone.now object. (everyone is just a group that contains all users connected to the server)

2. Next we need to handle the client changing chat rooms.

The getGroup() method fetches the group object if it exists and creates a group if it doesn’t already exist. We use the groups addUser() and removeUser() methods to move the client from the old room to the new room.

Thats about it on the server side.

Client Side (multiroom.html)

3. First we add a drop down with the list of server rooms.

4. Next we call the server side changeRoom() function when the user first connects and whenever the drop down is changed.

5. For extra credit, we can allow the server to dynamically provide the list of rooms when the client connects.

The changes required would be –

Server Side:

Client Side:

That’s really all you need to do. We now have a multi room chat client/server with
i) A drop down on the client side with list of server rooms
ii) On connection with server, client auto populates server room list and enters the first room
iii) Changing drop down changes room
iv) Entering new room clears the screen for the user

This is obviously a fairly barebones version (like the original example), but it serves as a proof of concept of all the essential elements of NowJS communication.

The finished code has some extra comments and a few more features. You can download the complete source code below.