Node.js, Socket.io & TerrificJS

Live Demo: http://chat.designixx.com

Long time ago I read the first time about something called Node.js in various blogs and on websites. Sadly, I didn’t have any free time, to have a closer look at this Framework.

The yearly Namics Lab event was perfect, to get some insights about this mysterious framework and learn something about it. One and a half day, isolated in a hotel, far away from civilization in Boldern, Männedorf – This was Namics Lab. Our Team consisted of Software Engineers Philip Althaus, Stefan Maurer, me and of the Frontend Engineer Thomas Junghans. Perfect mix!

After the first brainstorming session, we decided to implement a real-time chat. Of course we didn’t want to do just a text chat, we wanted to try out some more stuff. Our goal was to implement a visual chat with avatars, a map, collision detection and a shout feature. The idea of “Fantastic Chat” was born…

What is TerrificJS?

TerrificJS is a neat, clever piece of code that allows you to modularize your jQuery code by solely relying on the OOCSS naming conventions

What is Node.js?

Node.js is an open-source, cross-platform runtime environment for developing server-side web applications. It uses Google V8 JavaScript engine to execute code.

What is Socket.io?

Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It’s care-free realtime 100% in JavaScript.

Want to try it out yourself? Shure!

Download source and unzip it.

Install Node.js: http://www.nodejs.org/#download (for OSX: https://sites.google.com/site/nodejsmacosx/)

Modify line 1 in the file app.js. The chat server is defined here. You can configure a port number (in our case 8000).

var io = require('socket.io').listen(8000), count = 0;

Modify Line 6 in the file /public/javascripts/utils/dynamic/Fc.Socket.js. You have to put the same port here as defined before. This describes the connection from the client to the chat server.

var connection = io.connect('http://localhost:8000');

Start chat server in console.

$node app.js
   info  - socket.io started

And here, have a look at my XAMPP VHOST config:

    DocumentRoot /Applications/XAMPP/xamppfiles/htdocslab/node/trunk/public
    Servername fantachat

    	AddType application/x-httpd-php .php .phtml .html
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all

Now, access http://localhost and have fun 😉

Quellen: