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

Pesan Real-Time untuk Meteor Dengan Meteor Streaming

by
Difficulty:IntermediateLength:MediumLanguages:

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

Ini adalah 2013. Jika Anda akan membangun aplikasi web, Anda harus menambahkan kemampuan waktu nyata ke aplikasi. Itu adalah standar. Meteor melakukan pekerjaan yang cukup baik dalam membantu Anda membangun dan membuat aplikasi secara cepat. Tetapi meteor sangat erat digabungkan dengan MongoDB dan itu adalah satu-satunya cara untuk menambahkan kemampuan waktu nyata. Terkadang, ini berlebihan.

MongoDB adalah pasangan yang cocok untuk Meteor. Tetapi kita tidak perlu menggunakan MongoDB untuk semua aktivitas waktu nyata kita. Untuk beberapa masalah, solusi berbasis perpesanan berfungsi dengan sangat baik. Ini adalah masalah yang sama yang juga ditangani oleh pubnub dan real-time.co.

Alangkah baiknya jika kita bisa memiliki pendekatan hibrid ke waktu nyata, di Meteor, menggabungkan pendekatan berbasis Koleksi MongoDB dan pendekatan berbasis Perpesanan. Maka Meteor Streams dilahirkan untuk menambahkan komunikasi real-time berbasis pesan ini ke Meteor.


Memperkenalkan Aliran Meteor

Stream adalah blok bangunan dasar dari Meteor Streams. Ini adalah EventEmitter waktu-nyata. Dengan Stream, Anda dapat mengirim pesan bolak-balik antara klien yang terhubung. Ini sangat mudah dikelola dan memiliki model keamanan yang sangat baik.

Mari Kita Coba

Mari kita buat aplikasi chat berbasis konsol konsol yang sangat sederhana dengan Meteor Streams. Kita pertama-tama akan membuat aplikasi Meteor baru:

Selanjutnya kita menginstal Meteor Streams dari atmosfer:

Maka kita perlu membuat file bernama chat.js dan tempatkan di kode berikut:

Mulai aplikasi Anda dengan:

Aplikasi Anda sekarang akan berjalan pada - http://localhost:3000.

Sekarang Anda memiliki aplikasi obrolan yang berfungsi penuh. Untuk mulai mengobrol, buka konsol browser dan gunakan metode sendChat seperti yang ditunjukkan di bawah ini.

Browser Console based Chat with Meteor Streams

Mari Menyelam Lebih Lanjut

Agak sulit untuk memahami Meteor Streaming dengan hanya contoh berbasis konsol sederhana, seperti yang baru saja kita bangun di atas. Jadi, mari kita membangun aplikasi obrolan berfitur lengkap untuk menjadi lebih akrab dengan Meteor Streams.

Aplikasi

Aplikasi yang kami buat adalah aplikasi obrolan berbasis web. Siapa pun dapat mengobrol secara anonim. Selain itu, pengguna dapat mendaftar dan mengobrol dengan identitas (nama pengguna) mereka. Ini juga memiliki sistem penyaringan, yang menyaring kata-kata buruk (senonoh).

Pada akhirnya, akan terlihat seperti ini. Anda dapat mengambil kode sumber dari github untuk melihat hasil akhir.

Meteor Streams Chat App in Action

Ayo Buat Aplikasi

Mari kita buat aplikasi Meteor standar dan instal Meteor Streams dari atmosfer. Kita juga akan menambahkan dukungan untuk bootstrap dan Akun Meteor.

Ayo Bangun UI

Interface pengguna untuk aplikasi kita akan sangat sederhana. Kita memiliki div yang menunjukkan pesan obrolan dan kotak input untuk masuk dalam pesan obrolan baru. Lihat di bawah untuk HTML lengkap UI kita. Periksa komentar sebaris jika Anda perlu bantuan memahami kode.

Tambahkan konten berikut ke client/home.html:

Wiring Up Obrolan Kita

Reaktivitas Meteor adalah konsep yang luar biasa dan sangat berguna. Sekarang, Meteor Streams bukan sumber data reaktif. Tapi itu bisa bekerja dengan baik dengan koleksi hanya lokal untuk memberikan reaktivitas.

Sesuai namanya, hanya koleksi lokal tidak menyinkronkan datanya dengan server. Datanya hanya tersedia di dalam klien (tab browser).

Tambahkan konten berikut ke lib/namespace.js untuk membuat koleksi hanya lokal:

Sekarang saatnya untuk memasang template kita dengan koleksi. Mari dilakukan hal berikut:

  • Tetapkan koleksi ke pembantu messages di templat chatBox.
  • Hasilkan nilai untuk pembantu user di templat chatMessage.
  • Ketika tombol Send Chat diklik, tambahkan pesan obrolan yang diketik ke dalam koleksi.

Tambahkan konten berikut ke client/ui.js:

Dengan perubahan di atas Anda akan dapat mengobrol, tetapi pesan hanya ditampilkan di klien Anda. Jadi mari serahkan sisa pekerjaan ke Meteor Streams.

Mari Ciptakan Aliran

Kita akan membuat aliran pada klien dan server (dengan nama yang sama) dan menambahkan izin yang diperlukan.

Tambahkan kode berikut ke lib/namespace.js untuk membuat aliran:

Hanya menciptakan aliran saja tidak cukup; kita perlu memberikan izin yang diperlukan, yang memungkinkan klien untuk berkomunikasi melalui itu. Ada dua jenis izin (baca dan tulis). Kita perlu mempertimbangkan acara, userId, dan subscriptionId ketika kita membuat izin.

  • userId adalah userId dari klien yang terhubung ke aliran.
  • subscriptionId adalah pengidentifikasi unik yang dibuat untuk setiap klien yang terhubung ke aliran.

Untuk aplikasi obrolan, kita harus memberi siapa pun yang menggunakan akses penuh baca dan tulis aplikasi ke event chat. Dengan cara ini, klien dapat menggunakannya untuk mengirim dan menerima pesan obrolan.

Tambahkan kode berikut ke server/permissions.js:

Menghubungkan Stream Dengan UI

Sekarang kita memiliki aliran yang berfungsi penuh, mari sambungkan ke UI sehingga orang lain dapat melihat pesan yang Anda kirim.

Hal pertama yang perlu kita lakukan adalah menambahkan pesan obrolan kita ke aliran, ketika kita mengklik tombol Send Chat. Untuk itu, perlu memodifikasi kode yang terkait dengan acara klik tombol Send Chat (klik#send), sebagai berikut (di client/ui.js):

Kemudian kita perlu mendengarkan streaming untuk event chat dan menambahkan pesan ke chatCollection yang sedang dibuat di UI, secara reaktif. Tambahkan kode berikut ke file client/ui.js:

Sekarang kita perlu memodifikasi logika yang menghasilkan nilai untuk pembantu user di templat chatMessage sebagai berikut:

  • Masuk pengguna - user-<userId>
  • Pengguna anonim - anonymous-<subcriptionId>

Ubah kode untuk pembantu user di templat chatMessage untuk mencerminkan perubahan di atas (di client/ui.js):

Menampilkan Username Alih-alih userId

Menampilkan userId saja tidak terlalu berguna. Jadi mari kita ubah untuk menampilkan nama pengguna yang sebenarnya. Di sini, kita akan menggunakan Meteor Pub/Sub untuk mendapatkan nama pengguna untuk userId yang diberikan.

Pertama-tama, mari konfigurasikan Akun Meteor untuk menerima nama pengguna saat membuat pengguna. Tambahkan kode berikut ke client/users.js:

Lalu mari kita buat publikasi untuk mendapatkan pengguna. Tambahkan kode berikut ke server/users.js. Ini hanya mengembalikan nama pengguna untuk userId yang diberikan.

Sekarang kita perlu membuat langganan pada klien untuk setiap pengguna yang kita minati. Kita akan melakukan ini di dalam suatu metode. Selain itu, setelah kita mendapatkan nama pengguna, itu perlu ditugaskan ke variabel sesi. Kemudian kita bisa menggunakan variabel sesi di dalam bantuan user untuk mendapatkan nama pengguna secara reaktif.

Tambahkan kode berikut ke client/users.js:

Terakhir, mari kita ubah bantuan user di templat chatMessage untuk mendapatkan nama pengguna dari sesi (di client/ui.js):


Memfilter Kata-Kata Buruk

Aplikasi obrolan kita akan memastikan untuk menyembunyikan kata-kata kotor apa pun. Jika seseorang mencoba mengirim pesan dengan kata-kata buruk, kita perlu menyaringnya. Meteor Stream memiliki fitur yang disebut filter, yang dirancang untuk ini. Mari kita lihat bagaimana kita bisa menyaring kata fool dari pesan obrolan apa pun.

Tambahkan kode berikut ke server/filter.js:

Jangan ragu untuk menambahkan di filter Anda sendiri.

Aplikasi obrolan kita sekarang selesai. Anda dapat melihat versi langsung aplikasi di http://streams-chat.meteor.com. Selain itu, kode Sumber untuk aplikasi tersedia di Github.


Kesimpulan

Dalam tutorial ini kita membuat aplikasi obrolan menggunakan local only collections untuk menambahkan reaktivitas dan menggunakan Meteor Pub/Sub untuk mendapatkan nama pengguna pengguna. Semoga Anda bisa melihat betapa baiknya Meteor Streams dapat bekerja dengan fungsionalitas Meteor yang ada. Namun, ini hanyalah pengantar Meteor Streams, untuk sumber daya tambahan, lihat tautan berikut:

Advertisement
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.