Node.js, Socket.io & TerrificJS

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

Schon vor längerer Zeit habe ich den Begriff Node.js im Internet mal aufgeschnappt und einfache Beispiele gesehen. Dabei hatte ich aber nie Zeit, dieses Framework genauer anzuschauen. Mit einfachen Beispielen wie einen Chat (realtime) kann man in die Welt des Node.js reinschnuppern. Was sich aber hinter den Kulissen abspielte, war mir verborgen geblieben.

Das alljährliche Namics Lab war der perfekte Zeitpunkt dafür, einen genaueren Einblick in dieses misteriöse Framework zu werfen. Eineinhalb Tage abgeschottet in einem Hotel, weit weg von der Zivilisation, fand diesesmal das Lab von Team Thomas im Boldern, Männedorf statt. Unser Node.js Team bestand aus den Software Engineers Philip Althaus, Stefan Maurer und mir und dem Frontend Engineer Thomas Junghans – eine perfekte Mischung!

Nach dem ersten Brainstorming, haben wir uns entschieden einen realtime Chat zu implementieren. Natürlich war uns das zu einfach, also setzten wir noch einen drauf. Der Chat sollte noch interaktiver sein, d.H. Jeder User bekommt einen Avatar und kann auf einer Karte frei herumlaufen. Dabei bewegen sich andere User auch realtime auf der Karte herum und können sprechen/schreien. Die Idee des „Fantastic Chat“ war geboren…

Was ist 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

Was ist Node.js?

Node.js ist ein serverseitiges JavaScript-Framework zum Erstellen von Server- und Konsolenanwendungen. Es setzt mit der JavaScript-Engine V8 von Google eine sehr schnelle JavaScript-Implementierung ein…

Was ist 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.

Selber Austesten? Klar!

Source herunterladen und entpacken.

Node.js installieren: http://www.nodejs.org/#download
Praktisch für OSX: https://sites.google.com/site/nodejsmacosx/

Zeile 1 im app.js anpassen. Hier wird der Chatserver definiert. „8000“ kann auf gewünschter Port umkonfiguriert werden.

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

Zeile 6 in /public/javascripts/utils/dynamic/Fc.Socket.js muss auch der Port angepasst werden (Gleicher Port wie im app.js). Hier wird die Connection zu dem Chatserver definiert.

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

Chatserver in der Konsole starten

$node app.js
   info  - socket.io started

Und hier noch meine 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

Nun auf http://localhost zugreifen und spass haben 😉

Quellen: