Node Version Manager

Perkembangan node js yang sangat cepat membuat kita harus meng upgrade versi dari node untuk bisa menikmati fitur fitur baru yang hanya jalan pada node dengan versi tertentu .
Salah satu contoh adalah ketika saya mencoba untuk men-debug node as a server dengan menggunakan chrome dev tools. syntaks yang saya gunakan adalah --inspect. Waktu itu saya menggunaka node versi v4.4.2

Namun ketika saya menjalankan syntaks debug tersebut , ternyata muncul error :

Setelah saya coba googling ternyata cause nya adalah version node yg saya gunakan tidak support syntaks tersebut . untuk itu saya harus meng-upgrade node yang saya pakai.

Ada banyak cara untuk meng upgrade version node , diantaranya adalah dengan menggunakan npm. Namun dari yang saya baca , upgrade dengan menggunakan npm tidak dianjurkan karena unstable dan bisa membuat kacau node module path, lalu disarankan menggunakan nvm atau node version manager.

Sesuai dengan namanya , nvm berfungsi untuk memanage node bahkan untuk multiple node. Hal ini sangat berguna jika anda ingin mengetest apakah sebuah aplikasi bisa berjalan lancar di versi node yang lain , tanpa harus ribet meng-unisntall current version node.

instalasi nvm sangat mudah , dengan curl :

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

atau wget :

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

lalu jalankan script berikut untuk mem-verify instalasi :

command -v nvm

Berikut ini command command yang sering digunakan :
Untuk menginstall node :

nvm install node 

Jika ingin menggunakan versi tertentu ex v6.8.1

nvm install v6.8.1

untuk melihat daftar node yang terinstall:

nvm ls

Untuk melihat versi node yang sedang kita pakai:

nvm current

Untuk melihat daftar node yang bisa kita install menggunakan nvm :

nvm ls-remote 

Jika ingin men swicth node yang ingin kita gunakan :

nvm use [node_version]

Anda bisa dengan mudah meng uninstall node yg sudah tidak dipakai dengan script berikut :

nvm uninstall [node_version]

Ada banyak lagi fungsi fungsi dari nvm yang bisa anda lihat disini
Demikian sedikit tips untuk me manage node dari saya , semoga bermanfaat :D

sumber :
https://github.com/creationix/nvm
https://davidwalsh.name/upgrade-nodejs

Starting AngularJS Development with Yeoman, Grunt and Bower Part 2

Sebelumnya pada part 1 kita sudah mengenerate project menggunakan angular generator dan sudah menambahkan library angular-bootstrap. Maka pada kesempatan kali ini kita akan menambahkan beberapa perubahan.
Mari kita tambahkan library AngularUI Boostrap yang sudah kita include di part 1. Dikarenakan Bower hanya package manager, dia tidak bertanggung jawab untuk menambahkan file ke index.html. Kita harus menambahkan itu sendiri.
Jadi buka app/index.htmldan tambahkan line code berikut.

 <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>  

Setelah itu kita harus menambahkan ui-boostrap dependency ke Angular module kita. Buka app/scripts/app.js dan tambahkan ui.bootstrap module sebagai dependency.
/app/scripts/app.js

 'use strict';  
 /**  
  * @ngdoc overview  
  * @name simpleAngularApp  
  * @description  
  * # simpleAngularApp  
  *  
  * Main module of the application.  
  */  
 angular  
  .module('simpleAngularApp', [  
   'ngAnimate',  
   'ngAria',  
   'ngCookies',  
   'ngResource',  
   'ngRoute',  
   'ngSanitize',  
   'ui.bootstrap'  
  ])  
  .config(function ($routeProvider) {  
   $routeProvider  
    .when('/', {  
     templateUrl: 'views/main.html',  
     controller: 'MainCtrl'  
    })  
    .otherwise({  
     redirectTo: '/'  
    });  
  });  

Kita harus melakukan beberapa perubahan pada view kita.
View: app/views/main.html

 <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p> <!-- kita memindahkan ng-repeat kedalam directive   
   modal yang dibawa oleh angular bootstrap-->  
   <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>  
   <!--ng-click sejenis event onClick dia akan melakukan sesuatu,   
   pada kasus ini ketika di klik angular akan membuka method open-->  
   </div>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
   <!-- script disini digunakan untuk mengenerate template modal -->  
   <script type="text/ng-template" id="myModalContent.html">  
     <div class="modal-header">  
       <h3 class="modal-title">I'm a modal!</h3>  
     </div>  
     <div class="modal-body">  
       <ul>  
     <!-- ng-repeat dipindahkan kedalam sini -->  
         <li ng-repeat="item in items">  
           <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>  
         </li>  
       </ul>  
       Selected: <b>{{ selected.item }}</b>  
     </div>  
     <div class="modal-footer">  
       <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>  
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>  
     </div>  
   </script>  
  </div>  

Controller : app/script/controller/main.js

 'use strict';  
 /**  
  * @ngdoc function  
  * @name simpleAngularApp.controller:MainCtrl  
  * @description  
  * # MainCtrl  
  * Controller of the simpleAngularApp  
  */  
 angular.module('simpleAngularApp')  
  .controller('MainCtrl', ['$scope','$uibModal','$log',function ($scope,$uibModal,$log) {  
  $scope.items = [  
     'HTML5 Boilerplate',  
     'AngularJS',  
     'Karma',  
     'SitePoint'  
    ];  
   $scope.animationsEnabled = true;  
  $scope.open = function (size) {  
   var modalInstance = $uibModal.open({  
    animation: $scope.animationsEnabled,  
    templateUrl: 'myModalContent.html',  
    controller: 'ModalInstanceCtrl',  
    size: size,  
    resolve: {  
     items: function () {  
      return $scope.items;  
     }  
    }  
   });  
   modalInstance.result.then(function (selectedItem) {  
    $scope.selected = selectedItem;  
   }, function () {  
    $log.info('Modal dismissed at: ' + new Date());  
   });  
  };  
  $scope.toggleAnimation = function () {  
   $scope.animationsEnabled = !$scope.animationsEnabled;  
  };  
 }]);  
 angular.module('simpleAngularApp').controller('ModalInstanceCtrl',['$scope','$uibModalInstance','items', function ($scope, $uibModalInstance, items) {  
  $scope.items = items;  
  $scope.selected = {  
   item: $scope.items[0]  
  };  
  $scope.ok = function () {  
   $uibModalInstance.close($scope.selected.item);  
  };  
  $scope.cancel = function () {  
   $uibModalInstance.dismiss('cancel');  
  };  
 }  
  ]);  

Kita sudah menggunakan beberapa bootstrap css class, membuat modal dialog menggunakan bawaan dari angular-bootstrap dan memindahkan ng-repeat ke dalam modal dialog.
Setelah ini jalankan code dibawah untuk menjalankan angular apps. Jangan lupa jalankan ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt serve  

Berikut tampilan nya jika dijalankan.

Sedangkan jika kita akan meminified nya jalankan code dibawah, hasilnya akan berada di dalam folder dist dan jalankan kode ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt clean build  

Sekian dahulu dari saya.
Semoga Bermanfaat !

Starting AngularJS Development with Yeoman, Grunt and Bower Part 1

Pada blog ini saya akan membahas tentang AngularJS. Salah satunya adalah membuat skeleton struktur AngularJS app dengan menggunakan Yeoman, kemudian menggunakan Grunt untuk mempercepat proses development.
Pertama-tama yang harus kita lakukan adalah menginstall Yeoman, Grunt dan Bower. Untuk mempermudah kita akan memakai Node Package Manager untuk melakukan nya sekaligus. Jalankan code berikut di dalam terminal.

 npm install -g yo grunt-cli bower  

Sambil menunggu instalasi, saya akan menjelaskan sedikit apa saja yang akan kita pakai. Yeoman digunakan untuk mengenerate skeleton app. Yeoman akan membuat basic folder, files, dan konfigurasi untuk mempermudah pekerjaan kita. Salah satu fitur terbaik dari Yeoman adalah kemampuan untuk menggunakan custom generator. Salah satu generator yang akan dipakai adalah AngularJS generator.
Jika proses instalasi di atas sudah selesai. Jalankan code berikut untuk menginstall AngularJS generator.

 npm install -g generator-angular  

Jika sudah, kita sudah bisa mengenerate AngularJS Application. Untuk mengenerate jalankan code berikut.

 yo angular  

Pada saat menjalankan generator, generator tersebut akan menanyakan beberapa pertanyaan tentang apa saja yang akan di include pada aplikasi Angular yang akan di generate.

Pada gambar di atas saya membuat aplikasi angular pada folder SimpleAngular. Setelah menjawab beberapa pertanyaan tersebut, Yeoman akan mengenerate semua file dan konfigurasi yang kita butuhkan. 
Berikut adalah yang digenerate oleh Yeoman.

app/directory
app directory berisi angular app. Di dalam nya terdapat html, css dan javascript. Disinilah kalian akan menghabiskan banyak waktu saat proses development.

package.json
File package.json membantu npm untuk mengindentifikasi project kita dan juga menghandle semua dependencies nya.

node_modules
Di folder ini terdapat semua node module yang kalian butuhkan oleh angular.

Gruntfile.js
File ini merupakan file javascript untuk menkonfigurasi project yang dilakukan oleh task apapun atau plugin apapun yang dibutuhkan di dalam project. Di file inilah kita akan mengkonfig spesifik direktori ketika akan membuild.

component.json
File ini digunakan untuk memberitahu dependencies kepada Bower package manager.
File ini dipakai untuk mendistribusi config options ke bower.

Karma files
Karma adalah sebuah framework untuk testing. Kita akan menggunakannya untuk menjalankan test pada Angular app.
Bower - Package Manager untuk Web
Sebelum kita menggunakan bower, ada sedikit configurasi yang harus kita tambahkan sendiri. Buka file .bowerrc

Pada gambar di atas adalah isi dari file .bowerrc yang belum di edit. Tambahkan code berikut.

 ,"json":"bower.json"  

Sehingga isi file tersebut menjadi :

Yang dilakukan pada code tersebut adalah memberitahu Bower untuk menggunakan package bower.json bagaimana menginstall package itu. Jika sudah jalankan code berikut untuk meng-fetch dependencies.

 npm install  

 bower install  

Bower  adalah package manager. Bower akan membantu kita untuk menemukan dan menginstall favorite CSS Frameworks, javascript libraries dan plugins hanya dengan menggunakan beberapa command yang mudah.
Sekarang kita akan menginstall Angular Boostrap. Jalankan code berikut untuk menambahkan library angular boostrap menggunakan Bower.

 bower install angular-bootstrap --save

--save berarti memberitahu bower untuk menambahkan angular-bootstrap ke file bower.json sebagai dependency.
Content pada app/directory

index.html
Ini merupakan core HTML page dari app kalian.

scripts/ directory
Disini adalah tempat javascript apps kalian berada.

styles/ directory
Disini adalah tempat css/sass kalian berada.

Views
Disini adalah tempat halaman template kalian berada.

Modul: /app/scripts/app.js

'use strict';

/**
* @ngdoc overview
* @name simpleAngularApp
* @description
* Main module of the application.
* # simpleAngularApp
**/

//Disini kita mengeset angular module
angular.module('simpleAngularApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize'
  ])
  .config(function ($routeProvider) {

//Disini kita mengconfig routerProvider
//route provider dipakai untuk meng-config app routes kita.
//views/main.html template menggunakan MainCtrl sebagai controllernya.
//config dibawah simpelnya jika kita membuka '/' itu akan membuka
//Method lain yang tidak terdaftar akan teridirect ke home.

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }); 

Controller: /app/scripts/controllers/main.js

 'use strict';

/**
 * @ngdoc function
 * @name simpleAngularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the simpleAngularApp
 */

angular.module('simpleAngularApp') //ini cara memasukkan controller ke dalam module
//Kita menginject $scope ke dalam dependency Angular

.controller('MainCtrl', ['$scope',function ($scope) {
//Pada kasus ini kita menambahkan collection awesomeThings untuk di display di view.
//Apapun yang kita masukkan ke dalam scope akan bisa ditampilkan di view.

 $scope.items = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma',
        'SitePoint'
      ];
}]);

View: app/views/main.html

  <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p>  
   <ul>  
     <!-- Disini kita menggunakan AngularJS Directive  
     untuk menghitung jumlah item yang di declare di items   
     dan menampilkan mereka sebagai list item menggunakan tag {{}} -->  
     <li ng-repeat="thing in items">{{thing}}</li>  
   </ul>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
  </div>  

View: app/index.html

 [html] <!doctype html>  
  <html>  
   <head>...</head>  
   <!-- ng-app directive memberitahu angular module mana yang kita pakai.  
   Pada kasus ini yang kita define di scripts/app.js -->  
   <body ng-app="simpleAngularApp">   
    <!-- ng-view directive menspesifik template view yang akan di load di div ini-->  
    <div class="container" ng-view></div>  
    <!-- Disini kita load AngularJS dan AngularJS resource komponen -->  
     <script src="bower_components/jquery/dist/jquery.js"></script>  
     <script src="bower_components/angular/angular.js"></script>  
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>  
     <script src="bower_components/angular-animate/angular-animate.js"></script>  
     <script src="bower_components/angular-aria/angular-aria.js"></script>  
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>  
     <script src="bower_components/angular-resource/angular-resource.js"></script>  
     <script src="bower_components/angular-route/angular-route.js"></script>  
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>  
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>   
    <!-- Disini kita memasukan script yang kita gunakan -->  
    <!-- build:js scripts/scripts.js -->  
    <script src="scripts/app.js"></script>  
    <script src="scripts/controllers/main.js"></script>  
    <!-- endbuild -->  
   </body>  
  </html>  

Sampai disini kita sudah membuat Angular App dan sudah sedikit tahu tentang komponen komponen yang di generate. Berikut tampilan nya jika dijalankan.

Pada kesempatan berikut nya kita akan sedikit mengedit dari apa yang sudah di generate. Bersambung ke part 2...

Aplikasi chat berbasis web menggunakan Socket.io dan NodeJS - Part 2

Pada kesempatan kali ini saya akan melanjutkan pengembangan aplikasi yang tertunda pada Part 1.

Server Logic

Seperti yang sudah saya jelaskan pada postingan sebelumnya, fungsionalitas server terdapat pada file "server.js".

Pada file ini kita akan menambahkan kode untuk menghandle request Socket.io dari client (seperti yang telah di jelaskan sebelumnya Socket.io juga berjalan di client - pada kasus ini web browser)

Integrasikan Socket.io dengan meng-declare nya ke dalam kode sumber:

var express = require('express'), 
    socketIO = require('socket.io'), 
    app = express(), 
    port = 3000 
    ;

Cari baris berikut:

app.listen(port, function(){ 
    console.log('listening on *:' + port); 
});

dan rubah menjadi:

var server = app.listen(port, function(){ 
    console.log('listening on *:' + port); 
}); 

/** 
 * Setup socket.io server untuk meng-handle request 
 * dari library socket.io yang berjalan pada browser 
 */ 
var io = socketIO.listen(server);

Saat ini server Socket.io sudah siap menerima koneksi dari client. Socket.io adalah system yang
berbasis event (event-based) jadi untuk menerima koneksi dari client kita hanya harus membuat
event handler untuk event yang bernama "connection".

io.on('connection', function (socket) {

 // Disini kita akan meng-handle client yang melakukan koneksi 

});

Selanjutnya tambahkan kode yang akan menerima pesan dari client dan mem-broadcast nya
ke semua client:

var users = []; 
var sockets = []; 

io.on('connection', function (socket) {

    socket.on('message', function(message){ 
    
        if (message.type === 'text') {
            console.log('Text Message: ' + message.text); 
            io.emit('message', message); 
        } 

    }); 

});

Jika anda perhatikan saya menggunakan method emit pada object io bukan pada object socket, ini bertujuan untuk mem-broadcast pesan ke semua client tidak hanya pada client yang mengirim pesan saja (sender).

Aplikasi juga harus menyimpan daftar user yang sedang online, dan mem-broadcast nya ke semua client. Untuk itu kita akan merubah sedikit kode di atas menjadi:

io.on('connection', function (socket) {

    socket.on('message', function(message){ 
    
        if (message.type === 'user') {
            console.log('User connected: ' + message.user.name);    
            users.push(message.user); 
            sockets.push(socket); 
            for (var i = 0; i < users.length; ++i) {
                io.emit('connected', users[i]);   
            }               
        } 
        else if (message.type === 'text') {
            console.log('Text Message: ' + message.text); 
            io.emit('message', message); 
        } 

    }); 

});

Ok, Selesai...

Not so fast :), ingat bahwa aplikasi ini terdiri dari dua bagian, kita juga harus menambahkan fungsionalitas dari sisi client.

Client Logic

Pertama-tama kita akan men-setup library Socket.io pada client.
Masukkan (include) library Socket.io pada file "index.html":

<script src="/socket.io/socket.io.js" type="text/javascript"></script>

Dan tambahkan kode berikut di bagian paling bawah body tag (sebelum </body>):

<script src="/socket.io/socket.io.js<script type="text/javascript"> 
        var socket = io(); 
</script>

Yup, hanya ini yang di butuhkan untuk meng-setup library Socket.io di client, sangat mudah bukan!
Anda pasti bertanya-tanya kenapa saya me-refer ke "/socket.io/socket.io.js" pada include tag di atas,
sementara file tersebut tidak dapat di temukan pada root folder dari server. Ini karena Socket.io pada
sisi server akan otomatis membuat file tersebut (generated on-the-fly) saat server berjalan.

Untuk tujuan identifikasi client harus mengirim "username" pada saat pertama kali berjalan.
Tambahkan code berikut pada <script> tag:

var current_user = null;        
var socket = io(); 

function User(name) { 
    this.name = name; 
} 

function createUserMessage(user) { 
    return { type: 'user', user: user };
} 

if (!current_user) { 
    var text = prompt('Your username: ');
    if (!text) { 
        window.location = '/'; 
    } 
    current_user = new User(text); 
} 

// kirim username ke server 
socket.emit('message', createUserMessage(current_user)); 

Kode tersebut akan mengecek apakah user sudah memberikan username, bila belum browser akan
meminta memasukkan terlebih dahulu. Ini akan terus terjadi selama user tidak memberikan
username yang valid (kosong/empty). Jika username yang di berikan adalah valid akan di kirim
ke server.

Jika anda lihat pada file "index.html", terdapat tag yang berfungsi untuk men-display
list dari user yang sedang online:

<div id="side"> 
    <p class="header">Online</p> 
    <ul id="user-list"> 
        <!--<li class="current-user">Fani</li>--> 
    </ul> 
</div>

Ketika ada client yang baru server akan mem-broadcast event "connected", kita dapat men-dengar (listen) event ini dan mem-populate list pada html dengan data yang di return oleh server.

function addToList(id, value, clazz, distinct) {  
    var ul = document.getElementById(id);  
    if (distinct) {  
        if (indexOfList(id, value) > -1) {  
            return;  
        }  
    }  
    var li = document.createElement('li');
    if (clazz) li.className = clazz;  
    li.innerHTML = value;  
    ul.appendChild(li);  
} 

function indexOfList(id, value) { 
    var ul = document.getElementById(id); 
    for (var i = 0; i < ul.children.length; ++i) {
        if (ul.children[i].innerHTML === value) { 
            return i; 
        } 
    } 
    return -1; 
} 

// update list user yang sedang online 
socket.on('connected', function(user) { 
    addToList('user-list', 
              user.name, 
              user.name == current_user.name ? 'current-user' : null, 
              true); 
});

Dan tentunya kita juga harus meng-handle pesan text yang di masukkan oleh user:

function createTextMessage(text, user) { 
    return { type: 'text', text: text, user: user };
} 

// kirim message ke server saat user menekan tombol Enter 
document.forms[0].messageText.onkeypress = function onKeyUp(evt) {
     if (evt.keyCode == 13) {
          socket.emit('message', createTextMessage(this.value, current_user));
          this.value = null;
          evt.preventDefault(); 
      }           
}

Dan men-display pesan text dari semua user:

// handle message yang diterima dari server 
socket.on('message', function(message){ 
          
    if (message.type == 'text') {
        addToList('messages', message.user.name + ': ' + message.text,
            message.user.name === current_user.name ? 'my-message' : null); 
    }   
          
});

Aplikasi sudah fungsional, untuk mencoba jalankan server:

$ node server.js

dan buka alamat berikut di dua browser window/tab: http://localhost:3000

Pada masing-masing window, login dengan dua username yang berbeda, dan mulai chatting.
Anda dapat melihat bahwa saat terdapat perubahan pada halaman di satu browser window, halaman pada browser window yang lain juga mengalami perubahan.

Untuk meng-handle user yang sudah tidak online (meng-hapus nya dari list), saya serahkan kepada anda sebagai bahan pembelajaran. Saya sudah menyiapkan source code nya di sini sebagai bahan referensi.

Sekian, semoga bermanfaat!

Demo

Aplikasi chat berbasis web menggunakan Socket.io dan NodeJS - Part 1

