Advertisement
  1. Code
  2. Web Development

Obrolan Real Time Dengan NodeJS, Socket.io dan ExpressJS

by
Difficulty:AdvancedLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Rossie (you can also view the original English article)

NodeJS memberi saya kemampuan untuk menulis kode back-end dalam salah satu bahasa favorit saya: JavaScript. Ini adalah teknologi sempurna untuk membangun aplikasi waktu nyata. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana membangun aplikasi obrolan web, menggunakan ExpressJS dan Socket.io.


Pengaturan Lingkungan

Tentu saja, hal pertama yang harus dilakukan adalah memasang NodeJS di sistem Anda. Jika Anda adalah pengguna Windows atau Mac, Anda dapat mengunjungi nodejs.org dan mengunduh penginstalnya. Jika Anda lebih suka Linux, saya sarankan Anda merujuk ke tautan ini. Meskipun saya tidak akan membahas lebih lanjut tentang hal ini, jika Anda menemukan masalah instalasi, saya senang membantu; tinggalkan komentar di bawah tulisan ini.

Setelah NodeJS diinstal, Anda siap mengatur instrumen yang diperlukan.

  1. ExpressJS - ini akan mengelola server dan respons terhadap pengguna
  2. Jade - mesin templat
  3. Socket.io - memungkinkan komunikasi waktu-nyata antara front-end dan back-end

Melanjutkan, dalam direktori kosong, buat file package.json dengan konten berikut.

Dengan menggunakan konsol (di bawah Windows - command prompt), navigasikan ke folder Anda dan jalankan:

Dalam beberapa detik, semua dependensi yang diperlukan akan diunduh ke direktori node_modules.


Mengembangkan Backend

Mari kita mulai dengan server sederhana, yang akan mengirimkan halaman HTML aplikasi, dan kemudian melanjutkan dengan bit yang lebih menarik: komunikasi waktu nyata. Buat file index.js dengan kode expressjs inti berikut:

Di atas, kita telah membuat aplikasi dan menetapkan port-nya. Selanjutnya, kita mendaftarkan rute, yang, dalam hal ini, adalah permintaan GET sederhana tanpa parameter apa pun. Untuk saat ini, pengendali rute hanya mengirim beberapa teks ke klien. Akhirnya, tentu saja, di bagian bawah, kita menjalankan server. Untuk menginisialisasi aplikasi, dari konsol, jalankan:

Server sedang berjalan, jadi Anda harus dapat membuka http://127.0.0.1:3700/ dan lihat:

Sekarang, alih-alih "It works" kita harus menyajikan HTML. Alih-alih HTML murni, dapat bermanfaat untuk menggunakan mesin template. Jade adalah pilihan yang sangat baik, yang memiliki integrasi yang baik dengan ExpressJS. Inilah yang biasanya saya gunakan dalam proyek saya sendiri. Buat direktori, bernama tpl, dan letakkan file page.jade berikut di dalamnya:

Sintaks Jade tidak begitu rumit, tetapi, untuk panduan lengkap, saya sarankan Anda merujuk ke jade-lang.com. Untuk menggunakan Jade dengan ExpressJS, kita memerlukan pengaturan berikut.

Kode ini menginformasikan Express di mana file templat Anda, dan mesin templat mana yang digunakan. Semuanya menentukan fungsi yang akan memproses kode templat. Setelah semuanya diatur, kita dapat menggunakan metode .render dari objek respons, dan cukup mengirim kode Jade ke pengguna.

Output tidak spesial pada saat ini; tidak lebih dari elemen div (yang berisi content id), yang akan digunakan sebagai penahan untuk pesan obrolan dan dua kontrol (kolom dan tombol input), yang akan digunakan untuk mengirim pesan.

Karena kita akan menggunakan file JavaScript eksternal yang akan menahan logika front-end, kita perlu memberi tahu ExpressJS di mana mencari sumber daya tersebut. Buat direktori kosong, public, dan tambahkan baris berikut sebelum panggilan ke metode .listen.

Sejauh ini baik; kita memiliki server yang berhasil merespons permintaan GET. Sekarang, saatnya untuk menambahkan integrasi Socket.io. Ubah baris ini:

untuk:

Di atas, kita melewati server ExpressJS ke Socket.io. Akibatnya, komunikasi waktu nyata kita masih akan terjadi pada port yang sama.

Ke depan, kita perlu menulis kode yang akan menerima pesan dari klien, dan mengirimkannya ke yang lain. Setiap aplikasi Socket.io dimulai dengan pengendali connection. Kita harus memiliki satu:

