Using socket.io to create a chatRoom

You need:

• Terminal
• nodejs
• express
• socket.io
  This chatRoom is based on the “express”. Make sure you have installed express. If not try npm install express

This URL is a useful link for express website.

Then Let’s make a express project, express chatRoom. Then, initialize that project.

cd chatRoom

npm install

If, npm install is slow, do not worry, it’s slow with me as well XD..However, if it occurs with some error, please try sudo npm installnode app. When you type localhost:3000/ in your browser, you will find that the website will occur some error, like that

1

“Error: /User/Hanslen/Desktop/chatRoom/views/layout.jade:1>1|doctype 5 2|html 3|head4|title=title `doctype 5` is deprecated, you must now use doctype html”.

In order to fix this problem, you only need to change /views/layout.jade‘s first line, doctype 5 => doctype html. Then, run again:-). Now, you have an express project.
Express framework works fine, we then need to install socket.io npm install socket.io --save. The reason why I write the “–save” is it will save it to “package.json” as an dependency. socket.io is prepared, write some code to the app.js.
The initial express project will have

1
2
3

http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});

Then set that function as a variable called server. Because we need to use this server later. write var io = require('socket.io')(server);
to include socket.io to the server, and then io.on('connection', function(client){ console.log('Client connected...'); });Each time, when a client is connected to the server, the console will show. I do not like the jade code, so I use a hyperlink to jump from the initial project to chat.html. In that chat.html, write these javascript code at the bottom of the file, but before body tag.

1

var socket = io();

Then refresh the browser, you can find that the console will show “Client connected…” often;-) That means we have connected with socket.ioXD
Then, we need to send message’s.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="/socket.io/socket.io.js"&gt</script>
	<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script>
		  var socket = io();
		  $('form').submit(function(){
		    socket.emit('chat message', $('#m').val());
		    $('#m').val('');
		    return false;
		  });
		  socket.on('connect', function(data){
		  	nickname = prompt("Please type your nickname: ");
		  	socket.emit('join', nickname);
		  });
		socket.on('chat message', function(msg){
    		$('#messages').append($('<li>').text(msg));
  		  });
</script>

all socket.io’s emit request means need the request to the server, so first it need a user to type his/her nickname, then we store that value in the server.
Here is what we do with the server:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var io = require('socket.io')(server);
io.on('connection', function(client){
	console.log('Client connected...');
	client.on('disconnect', function(){
		console.log(client.nickname+" disconnected:-(");
	});
	client.on('join', function(name){
		client.nickname=name;
	});
	client.on('chat message', function(msg){
		var nickname = client.nickname;
		client.broadcast.emit("chat message",nickname+": "+msg);
		client.emit("chat message", nickname+": "+ msg);
		console.log(nickname+": "+ msg);
	});
});

The reason why we need both client.broadcast.emit and client.emit is both me and other people in the chatroom need to receive what we send. Then, let’s enjoy the chatroom you create. XD In the next article I am going to show some demo about how to create one to one chat.

This is the GitHub project, if you have any problem check it:
socketChatRoom-HanslenChen

Comments: