Using Node.js and Websockets to Build a Chat Service

Socket.io is event based, just like Node. It aims to make real-time apps possible in every browser and mobile device, blurring the lines between these different transport mechanisms. It’s care-free, real-time, and 100% JavaScript.

Like the other modules, we need to include it in our server.js file. We will also chain on our express server to listen for connections from the same address and port.

var io = require('socket.io').listen(app);

The first event we will use is the connection event. It is fired when a client tries to connect to the server; Socket.io creates a new socket that we will use to receive or send messages to the client.

Let’s start by initializing the connection:

io.sockets.on('connection', function (socket) {//our other events...});

This function takes two arguments, the first one is the event and the second is the callback function, with the socket object.

Using code like this, we can create new events on the client and on the server with Socket.io. We will set the "pseudo" event and the "message" event next.

To do this, it’s really simple, we just use the same syntax, but this time with our socket object and not with the "io.sockets" (with an “s”) object. This allows us to communicate specifically with one client.

So inside our connection function, let’s add in the "pseudo" event code.

socket.on('setPseudo', function (data) {socket.set('pseudo', data);});

The callback function takes one argument, this is the data from the client and in our case it contains the pseudo. With the "set" function, we assign a variable to the socket. The first argument is the name of this variable and the second is the value.

Next, we need to add in the code for the "message" event. It will get the user’s pseudo, broadcast an array to all clients which contains the message we received as well as the user’s pseudo and log it into our console.

socket.on('message', function (message) {socket.get('pseudo', function (error, name) {var data = { 'message' : message, pseudo : name };socket.broadcast.emit('message', data);console.log("user " + name + " send this : " + message);})});

This completes our server-side configuration. If you’d like, you can go ahead and use other events to add new features to the chat.

The nice thing about Socket.io is that we don’t have to worry about handling client disconnections. When it disconnects, Socket.io will no longer receive responses to “heartbeat” messages and will deactivate the session associated with the client. If it was just a temporary disconnection, the client will reconnect and continue with the session.

The Socket.io Client-Side Configuration

Now that our server is configured to manage messages, we need a client to send them.

The client-side of Socket.io is almost the same as the server-side. It also works with custom events and we will create the same ones as on the server.

So first, create a "script.js" file inside the public folder. We will store all of our functions inside of it.

We first need to start the socket.io connection between the client and the server. It will be stored in a variable, which we will use later to send or receive data. When the connection is not passed any arguments, it will automatically connect to the server which will serve the page.

var socket = io.connect();

Next, let’s create some helper functions that we will need later. The first is a simple function to add a message to the screen with the user’s pseudo.

function addMessage(msg, pseudo) {$("#chatEntries").append('<div class="message"><p>' + pseudo + ' : ' + msg + '</p></div>');}

This helper uses the append function from jQuery to add a div at the end of the #chatEntries div.

Now we are going to write a function that we can call when we want to send a new message.

function sentMessage() {if ($('#messageInput').val() != "") {socket.emit('message', $('#messageInput').val());addMessage($('#messageInput').val(), "Me", new Date().toISOString(), true);$('#messageInput').val('');}}

First, we verify that our textarea is not empty, then we send a packet named "message" to the server which contains the message text, we print it on the screen with our "addMessage" function, and finally we remove all the text from the textarea.

Now, when the client opens the page, we need to set the user’s pseudo first. This function will send the pseudo to the server and show the textarea and the submit button.

function setPseudo() {if ($("#pseudoInput").val() != ""){socket.emit('setPseudo', $("#pseudoInput").val());$('#chatControls').show();$('#pseudoInput').hide();$('#pseudoSet').hide();}}

Additionally, we hide the pseudo setting controls when it’s sent to the server.

Now just like we did on the server-side, we need to make sure we can receive incoming messages and this time we’ll print them on the screen. We’ll use the same syntax but this time we call the "addMessage" function.

socket.on('message', function(data) {addMessage(data['message'], data['pseudo']);});

Just like with our server configuration, the packet that is sent to the client is an array containing the message and the pseudo. So we just call our "addMessage" function passing in the message and the pseudo, which we extract from the received data packet.

Now we just need to add the initialization function which is fired once the page is fully loaded.

$(function() {$("#chatControls").hide();$("#pseudoSet").click(function() {setPseudo()});$("#submit").click(function() {sentMessage();});});

First, we hide the chat controls before the pseudo is set and then we set two click listeners which listen for clicks on our two submit buttons. The first is for the pseudo and the second is for the messages.

And that wraps up our client-side script.

Conclusion

We now have a working chat service. To start it, just run the following command :

node server.js

In your terminal you should get a message from Socket.io saying that the server is started. To see your page go to 127.0.0.1:3000 (or whichever port you chose previously).

The design is very basic, but you could easily add in a stylesheet with CSS3 transitions for incoming messages, HTML5 sounds, or Bootstrap from Twitter.

As you can see, the server and client scripts are fairly similar: this is the power of Node.js. You can build an application without having to write the code twice.

Finally, you may have noticed that it only took 25 lines of code inside our server.js file to create a functional chat app, with amazing performance. It is very short, but it also works very well.

Now if you’re interested, I have created a better chat service application, with a good looking design, along with some additional features. It is hosted on Nodester and the source code is on Github.

Here is a preview of it.

Thanks for reading.