Tingkatkan Jumlah User Aplikasi Anda Dengan Websocket API

WebSocket Powering the Apps (Image by pubnub)

Di tahun 2017 user semakin dibanjiri dengan aliran informasi digital. Ada 132 juta pengguna internet di Indonesia. Kemudahan penggunaan smartphone dan semakin murahnya paket data telah mendorong jumlah user pengguna internet secara signifikan. Aplikasi digital telah masuk dalam berbagai bidang aktivitas sehari hari mulai dari berita umum (Detikcom, Kompas, BaBe), pekerjaan (Linkedin, JobStreet, Karir dkk), komunikasi dan relasi bisnis (Facebook, Whatsapp), transportasi umum (Traveloka, GO-JEK, Uber, Grab), makanan (Kulina, GoFood), jual/beli (OLX, Bukalapak, Tokopedia), coding (Github, Stackoverflow).

Semakin banyak aktivitas user, semakin banyak pula aliran informasi yang harus diikuti setiap harinya. User kini mengharapkan response aplikasi yang lebih cepat dibanding era sebelum tahun 2017.

Apa itu Aplikasi Real-time

Kecepatan adalah utama (Image taken from this)

Pada tahun 1968, Robert Miller membuat tulisan berjudul “Response time in man-computer conversational transactions”. Dari tulisan ini ada 3 kesimpulan yang dapat diambil:

1. Waktu response kurang dari 100ms dapat dikategorikan sebagai instan atau realtime.
2. Waktu response 1 detik atau kurang dapat dikategorikan cepat. User dapat melakukan interaksi imbal balik dengan informasi yang diterima.
3. Waktu response lebih dari 10 detik akan kehilangan perhatian dari user.

Tulisan Miller inilah yang sering menjadi patokan bahwa nilai yang ideal informasi diproses oleh sebuah aplikasi maupun web adalah maksimum 2 detik.

Di era banjir informasi seperti saat ini, user dituntut untuk mendapatkan informasi secara cepat dari berbagai macam sumber. Karena itu sebagai pengembang aplikasi, developer diharapkan menyediakan aplikasi yang dapat menampilkan informasi secara instan dan cepat.

Era AJAX

jQuery memudahkan pemanggilan AJAX request (Image dari sini)

AJAX adalah teknik yang digunakan untuk mengambil data web secara background dan memperbarui isi sebagian halaman. AJAX lahir sebagai solusi untuk menampilkan informasi terbaru secara cepat. AJAX mulai dikembangkan di era akhir milennium pada era 1999 akhir oleh Microsoft. Awalnya AJAX dimulai dari tag <iframe> kemudian dikembangkan menjadi XMLHttp ActiveX, dimana kemudian diadopsi oleh Mozilla, Safari dan browser lainnya sebagai XMLHttp Javascript. Di tahun 2004 GMail turut mempopulerkan AJAX dalam bentuk web apps email yang nyaman digunakan tanpa harus reload. AJAX terus populer hingga saat ini dengan library seperti jQuery.

Pada awal lahirnya AJAX, lahir pula metode WebService dan RSS yang menyediakan informasi berupa XML. Protokol yang dulu populer adalah SOAP. Saat ini WebService lebih umum dikenal dengan istilah API. API dapat digunakan untuk melakukan proses Create,Retrieve,Update,Delete (CRUD) format yang umum digunakan adalah XML dan JSON. Protokol yang populer saat ini adalah REST. REST API dapat digunakan oleh aplikasi berbasis web/mobile maupun oleh aplikasi lain.

Era WebSocket

Tidak puas dengan metode AJAX, sebuah protokol baru pun dikembangkan yaitu WebSocket. Standardisasi WebSocket disetujui di tahun 2011 dengan tujuan agar komunikasi klien-server dapat dilakukan secara dua arah dibanding satu arah (request-response).

WebSocket memungkinkan hal baru seperti streaming perubahan data secara realtime, chat realtime, game multiplayer di browser, dan lain-lain. WebSocket memungkinkan komunikasi antara server dan client berlangsung secara instan. WebSocket mendukung pengembangan aplikasi berbasis Real-time.

WebSocket vs REST API

Cara REST API menangani proses Realtime (Image from this)

Perbedaan paling utama antara WebSocket dan Rest API adalah komunikasi dua arah antara server dan klien. Di Rest API komunikasi dimulai oleh klien dan diakhiri oleh server. Sedangkan di WebSocket setelah koneksi terhubung, komunikasi dapat dimulai dari server maupun dari klien. Contoh penggunaanya adalah :

• Situs seperti Kompas dan Detik dapat mengirimkan notifikasi hanya ketika ada berita baru. (publish/subscribe)
• Layanan seperti uber dapat memperbarui lokasi driver saat ini secara realtime (data-sync)
• Menampilkan jumlah pengguna realtime yang aktif di google analytics (data-sync)
• Perbaruan status dan posisi player saat ini di game berbasis web (data-sync)
• Atau jika ingin menggunakan API REST dapat menggunakan remote procedure call (request-response)

