Konfigurasi Websocket dengan AngularJs

Hallo guys, Kali ini saya mau share tentang Websocket.

Sebelum memulai Konfigurasinya kita perlu tahu ni apa sih Websocket itu? bagaimana cara kerjanya, dan apa keuntungannya menggunakan Websocket ini.

Pertama saya akan membahas tentang apa sih Websocket itu?
Simplenya sih websocket itu kalau diartikan adalah penghubung komunikasi antara klien ke server. Websocket itu bidirectional, maksudnya adalah dia bisa melakukan transfer pesan dengan 2 flow, bisa dari client ke server / server ke client. yang terakhir adalah realtime. jadi dengan websocket ini kita bisa mendapatkan data secara realtime.

Ini nih contoh visual konsep dari websocket.

Contoh Flow Websocket

Ada beberapa contoh aplikasi yang menggunakan websocket.

1. Multiple Browser Games contohnya kita bisa membuat games tetris, dengan menggunakan websocket kita bisa menghitung score di 2 browser yang berbeda dengan realtime score.

2. Live Text di Berita sebagai fungsi untuk broadcast.

3. Realtime apps multiuser. contohnya adalah chat seperti telegram atau whatsapp

Keuntungan Menggunakan Websocket diantaranya sebagai berikut :

1. Cross Origin Communication

2. Cross Platform Compatibility (bisa untuk web, desktop ataupun mobile)

3. Size saat berkirim pesan lebih kecil daripada menggunakan Restful / Http.

Udah paham kan apa itu websocket?

Sekarang kita akan melakukan konfigurasi websocket dengan Angularjs.

Pertama kita harus menginstal dulu stomp, untuk menjalankan websocket. caranya gampang, cukup dengan menggunakan command ini 

bower install --save ng-stomp atau npm install --save ng-stomp

setelah menginstall kita perlu memasukkan file JSnya di App.js

<script src="bower_components/ng-stomp/dist/ng-stomp.standalone.min.js></script>

pastikan juga filenya sudah benar benar ada di path tersebut.

setalah itu masukkan depedency ngStomp di App.js 

Nah, setelah semua terpasang, kita mulai dengan membuat service websocket. setelah dibuat kita hanya perlu menambahkan code ini kedalam service tersebut.

Konfigurasi Websocket

Pertama kita membuat dulu object bernama socket.

lalu kita membuat fungsi di socket tersebut. didalam fungsi tersebut kita perlu connect di endpoint misalnya contoh diatas adalah 'http://www.contoh.com/notification';

Setelah itu kita juga perlu subscribe chanel yang ada di endpoint yang telah kita sambungkan. channel ini berperan seperti sebuah ruangan untuk menerima broadcast yang dilempar dari server, payload adalah hasil data / pesan yang kita terima.

setelah konfigurasi selesai, kita perlu memanggil service tadi ke dalam controller aplikasi kita. cukup dengan menggunakan code ini untuk memanggil fungsi yang kita buat tadi. 

websocketService.connectAndSubscribe();

websocketService adalah nama service kita.

connectAndSubscribe adalah nama fungsi kita.

Nah Cukup mudah kan cara implementasi Websocket ini.

Untuk Catatan saja, 1 controller cukup hanya panggil service websocket sekali saja (

websocketService.connectAndSubscribe()) karena nanti payload yang akan dikeluarkan bisa lebih dari 1. atau kalian bisa set service itu di header untuk menjalakan service secara global.

Cukup dulu tentang Websocket.

Terima Kasih Semua, semoga artikel ini bermanfaat buat teman-teman semua

Referensi :
1. https://www.pubnub.com/blog/2013-09-11-what-are-websockets/
2. https://www.pubnub.com/blog/2015-01-05-websockets-vs-rest-api-understanding-the-difference/
3. http://www.jurnalweb.com/sekilas-tentang-websocket/
4. http://salmanfaris15.blogspot.co.id/2015/05/web-socket.html