Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Real-Time Chat Dengan Node.js 'Readline & Socket.io

by
Read Time:8 minsLanguages:

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

Node.js memiliki modul yang kurang dihargai di perpustakaan standarnya yang sangat berguna. Modul Readline melakukan apa yang tertulis di dalam kotak: ia membaca garis input dari terminal. Ini dapat digunakan untuk mengajukan satu atau dua pertanyaan kepada pengguna, atau untuk membuat prompt di bagian bawah dari layar. Dalam tutorial ini, saya bermaksud untuk memamerkan kemampuan dari Readline dan membuat chatroom CLI real-time yang didukung oleh Socket.io. Klien tidak hanya akan mengirim pesan sederhana, tetapi memiliki perintah untuk emotes dengan/me, pesan pribadi dengan /msg, dan memungkinkan nama panggilan diubah dengan /nick.

Sedikit Tentang Readline

Ini mungkin penggunaan paling sederhana dari Readline:

Kami menyertakan modul, membuat antarmuka Readline dengan input dan output stream standar, lalu mengajukan satu pertanyaan kepada pengguna. Ini adalah penggunaan pertama dari Readline: mengajukan pertanyaan. Jika Anda perlu mengkonfirmasi sesuatu dengan pengguna, mungkin dalam bentuk yang paling populer, "Apakah Anda ingin melakukan ini? (Y / n)", yang meliputi alat CLI, readline.question() adalah cara untuk melakukannya.

Fungsi lain yang disediakan oleh Readline adalah prompt, yang dapat dikustomisasi dari karakter ">" defaultnya dan untuk sementara ditunda untuk mencegah input. Untuk klien obrolan Readline kami, ini akan menjadi antarmuka utama kami. Akan ada kemunculan tunggal dari readline.question() untuk meminta nama panggilan kepada pengguna, tetapi yang lainnya adalah readline.prompt().

Mengelola Ketergantungan Anda

Mari kita mulai dengan bagian yang membosankan: ketergantungan. Proyek ini akan menggunakan socket.io, paket socket.io-client dan ansi-color. File package.json Anda akan terlihat seperti ini:

Jalankan npm install dan Anda seharusnya siap.

Server

Untuk tutorial ini, kita akan menggunakan server Socket.io yang sangat sederhana. Tidak ada yang lebih mendasar dari pada ini:

Yang dilakukannya hanyalah mengambil pesan masuk dari satu klien dan meneruskannya ke semua orang. Server mungkin akan lebih kuat untuk aplikasi dengan skala yang lebih besar, tetapi untuk contoh sederhana ini, itu seharusnya memadai.

Ini harus disimpan dalam direktori proyek sebagai server.js.

Klien: Termasuk & Pengaturan

Sebelum kita sampai pada bagian yang menyenangkan, kita perlu memasukkan dependensi kita, mendefinisikan beberapa variabel, dan memulai antarmuka Readline dan koneksi soket.

Kode ini cukup jelas pada saat ini. Kami punya variabel nama panggilan kami, koneksi soket (melalui paket socket.io-client) dan antarmuka Readline kami.

Socket.io akan terhubung ke localhost melalui port 3636 dalam contoh ini, tentu saja ini akan diubah ke domain dan port server Anda sendiri, jika Anda membuat aplikasi obrolan produksi. (Tidak ada gunanya mengobrol dengan dirimu sendiri!)

Klien: Meminta Nama Pengguna

Sekarang untuk penggunaan Readline pertama kami! Kami ingin menanyakan pilihan nama panggilan kepada pengguna, yang akan mengidentifikasi mereka di ruang obrolan. Untuk ini, kami akan menggunakan metode Readline's question().

Kami mengatur variabel nick dari sebelumnya, ke nilai yang dikumpulkan dari pengguna, mengirim pesan ke server (yang akan diteruskan ke klien lain) bahwa pengguna kami telah bergabung dengan obrolan, lalu alihkan antarmuka Readline kembali ke mode prompt. Nilai true diteruskan ke prompt() memastikan bahwa karakter prompt ditampilkan dengan benar. (Kalau tidak, kursor dapat bergerak ke posisi nol pada baris dan ">" tidak akan ditampilkan.)

Sayangnya, Readline memiliki masalah yang membuat frustrasi dengan metode prompt(). Itu tidak cocok dengan console.log(), yang akan menampilkan teks ke baris yang sama dengan karakter prompt, meninggalkan "">"karakter liar di mana-mana dan keanehan lainnya. Untuk mengatasinya, kami tidak akan menggunakan console.log di mana pun di aplikasi ini, simpan untuk satu tempat. Sebagai gantinya, output harus diteruskan ke fungsi ini:

