Thursday, July 05, 2012

Fiddle with EJS filters

Lets play with EJS filters a bit. Lets pay greetings to the first user in the array of names with a message as "Welcome <firstname> <lastname>"

Lets take the names in an array of objects as below:

var names = [{first: 'John', last: 'Scott'},
             {first: 'Rob', last: 'Miller'}];

Now lets create a filter to create the message, in this filter the first selected object will be passes, which comes from the previous filter "first"

ejs.filters.greeting = function(user){
  return 'Welcome ' + user.first + ' ' + user.last + '';
};

The call to the filter is made in the index.ejs file as below, here insted of first you can can also use last filter

<%=: users | first | greeting %>

Lets see the whole program.

server.js
var express = require('express');
var io = require('socket.io');
var http = require('http');
var ejs = require('ejs');
 
var app = express();
var server = http.createServer(app);
 
var names = [{first: 'John', last: 'Scott'},
             {first: 'Rob', last: 'Miller'}];
 
app.configure(function(){
  app.use(express.bodyParser());
  app.use(app.router);
  app.use(express.static(__dirname + '/'));
  app.set('view engine', 'ejs');
  app.set('view options', {
    layout: false
  });
});
 
ejs.filters.greeting = function(user){
  return 'Welcome ' + user.first + ' ' + user.last + '';
};
 
app.get('/', function(req, res) {
  res.render('index', {
    title : 'Welcome to Express EJS',
    users: names
  });
});
 
server.listen(8080);

index.ejs
<html>
 
<head>
<title><%= title %></title>
</head>
 
<body>
<p><%=: users | last | greeting %></p>
</body>
 
</html>

Simple application using ExpressJS, SocketIO & EJS

I came across EJS (JSP look-a-like for Node) and fell in love at first site, there are some other view rendering engines like Jade, but EJS clicked me as I saw it. So just went down to have a look my first app. There were some problems I faced regarding the API changes made in express latest version which I resolved with some googling. Lets get down to the code.

Create the test application with folder structure as below.

server.js
var express = require('express');
var io = require('socket.io');
var http = require('http');
 
var app = express();
var server = http.createServer(app);
var listener = io.listen(server);
 
app.configure(function(){
  app.use(express.bodyParser());
  app.use(app.router);
  app.use(express.static(__dirname + '/views'));
  app.set('view engine', 'ejs');
  app.set('view options', {
    layout: false
  });
 
});
 
app.get('/', function(req, res) {
  res.render('index', {
    title : 'Welcome to Express EJS',
    message : 'Below you will see the message recieved via socket.io event'
  });
});
 
listener.on('connection', function (socket) {
 
  console.log('Connection to client established');
 
  socket.emit('news', 'This is the news');
 
  socket.on('newsresponse', function (data) {
    console.log(data);
  });
 
  socket.on('disconnect',function(){
    console.log('Server has disconnected');
  });
 
});
 
server.listen(8080);

index.ejs
<html>
<head>
<title><%= title %></title>
<script src="/socket.io/socket.io.js"></script>
<script src="/jquery.min.js"></script>
 
<script>
var socket = io.connect('http://localhost:8080');
 
socket.on('connect',function() {
  console.log('Client has connected to the server!');
});
 
socket.on('news', function (data) {
  $("#iomsg").html(data);
  socket.emit('newsresponse', 'this is news response');
});
</script>
 
</head>
 
<body>
<p><%= message %></p>
<div style="color:#3333ff;" id='iomsg'></div>
</body>
 
</html>

If you come across any undefined modules, just do and "npm install <module>". Run the server "node server.js" and then try to access "http://localhost:8080"

Wednesday, July 04, 2012

Exploring ExpressJS & Socket.IO

The next line of action today was to check the working of Socket.IO along with Express. Took me a while to get my sample working, here it goes if someone likes to use.

Index.html to be present in the same directory.

<html>
<head>
<title>Test - Node Views</title>
<script src="/socket.io/socket.io.js"></script>
 
<script>
var socket = io.connect('http://localhost:8080');
 
socket.on('connect',function() {
  console.log('Client has connected to the server!');
});
 
socket.on('news', function (data) {
  console.log(data);
  socket.emit('newsresponse', 'this is new response');
});
</script>
 
</head>
 
<body bgcolor="#ffffff" text="#000000"></body>
 
</html>

Server.js

var express = require('express');
var io = require('socket.io');
var http = require('http');
 
var app = express();
var server = http.createServer(app);
var listener = io.listen(server);
 
app.configure(function(){
  app.use(app.router);
  app.use(express.static(__dirname + '/'));
});
 
listener.on('connection', function (socket) {
 
  console.log('Connection to client established');
 
  socket.emit('news', 'this is the news');
 
  socket.on('newsresponse', function (data) {
    console.log(data);
  });
 
  socket.on('disconnect',function(){
    console.log('Server has disconnected');
  });
 
});
 
server.listen(8080);