Objek, socket, yang diteruskan ke pawang Anda, sebenarnya adalah soket klien. Pikirkan itu sebagai persimpangan antara server Anda dan browser pengguna. Setelah koneksi berhasil, kita mengirim jenis pesan welcome, dan, tentu saja, mengikat penangan lain yang akan digunakan sebagai penerima. Akibatnya, klien harus memancarkan pesan dengan nama, send, yang akan ditangkap. Setelah itu, kita cukup meneruskan data yang dikirim oleh pengguna ke semua soket lainnya dengan io.sockets.emit.

Dengan kode di atas, back-end kita siap menerima dan mengirim pesan ke klien. Mari kita tambahkan beberapa kode front-end.


Mengembangkan Front-end

Buat chat.js, dan letakkan di dalam direktori public aplikasi Anda. Rekatkan kode berikut:

Logikanya dibungkus dengan .onload handler hanya untuk memastikan bahwa semua markup dan JavaScript eksternal dimuat penuh. Dalam beberapa baris berikutnya, kita membuat array, yang akan menyimpan semua pesan, objek socket, dan beberapa pintasan ke elemen DOM. Sekali lagi, mirip dengan back-end, kita mengikat fungsi, yang akan bereaksi terhadap aktivitas soket. Dalam kasus kita, ini adalah acara, bernama message. Ketika peristiwa semacam itu terjadi, kita berharap untuk menerima objek, data, dengan properti message. Tambahkan pesan itu ke penyimpanan kita dan perbarui content div. Kita juga menyertakan logika untuk mengirim pesan. Ini cukup sederhana, cukup memancarkan pesan dengan nama, send.

Jika Anda membuka http://localhost:3700, Anda akan menemukan beberapa kesalahan sembulan. Itu karena kita perlu memperbarui page.jade untuk memuat file JavaScript yang diperlukan.

Perhatikan bahwa Socket.io mengelola pengiriman socket.io.js. Anda tidak perlu khawatir mengunduh file ini secara manual.

Kita dapat lagi menjalankan server kita dengan node index.js di konsol dan membuka http://localhost:3700. Anda harus melihat pesan selamat datang. Tentu saja, jika Anda mengirim sesuatu, itu harus ditampilkan di konten div. Jika Anda ingin memastikan itu berfungsi, buka tab baru (atau, lebih baik, browser baru) dan muat aplikasi. Hal hebat tentang Socket.io adalah ia berfungsi bahkan jika Anda menghentikan server NodeJS. Front-end akan terus bekerja. Setelah server dinyalakan kembali, obrolan Anda juga akan baik-baik saja.

Dalam kondisi saat ini, obrolannya tidak sempurna, dan memerlukan beberapa peningkatan.


Perbaikan

Perubahan pertama yang perlu kita lakukan adalah identitas pesan. Saat ini, tidak jelas pesan mana yang dikirim oleh siapa. Hal baiknya adalah kita tidak perlu memperbarui kode NodeJS kita untuk mencapai ini. Itu karena server hanya meneruskan objek data. Jadi, kita perlu menambahkan properti baru di sana, dan membacanya nanti. Sebelum membuat koreksi ke chat.js, mari kita tambahkan bidang input baru, di mana pengguna dapat menambahkan namanya. Di dalam page.jade, ubah control div:

Selanjutnya, di code.js:

Untuk meringkas perubahan, kita telah:

  1. Menambahkan pintasan baru untuk bidang input nama pengguna
  2. Memperbarui presentasi pesan sedikit
  3. Menambahkan properti username baru ke objek, yang dikirim ke server

Jika jumlah pesan menjadi terlalu tinggi, pengguna perlu menggulir div:

Ingatlah bahwa solusi di atas kemungkinan tidak akan berfungsi di IE7 dan di bawah, tapi tidak apa-apa: sudah waktunya IE7 memudar. Namun, jika Anda ingin memastikan dukungan, jangan ragu untuk menggunakan jQuery:

Akan lebih baik jika bidang input dihapus setelah mengirim pesan:

Masalah membosankan terakhir adalah mengklik tombol send setiap kali. Dengan sentuhan jQuery, kita dapat mendengarkan ketika pengguna menekan tombol Enter.

Fungsi, sendMessage, dapat didaftarkan, seperti:

Harap dicatat bahwa ini bukan praktik terbaik, karena terdaftar sebagai fungsi global. Tapi, untuk tes kecil kita di sini, itu akan baik-baik saja.


Kesimpulan

NodeJS adalah teknologi yang sangat berguna, dan memberi kita banyak kekuatan dan kegembiraan, terutama ketika mempertimbangkan fakta bahwa kita dapat menulis JavaScript murni. Seperti yang Anda lihat, dengan hanya beberapa baris kode, kita berhasil menulis aplikasi obrolan real time yang berfungsi penuh. Cukup rapi!

Ingin mempelajari lebih lanjut tentang membangun aplikasi web dengan ExpressJS? Kita membantu Anda!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.