Solusi yang sedikit berantakan ini memastikan bahwa baris saat ini di konsol kosong, dan kursor berada di posisi nol sebelum mencetak output. Kemudian secara eksplisit meminta prompt untuk menjadi output lagi, sesudahnya.

Jadi untuk sisa tutorial ini, Anda akan melihat console_out () bukan console.log().

Klien: Menangani Input

Ada dua jenis input yang dapat dimasukkan pengguna: obrolan dan perintah. Kita mengetahui bahwa perintah diawali dengan garis miring, jadi mudah untuk membedakan keduanya.

Readline memiliki beberapa penangan acara, tetapi yang paling penting adalah line. Setiap kali karakter baris baru terdeteksi dalam aliran input (dari tombol kembali atau masukkan), peristiwa ini akan terjadi. Jadi kita perlu menghubungkan line dengan input handler kita.

Jika karakter pertama dari garis input adalah garis miring, kita tahu itu adalah perintah, yang akan membutuhkan lebih banyak pemrosesan. Kalau tidak, kami hanya mengirim pesan obrolan biasa dan mengatur ulang promptnya. Perhatikan perbedaan antara data yang dikirim melalui soket di sini dan untuk pesan gabung di langkah sebelumnya. Itu menggunakan type yang berbeda, sehingga klien penerima tahu cara memformat pesan dan kami meneruskan variabel nick juga.

Nama perintah (cmd) dan teks yang mengikuti (arg) diisolasi dengan sedikit regex dan substring magic, lalu kita meneruskannya ke fungsi yang memproses perintahnya.

Jika pengguna mengetik / nick gollum, variabel nick diatur ulang menjadi gollum, di mana itu mungkin smeagol sebelumnya dan pemberitahuan didorong ke server.

Jika pengguna mengetik /msg bilbo Where is the precious?, regex yang sama digunakan untuk memisahkan penerima dan pesan, maka objek dengan tipe tell didorong ke server. Ini akan ditampilkan sedikit berbeda dari pesan normal dan seharusnya tidak terlihat oleh pengguna lain. Diakui, server kami yang terlalu sederhana akan secara membabi buta mendorong pesan ke semua orang, tetapi klien akan mengabaikan memberitahu yang tidak ditujukan ke nama panggilan yang benar. Server yang lebih kuat bisa jadi lebih terpisah.

Perintah emote yang digunakan dalam bentuk /me is eating second breakfast. Julukan ini diawali dengan emote dengan cara yang seharusnya tidak asing bagi siapa pun yang telah menggunakan IRC atau memainkan permainan multipemain peran ganda, kemudian didorong ke server.

Klien: Penanganan Pesan Masuk

Sekarang klien membutuhkan cara untuk menerima pesan. Yang perlu kita lakukan adalah menghubungkan ke message event klien Socket.io dan memformat data dengan tepat untuk output.

Pesan dengan jenis chat yang tidak dikirim oleh klien menggunakan nama panggilan kami ditampilkan dengan nama panggilan dan teks obrolan. Pengguna sudah dapat melihat apa yang mereka ketikkan ke Readline, jadi tidak ada gunanya mengeluarkannya lagi. Di sini saya menggunakan paket ansi-color untuk sedikit mewarnai output. Ini tidak sepenuhnya diperlukan, tetapi membuat obrolan lebih mudah untuk diikuti.

Pesan dengan jenis notice atau emote dicetak apa adanya, meskipun berwarna cyan.

Jika pesannya adalah tell dan julukannya sama dengan nama klien saat ini, outputnya berupa [Somebody-> You] Hai!. Tentu saja, ini tidak terlalu pribadi. Jika Anda ingin melihat pesan semua orang, yang harus Anda lakukan adalah mengeluarkan bagian && data.to ==. Idealnya, server harus tahu klien mana yang mendorong pesan dan tidak mengirimkannya ke klien yang tidak membutuhkannya. Tetapi itu menambah kompleksitas yang tidak perlu yang berada di luar cakupan tutorial ini.

Jalankan!

Sekarang mari kita lihat apakah semuanya bekerja. Untuk mengujinya, luncurkan server dengan menjalankan node server.js dan kemudian buka beberapa jendela terminal baru. Di jendela baru, jalankan node client.js dan masukkan nama panggilan. Anda kemudian dapat mengobrol di antara mereka, dengan asumsi bahwa semuanya berjalan dengan baik.

.Semoga tutorial ini menunjukkan kepada Anda betapa mudahnya memulai dengan modul Readline. Anda mungkin ingin mencoba menambahkan lebih banyak fungsi ke aplikasi obrolan, untuk latihan lebih lanjut. Dan terakhir, checkout dokumentasi Readline untuk API lengkap.

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.