Before reading this article, you need to know how to create your simple chatRoom which I have shown in the previous article.
I am going to do these, step by step:

• Store each client
• Send message to the aim client
• Show that private message
• Keep showing the new message

Store each client

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

var io = require('socket.io')(server);
var sockets = {};
var user = new Array();
user.push("everyone");
io.on('connection', function(client){
	client.emit("usersfirst", user);
	client.on('disconnect', function(){
		console.log(client.nickname+" disconnected:-(");
		for(var i = 0; i < user.length; i++){
			if(user[i] == client.nickname){
				user.splice(i, 1);
				break;
			}
		}
		client.broadcast.emit("users", user);
		client.broadcast.emit("chat message", client.nickname+" has left our chatRoom..:-(");
	});
	client.on('join', function(name){
		client.nickname=name;
		console.log(client.nickname+" has connected!");
		//add
		sockets[name] = client;
		user.push(name);
		client.broadcast.emit("users", user);
		client.emit("users", user);
		client.broadcast.emit("chat message", client.nickname + " has joined our chatRoom..:-)");
		client.emit("chat message", client.nickname+" has joined our chatRoom..:-)");
		//add ends
	});
	client.on('chat message', function(msg, to){
		var nickname = client.nickname;
		// client.broadcast.emit("chat message",nickname+": "+msg);
		if(to == "everyone"){
			console.log(nickname+": "+msg+" (This is a public message)");
			client.broadcast.emit("chat message", nickname+": "+msg+" (This is a public message)");
			client.emit("chat message", nickname+": "+ msg+" (You send a message to everyone)");
		}else{
			console.log(nickname+": "+ msg+" ("+nickname+" send a private message to "+to+")")
			sockets[to].emit("chat message", nickname+": "+msg+"(This is a private message)");
			client.emit("chat message", nickname+": "+ msg+" (You send a private message to "+to+")");
		}
		client.broadcast.emit("users", user);
		client.emit("users", user);
	});

What we should do is to store every client in a array, in this example, I call that array sockets. Also, we need to check if the nickname has been used or not. So create another array called user in this example, this array is going to store all the nicknames. So each time,when we create another nickname, we can check is that name been used or not. What you need to know is socket.io is to send to server, and server emits to each client.

Send message to the aim client

See in the previous code, in the client.on('chat message', function(msg, to){}); If the String “to” is not equaled to the “everyone”, then you can use sockets[to].emit() to send message, this method is to send request to that exact client. Then only that man can receive that message XD. Looks cool 🙂

Show that private message

There is no difference in the chat.html. Because, that request was sent to that client, other client will not receive that request, so the old chat.html can show the information. 🙂

Keep showing the new message

Another important thing you need to pay attention is, if we have a lot of messages, each time, to view the latest message, we need to scroll down artificially…That pretty bad experience. So, what we need to do is to write some javascript code to do that automatically 🙂 sounds good.

1
2
3
4
5
6
7
8
9

socket.on('chat message', function(msg){
    		$('#messages').append($('<li>').text(msg));
    		getBottom();
  		  });
  		  function getBottom(){
  		  	$("html, body").animate({
  		  			scrollTop: $("#container").height()
  		 		 }, 1);
  		  };

Each time, when a new message was posted, it will run function getBottom(), and you can see the latest message 🙂

More tips:

I have write another code for the server, like to see all the messages on the console, and improve the alert message for creating a new nickname. Please check that on my github. Still the same project as the previous one, but on the oneToOne branch 🙂
You can also click this link: oneToOneChatRoom

Comments: