Node.JS Web Development Company in USA, Uncategorized

NodeJS Hosting Tips – Creating a Multi Room Chat Client

https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fanika.leslie.31%2Fposts%2F416764308698813&width=500

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.JS Website Development Services USA uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. NowJS is a framework built on top of Node.js that connects the client side and server side JavaScript effortlessly.

Image result for NodeJS Hosting

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 the client and the server. Also server functions can be directly called on the client and client functions can be called directly from the server.

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

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello Worldn');

}).listen(8080);

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:

everyone.now.serverSideFunction = function() {

console.log(this.now.clientSideVariable);

}

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 the change of data between the server and client are handled automatically 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.

// Send message to everyone in the users group

everyone.now.distributeMessage = function(message){

var group = nowjs.getGroup(this.now.serverRoom);

group.now.receiveMessage(this.now.name+'@'+this.now.serverRoom, message);

};

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.

everyone.now.changeRoom = function(newRoom){

var oldRoom = this.now.serverRoom;

//if old room is not null; then leave the old room

if(oldRoom){

var oldGroup = nowjs.getGroup(oldRoom);

oldGroup.removeUser(this.user.clientId);

}

// join the new room

var newGroup = nowjs.getGroup(newRoom);

newGroup.addUser(this.user.clientId);

// update the client's serverRoom variable

this.now.serverRoom = newRoom;

};

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.

That’s about it on the server side.

Client Side (multiroom.html)

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

Room 1
Room 2
Room 3


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

// on establishing 'now' connection, set the server room

now.ready(function(){

// By default pick the first chatroom

now.changeRoom($('#server-room').val());

});

// On change of drop down, clear text and change server room

$('#server-room').change(function(){

$("#messages").html(");

now.changeRoom($('#server-room').val());

});

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:

// Declare a list of server rooms

everyone.now.serverRoomsList = {'room1':'Room 1','room2':'Room 2','room3':'Room 3'};

Client Side:

now.ready(function(){

// Pick up list of chatrooms from server and populate dropdown

setServerRoomFromList(now.serverRoomsList);

// By default pick the first chatroom

now.changeRoom($('#server-room').val());

});

// populate the #server-room dropdown from a list

function setServerRoomFromList(roomList){

$('#server-room').empty();

$.each(roomList, function(key, value){

$('#server-room').

append($("").

attr("value",key).

text(value));

});

}

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 to a Node.JS Web Development Company in USA.

I am hoping that this post about tips of NodeJS Hosting would be useful for you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s