node-chat-in-steps-3 icon indicating copy to clipboard operation
node-chat-in-steps-3 copied to clipboard

Get started with building a chat application in node-js in small incremental steps.

trafficstars

h2. node-chat-in-steps

"node-chat":http://chat.nodejs.org is a good working example of the power of "nodejs":http://nodejs.org/ . However some people have trouble getting started with the "source code":http://github.com/ry/node_chat of node-chat application. In order to help to you get started I have developed the skeleton of application in 12 different steps.

The step1 is "as simple as this":http://github.com/neerajdotname/node-chat-in-steps/raw/step1/server.js .

h2. Installing nodejs

I developed this application with node version 0.1.32 . Installing node is easy.

git clone git://github.com/ry/node.git 
cd node 
git checkout v0.1.32 
./configure 
make 
make install 

h2. Checking out source code

All the 12 steps are tagged with step1 to step12. This is how you can get code for tag step1.

git clone git://github.com/neerajdotname/node-chat-in-steps.git 
cd node-chat-in-steps
git checkout -b personal_step1 step1

If you want to go to step2 the just do

git checkout -b personal_step2 step2

h2. Starting server and visiting page

node server.js

After the server has been started visit "http://localhost:8002":http://localhost:8002 .

h2. Functionalities in different steps

h3. step1

  • create a server that responds with hello world on port 8002

h3. step2

  • create an index.html and serve it

h3. step3

  • introduce util.js
  • change the logic so that any static file is served
  • show 404 in case no file is found

h3. step4

  • add jquery-1.4.2.js
  • add client.js
  • change index.html to prompt user for nickname

h3. step5

  • send a join request when user enters nick name
  • respond with a JSON in reply to /join request

h3. step6

  • after ther nick name is accepted display chat screen

h3. step7

  • create session object which identifies if a person is already in
  • send this session object back to client when a person joins in
  • if the nick is in use the provide that feedback to user

h3. step8

  • add style.css

h3. step9

  • after logging in display current time

h3. step10

  • display number of active users logging in
  • after showing the toolbar send a request /who
  • capture the number of active users

h3. step11

  • display message that user joined after a user joins chat

h3. step12

  • better timestamp while displaying message

h3. step13

  • when user hits enter then invoke send function