Lalu bagaimana dengan performance WebSocket dibandingkan dengan REST API. Berikut ini adalah ujicoba yang telah dilakukan REST vs WebSocket

Hasil ujicoba benchmark WebSocket vs REST (Image from this)

Pro dan kontra WebSocket

Penggunaan WebSocket masih menimbulkan pro dan kontra bagi developer. Keuntungan bagi user adalah response aplikasi semakin cepat, user bisa mendapatkan informasi terbaru tanpa harus melakukan reload secara manual. Namun WebSocket juga membutuhkan resource untuk menjaga session semua user yang sedang terhubung. Implementasi WebSocket paling banyak diterapkan di NodeJS dan bagi beberapa developer NodeJS memerlukan waktu untuk belajar. Silakan ikuti pro kontra WebSocket vs REST disini

Beberapa library WebSocket yang muncul mempunyai protokol format data yang berbeda antar websocket. Sedangkan REST API lebih matang apapun REST API library yang digunakan antara server dan klien tetap dapat saling berkomunikasi dengan protokol HTTP.

Beberapa contoh library Websocket yaitu

• SocketIO + EngineIO : websocket library dengan konsep komunikasi dua arah berdasarkan event based. Setiap ada perubahan data maka server/client dapat mengirimkan event tersebut ke client lain.
• Primus : WebSocket library yang menyediakan abstraksi pada low-level layer. Primus tidak bisa digunakan secara langsung, namun Primus menyediakan akses library low-level yang dapat dipakai oleh Real-time framework lain.
• Meteor : full stack framework yang menangani backend di sisi server hinggan frontend di desktop maupun mobile. Meteor menggunakan websocket sebagai teknik komunikasi data antara backend dan frontend. Meteor mendapatkan funding sebesar $30M dari investor. Meteor mempunyai basis developer yang cukup besar dibanding framework lain.
• Deepstream : open realtime server yang spesifik menangani distribusi message antar client. Perbedaan utama antara deepstream dan library lain adalah, deepstream hanya berfungsi sebagai distributor message antara producer dan consumer, dimana pada library lain producer adalah server juga. Dengan paradigma baru ini memungkinkan deepstream scalable dan dapat menangani distribusi message hingga jutaan message per detik. Deepstream memungkinkan banyak client terhubung dalam satu saat tanpa perlu server fisik. Contoh aplikasi multiplayer game berbasis web dimana player berperan sebagai producer (untuk mengirimkan player status, player lokasi) dan sebagai consumer message (untuk mendapatkan status player lain, lokasi player lain).

Deepstream Real-time server

Pengembangan Aplikasi Realtime

Saat ini dukungan teknologi semakin baik dan semakin merata di berbagai daerah di Indonesia. Bahkan keluarga saya yang berada di Merauke kini sudah bisa melakukan streaming lewat Facebook Live lewat jaringan 3G/4G. Hal ini tidak mungkin dilakukan 5 tahun yang lalu karena jaringan yang belum cukup baik.

Saya optimis pengembangan aplikasi Real-time ke depannya akan semakin banyak karena dukungan infrastruktur dan dukungan library aplikasi. Aplikasi Real-time memungkinkan hal — hal baru yang tidak terpikirkan sebelumnya misalnya :

• Sistem terdistribusi, tidak perlu storage, tidak perlu cpu processing : Semua client adalah producer, semua client adalah consumer, tidak dibutuhkan lagi server utama dengan storage besar untuk menampung data. Contoh Whatsapp dengan user base yang cukup besar, Whatsapp tidak membutuhkan storage karena semua message langsung di forward ke user, database message berada di masing — masing user.
• Kolaborasi task antar user secara realtime : Kolaborasi antar user untuk mengerjakan sebuah task kini dimungkinkan. Setiap aktivitas user akan otomatis dipublish ke user lain. Data yang diubah akan otomatis di sync antara user. Setiap user akan melihat tampilan aktivitas yang sama. Contoh Google Docs/Spreadsheet, banyak user dapat berkolaborasi untuk menyelesaikan sebuah dokumen.
• Aplikasi IoT streaming realtime report : Aliran data yang dikirim dari device IoT dapat langsung ditampilkan di layar secara realtime. Data dapat langsung didistribusikan ke berbagai client dan tidak perlu disimpan ke server.
• Multiplayer Game berbasis Web : Dengan dukungan berbagai library WebGL terbaru untuk pengolahan render 2D dan 3D, game berbasis web dapat ditampilkan lebih halus dan realtime dibanding sebelumnya. Dukungan WebSocket akan memungkinkan banyak game berbasis multiplayer yang bisa berjalan di platform web dan mobile di masa datang.

Tunggu lanjutan artikel ini

Tertarik mencoba API berbasis WebSocket ? Tunggu lanjutan artikel berikutnya untuk belajar coding langsung menggunakan Real-time library DeepStream.