Basic chat Applications with Socket IO

• Step #1: Project initialization

The first goal is to set up a simple HTML webpage that serves out a form and a list of messages. We’re going to use the Node.JS web framework express to this end. Make sure Node.JS is installed.

First let’s create a package.json manifest file that describes our project. I recommend you place it in a dedicated empty directory (I’ll call mine socket-chat-example).

• Step #2: Serving HTML

So far in index.js we’re calling res.send and passing it a string of HTML. Our code would look very confusing if we just placed our entire application’s HTML there, so instead we're going to create a index.html file and serve that instead.

• Step #3: Integrating Socket.IO

Socket.IO is composed of two parts:

• A server that integrates with (or mounts on) the Node.JS HTTP Server (the socket.io package)

• A client library that loads on the browser side (the socket.io-client package)

During development, socket.io serves the client automatically for us, as we’ll see, so for now we only have to install one module:

• Step #5: Broadcasting

The next goal is for us to emit the event from the server to the rest of the users.

In order to send an event to everyone, Socket.IO gives us the io.emit() method.

• Step #4: Emitting events

The main idea behind Socket.IO is that you can send and receive any events you want, with any data you want. Any objects that can be encoded as JSON will do, and binary data is supported too.

Let’s make it so that when the user types in a message, the server gets it as a chat message event. The script section in index.html should now look as follows: