Membuat aplikasi chat sederhana dengan NodeJS, express dan Socket.io

Sudah lama penulis tidak melanjutkan tutorial NodeJS series, pada akhir tutorial sebelumnya http://programming.terataiilmu.com/instalasi-framework-express/ seharusnya kita akan membuat CRUD dengan NodeJS, tetapi karena ada masalah dalam menginstal database mongodb terbaru yang mulai tidak support di OS windows 7, maka untuk tutorial CRUDnya kita tunda dulu. Kali ini kita akan membuat aplikasi NodeJS tanpa menggunakan database, yaitu aplikasi chat.

Agar terarah dan sesuai dengan tutorial sebelumnya, kali ini tutorial NodeJS akan menggunakan framework Express dan bantuan module Socket.io. untuk informasi pembuatan aplikasi kali ini menggunakan Express JS versi 4.14

Langkah membuat aplikasi chat sederhana

Untuk membantu atau bagi yang belum terlalu jelas langkahnya atau yang baru membaca posting saya ini, silahkan baca tutorial-tutorial sebelumnya terutama http://programming.terataiilmu.com/instalasi-framework-express/, hingga langkah ke 5.

  1. Bagi yang sudah paham dengan langkah dasar NodeJS dapat melanjutkan dengan membuat proyek baru dengan nama “Rembug” . Secara cepat dari awal buka CMD atau command, pindah ke folder C:\\nodejs (tempat menyimpan proyek NodeJS) dengan ketik CD C:\\nodejs
  2. Buat proyek baru dengan mengetik express rembug –e
  3. Buka folder tersebut di direktori C:\\nodejs\rembug , dan edit package.json dan tambahkan ejs-locals dan socket.io sehingga menjadi kode dibawah ini
  4. Setelah di edit ketik perintah cd rembug && npm install
  5. Pada app.js tambahkan beberapa baris kode dibawah var app=express() sehingga menjadi seperti ini
  6. Selanjutnya kita buat tampilan untuk chatnya dengan merubah isi dari file \views\index.js
  7. Perbaiki tampilan dengan mengubah file style.css pada folder \public\stylesheets
  8. Sekarang kita akan bermain dengan Socket.io, buat file javascript baru pada folder \public\javascripts dengan nama client.js
  9. Kembali lagi ke file app.js dan tambahkan di atas script module.exports = app
  10. Penerapan script selesai, sekarang kita kembali lagi ke command dan ketikan perintah npm start
  11. Buka browser dan ketik localhost:3000 (secara default port 3000)

contoh basic chat nodejs

Jika muncul tampilan seperti di atas, maka aplikasi yang kita buat berhasil, untuk mengujinya buka tab browser baru dan ketik localhost:3000, coba lakukan simulasi chat antar tab browser.

Leave a Reply

Your email address will not be published. Required fields are marked *