Sebagai konsultan, kami di Nostra seringkali mendapat kesempatan dan di-haruskan bekerja langsung on-site di kantor client dengan memakai PC yang telah di-sediakan dan biasanya akses administratif serta jaringannya di lock-down sesuai dengan policy perusahaan tersebut.

Sering kali komunikasi antar team member menjadi terhambat apalagi kalau meja-nya saling berjauhan, karena tidak mungkin saling bersautan dengan nada suara tinggi atau menghampiri kesana kemari hanya untuk hal kecil yang tidak membutuhkan lisan (misal: Technical Leader menginformasikan kesalahan kecil yg terdapat dalam aplikasi yang sedang dikerjakan, sehingga programmer dapat langsung dapat memperbaikinya). Masalah ini dapat di tanggulangi dengan memakai IM seperti Skype, tetapi biasanya tidak memungkinkan karena policy dari perusahan client.

Hal inilah yang menginspirasi saya untuk membuat aplikasi chat sederhana berbasis web (Ya..., akses ke internet melalui web browser pada umumnya tidak di anggap "membahayakan" secara internal sehingga di perbolehkan) yang nantinya dapat berguna bagi kami yang sedang bekerja di kantor client dan mengalami masalah serupa.

Technical Feasibility

Untuk membuat aplikasi ini kita membutuhkan suatu teknologi yang memungkinkan komunikasi dua arah (full-duplex) antara web browser dan server sehingga data di web browser akan terupdate secara real-time apabila data yang di server mengalami perubahan. Seperti yang sudah kita ketahui aplikasi web dibangun di atas protokol HTTP di mana protokol ini tidak men-support komunikasi dua arah (biderectional communication) antara client (web browser) dan server. Untuk mengakali keterbatasan protokol HTTP ini, ada dua teknik yang pada saat ini di pakai, yaitu:

1. Periodic Polling, yaitu teknik di mana si Client melakukan request secara berkala ke Server untuk menge-cek apakah ada data yang baru dan kemudian melakukan update pada data yang sedang display. 
2. Long-polling, yaitu teknik dimana si Client melakukan request untuk menge-cek apakah ada data yang baru namun si Server tidak langsung me-respon tetapi akan menjaga (hold) koneksi tetap terbuka selama tidak terdapat data yang baru. Teknik long-polling inilah yang saat di pakai untuk membuat aplikasi chat berbasis web seperti Gmail chat, Facebook chat, dll.

Sebagai alternatif dari dua teknik tradisional di atas, kita dapat menggunakan fitur HTML5 terbaru yaitu WebSocket, tetapi karena standar HTML5 relatif masih baru, hanya beberapa browser versi terbaru yang men-support WebSocket sehingga kurang fleksibel.

Socket.io

Socket.io adalah library JavaScript yang memungkinkan komunikasi real-time antara web browser dan server. Library ini terdiri dari dua bagian, yang berjalan pada web browser dan yang berjalan pada server sebagai NodeJS module. Socket.io akan menggunakan WebSocket sebagai sarana tansport utama dan akan meng-fallback ke beberapa teknik transport lainnya apabila WebSocket tidak tersedia, seperti Flash (menggunakan socket), Ajax long-pooling, atau iframe, sehingga tetap dapat berjalan walaupun browser tidak meng-support WebSocket. Socket.io juga memiliki fitur yang sangat berguna yaitu dengan sendirinya akan mencoba membuat ulang koneksi (reconnect) apabila koneksi terputus.

Environment Setup

Karena Socket.io berjalan di atas NodeJS sebagai module, kita harus terlebih dahulu meng-install NodeJS. Jika anda memakai Windows atau Mac bisa langsung ke http://nodejs.org/download untuk men-download installer nya. Karena saya memakai ArchLinux jadi saya akan menginstall lewat pacman:

$ pacman -S nodejs

(untuk distro linux lainnya bisa mengikuti langkah-langkah yang di berikan disini)

Setelah NodeJS terinstall, lanjutkan dengan meng-install module-module yang di perlukan yaitu:
- Socket.io : library utama yg akan di gunakan
- ExpressJS : http server framework untuk NodeJS (ini akan digunakan untuk melayani file html ke browser)

Untuk meng-install nya kita akan menggunakan Node Package Manager (npm) yang sudah tersedia pada saat kita menginstall NodeJS.

Agar aplikasi yang akan di buat lebih terstruktur, semua file-file yang bersangkutan akan di letakkan pada satu tempat.
Buat folder NostraChat. Folder ini akan digunakan sebagai project root.

