Ohad Avenshtein's Blog: Node.JS tutorial - Create a simple chat with socket.io module

Sunday, July 7, 2013

Source Code:

In my previous post, I explained how to:

1. Install node.js environment and modules

2. Create a template application using express module

3. Install Eclipse IDE and node.js plugin

Now let's start building our chat application. PLEASE work with Google Chrome. I didn't test it on other browsers and i'm not sure about it's compitability.

First of all, I've searched for a decent CSS for chat, so I googled and found that post:

http://stackoverflow.com/questions/9318289/simple-css-layout-for-chat-app

Create "stylesheets" under "public" directory and add "chat.css".

We are ready to write some code!

Creating the chat view

1. Create "chat.hjs" under "views" folder. ".hjs" extension tells the engine it's a hogan.js template.

2. At first, we'll include socket.io.js file and jquery (although I'm not sure we will be using the last).

<html>

<head>

<link rel='stylesheet' href='/stylesheets/chat.css' />

</head>

<body>

<script src="/socket.io/socket.io.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>

</html>

3. Creating the view includes:

"upperPanel" - divided to two list: "chat" for the chat messages, "friends" for the chat users list.

"bottomPanel" - divided to two panels:

"messagePanel" - contains text area for the user to send messages, and a "send" button. Please note the onclick="onSendMessageClick()".

"signInPanel" - contains text box for the user to enter his chat user-name, and a "LogIn" button. Please note the onclick="onLogInLogOutClick()".

<div id="wrapper">

<div id="upperPanel">

<div>

<ul id="chat">

</ul>

</div>

<div>

<ul id="friends">

</ul>

</div>

<div id="bottomPanel">

<div id="messagePanel" style="float:left">

<textarea id="txtUserMessage" style="resize:none;height:80px;float:left;width:800px;"></textarea>

<input id="btnSendMessage" onclick="onSendMessageClick()" type="submit" style="width:50px;height:80px;float:right;" disabled="disabled" value="send" />

</div>

<div id="signInPanel" style="float:right">

<input id="txtUserName" style="width:130px;" type="text" name="userName"/>

<button id="btnLogInLogOut" onclick="onLogInLogOutClick()">LogIn</button>

</div>

Also add session id div, just in order to demonstrate hogan.js:

<div id="sessionId" style="float:right">
Session Id: {{sessionId}}
</div>

The curly buckets mention that this data would be injected from the server.

Server

4. Server configurations and events

Let's take a break from the client-side, and move to write some node.js server code. We had just written a server call, so let's try to catch it.

A.

Open app.js, which is the main file of our server application. This is where all starts.
Please remove all code before you continue.

B.

Add those module imports including socket.io on top:

var express = require('express')

, routes = require('./routes')

, user = require('./routes/user')

, http = require('http')

, path = require('path')

, socketio = require('socket.io') // library for realtime web applications based on WebSocket protocol

C.

Create the server, and make socket.io availiable on server by:

var app = express()

, server = http.createServer(app)

, io = socketio.listen(server);

D.

Add those configurations to your express application:

app.configure(function(){

app.set('port', process.env.PORT || 3000);

app.set('views', dirname + '/views');

app.set('view engine', 'hjs');

app.use(express.favicon());

//app.use(express.logger('dev')); // Express logger

app.use(express.bodyParser());

app.use(express.methodOverride());

app.use(express.cookieParser()); // To parse cookies

app.use(express.session({secret: '1234567D9sQWERTY'})); // To use sessions

app.use(app.router);

app.use(express.static(path.join(dirname, 'public')));

});

You can see that we are setting the port of our server application, defining what is our view engine (hogan.js) and so on. We are doing this with app.set().

The app.use() calls pass 'middleware' functions for express to use. Each layer is essentially adding a function that specifically handles something to the flow through the middleware.

For example by adding "app.use(express.bodyParser());", we ensure that our server handles incoming requests through the express middleware, and now parsing the body of incoming requests is part of the procedure that the app middleware takes when handling incoming requests.

Also add:

app.configure('development', function(){

app.use(express.errorHandler());

});

That line would tell our app to use the middleware errorHandler function when running on development mode. (We can run development mode by writing: process.env.NODE_ENV='development' in our node app)

E.

Start the server on the chosen port by adding:

server.listen(app.get('port'), function(){

console.log("Express server listening on port " + app.get('port'));

});

F.

Now we want to configure routing for our app.

We want our chat app to be placed at: "{URL}/chat".

Add to app.js:

require('./routes')(app);

And modify index.js to:

module.exports = function(app) {

app.get('/', index);

app.get('/chat',chat);

};

var index = function(req, res){

res.render('index', { title: 'Express' });

};

var chat = function(req, res){

*res.render('chat'**, { sessionId: req.session.id});

};

"app.get('/chat',chat);" - sends all GET requests of '/chat' to 'chat' function we have defined.

"res.render('chat', { sessionId: req.session.id}*);" - that line tells the engine to render 'chat.hjs' view, and to inject the user's session id.

Summary

In that part we created a basic chat view, and set some configurations to our server.

Now we are all set to create the communication between the clients and server.

Ohad Avenshtein's Blog

Sunday, July 7, 2013

Node.JS tutorial - Create a simple chat with socket.io module - Part 2

Creating the chat view

Summary

22 comments:

Thank you Blogger, hello Medium