Thursday, July 05, 2012

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"

No comments:

Post a Comment