$ mkdir NostraChat
$ cd NostraChat

Buat file package.json pada folder tersebut dengan isi sebagai berikut:

{
    "name": "NostraChat",
    "version": "1.0.0",
    "description": "Simple Chat Web App",
    "dependencies": {
        "socket.io": "latest",
        "express": "latest"
    },
    "author": "nostra-dev"
}

Lalu di console jalankan perintah:

$ npm install

Ini akan membutuhkan beberapa waktu karena npm harus men-download module-module tersebut dari internet. Saat npm selesai, module-module tersebut akan ter-install di ./node_modules

Struktur Aplikasi

Aplikasi chat yang akan kita kembangkan ini terdiri dari server (backend) dan sebuah file html sebagai halaman utama (front-end).

Langkah pertama adalah menyiapkan server untuk me-respon dengan halaman utama yang berupa
file html saat mendapatkan request dari web browser. Buat sub-folder "public", dan di dalam folder ini buat file bernama "index.html" dengan isi sebagai berikut:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Nostra Chat</title> 
    <style type="text/css"> 
        body, div, p { margin: 0; padding: 0; } 
        body { font-family: "Arial"; } 
        form { position: fixed; bottom: 0; width: 100%; margin: 0; padding: 0; } 
        form textarea { width: 100%; height: 50px; padding: 10px; margin: 0; border: 1px solid #bbb; }
        #messages { list-style-type: none; margin: 0; padding: 0; background: #fff; } 
        #messages li { padding: 5px 10px; }         
        #main { 
            width: 85%; 
            margin: 10px; 
        } 
        #side { 
            width: 15%; 
            background: #fff; 
            position: absolute; 
            top: 0; bottom: 75px; right: 0; 
            border: 1px solid #bbb; 
        } 
        #side .header { 
            background: #eee; 
            color: #333; 
            margin: 0; 
            padding: 5px 10px; 
            font-weight: bold; 
            position: relative; 
            border-bottom: 1px solid #bbb; 
        } 
        #side .header p { 
            width: 100%; 
        } 
        #side .header #logout { 
            text-align: right; 
            position: absolute; 
            right: 10px; 
            text-decoration: none; 
            color: #888; 
        } 
        #side .header #logout:hover { 
            color: #333; 
        } 
        #user-list { 
            list-style-type: none; margin: 0; padding: 0; 
            padding: 5px 10px; 
        } 
        #user-list .current-user { font-weight: bold; } 
    </style> 
</head> 

<body> 
    <div id="main"> 
        <ul id="messages"> 
            <!--<li class="my-message">Hi server</li>--> 
            <!--<li>Hello client</li>--> 
        </ul> 
    </div> 
     
    <div id="side"> 
        <p class="header">Online</p> 
        <ul id="user-list"> 
            <!--<li class="current-user">Fani</li>--> 
        </ul> 
    </div> 
     
    <form action=""> 
      <textarea name="messageText" autocomplete="off"></textarea> 
    </form>       
</body> 
</html>

Kode untuk men-setup server di letakkan pada file bernama "server.js" di project root (NostraChat).
File ini akan di jalankan (execute) oleh NodeJS.

Adapun isi dari file server.js tersebut adalah sebagai berikut, kodenya sudah saya berikan comment, jadi saya rasa sudah menjelaskan dengan sendiri-nya :)

var express = require('express'), 
    app = express(), 
    port = 3000 
    ; 

/** 
 * Meng-konfigurasi express untuk meng-look-up file html 
 * dari directory bernama "public" 
 */ 
app.use(express.static(__dirname + '/public')); 

/** 
 * Pada saat browser me-request path "/" 
 * response dengan file bernama "index.html" 
 */ 
app.get('/', function(req, res){
    res.sendfile('index.html'); 
}); 

/* 
 * Meng-konfigurasi express untuk listen pada 
 * port yang telah di tentukan 
 */ 
app.listen(port, function(){ 
    console.log('listening on *:' + port); 
});

Jalankan server dengan:

$ node server.js

Lalu buka di browser: http://localhost:3000

So far so good, halaman utama aplikasi sudah berjalan tetapi belum fungsional, di sinilah saatnya kita meng-integrasikan Socket.io pada aplikasi agar menjadi fungsional.

Stay tuned for Part 2...