Building a chat application with SocketCluster

Nelson Zheng — Thu, 30 Apr 2015 12:06:00 GMT

In this guide, we are going to create a basic web chat application with Node.js and the SocketCluster.io module. The chat application will allow our users to create chat rooms that they can share with their friends.

This guide requires zero prior knowledge to Node.js or SocketCluster.io so it is ideal for users of all levels of experience.

Introduction

In order for our chat applications to work, messages sent by any individual user must be relayed to all other users. Traditionally, web chat rooms built on PHP have struggled with bidirectional real-time communications.

This problem is solved by using WebSockets, a technology that makes it possible to maintain an interactive session between the client and the server.

Rather than polling the servers for any new messages like we used to do before, we are now able to push the message to other all users once it has been received by the server.

Setup our environment

The first thing to do is to install Node.js on your system. You can follow one of these official guides on how to do so depending on your operating system.

Installing Node.js will also come with its package manager called npm. We will use npm install to install SocketCluster.

npm install -g socketcluster

Depending on your system, you may need to run the command with super user privileges

sudo npm install -g socketcluster

Creating the application

Once we have SocketCluster installed we can now use it to create our application. Browse to the location where you want to have your application installed, and run the following command in your terminal. I've chosen to install this in my home directory and I've called my chat application sc-chat.

socketcluster create sc-chat

Testing the server

If we run node server we should see the following:

And if we browse to http://localhost:8000 we should see this:

Yay! We have our basic server running and we can see the default application page!

Editing the HTML

So far, we've been able to run our server and have it deliver the default page. Let's now go ahead and edit that page to make our chat application. Open up the public/index.html in your favourite text editor and replace its contents with this:

  
  
  
    SocketCluster Chat Application

Adding some CSS

Create the css directory inside your application and save the following CSS file inside:

body {
  margin: 0;
  padding: 0;
  color: #666666;
  font-weight: 300;
  font-family: 'Roboto';
  background-color: #F9F9F9;
}
a {
  font-weight: 300;
  color: #72B963;
}
.container {
  margin: 10vh 10vw ;
  position: relative;
  width: 80vw;
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  height: 80vh;
}
.container ul {
  margin: 0;
  padding: 0;
}
.container ul>li {
  list-style: none;
  padding: 20px;
  border-bottom: 1px solid #EEEEEE;
}
.container ul>li:nth-child(odd) { 
  background: #F6F5F6; 
}
.messages {
  height: 75vh;
  overflow-y: scroll;
}
.actions {
  position: absolute;
  bottom: 0;
  background-color: #CCCCCC;
  width: 100%;
  border-top: 1px solid #EEEEEE;
}
.actions input {
  border: 0;
  margin: 0;
  font-size: 1em;
  padding: 1.5vh 1vw;
  width: 68vw;
  float: left;
}
.actions button {
  border: 0;
  margin: 0;
  width: 10vw;
  text-align: center;
  font-size: 1em;
  padding: 1.5vh 1vw;
  float: left;
  background-color: #2ecc71;
  color: #FFFFFF;
}

Refresh the page and it should look like this:

SocketCluster action

Let's add some code to our server's worker.js so that we can see when someone has connected to the server:

scServer.on('connection', function (socket) {  
  console.log('User connected');
  socket.on('disconnect', function () {
    console.log('User disconnected');
  });
});

Now inside index.html we can add the Javascript to trigger this event. Add the following code right before the tag.

Now if we restart the server by pressing Ctrl+C on the terminal running the server and re-running node server, and refreshing the page we will see this:

Also notice that in our browsers console, it prints Connected to server once a connection has been established.

Emitting events

Now let's introduce some event emissions so that when the user types a message, the server will receive a chat event. Let's update the javascript above the to this:

And we will print the messages we receive on the server, for now.

scServer.on('connection', function (socket) {

  console.log('User connected');

  socket.on('chat', function (data) {
    console.log('Chat:', data);
  });

  socket.on('disconnect', function () {
    console.log('User disconnected');
  });
});

Broadcasting

Now that we are receiving the chat messages on the server, it is time to broadcast it to all our clients. We do this by adding scServer.global.publish('yell', data);the following line to our chat event.

scServer.on('connection', function (socket) {

  console.log('User connected');

  socket.on('chat', function (data) {
    scServer.global.publish('yell', data);
    console.log('Chat:', data);
  });

  socket.on('disconnect', function () {
    console.log('User disconnected');
  });
});

And listening for this yell event on the client by adding the following before our tag:

This will listen for any yell events and then take the message and insert it to our messages list.

And that's it! Messages sent from any one client will be broadcasted to all our clients and displayed.

Get this on GitHub

https://github.com/nelsonzheng/sc-chat

Never Settle