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

Overview to Moon.js: Part 2

Halo, kembali lagi nih ke sesi Overview to Moon.js bagian kedua. Pada kesempatan kali ini, kami akan membagikan beberapa contoh bagaimana menggunakan fitur-fitur yang terdapat pada Moon.js. Sebelum kita lanjut ke isi, mungkin ada beberapa yang belum tau, apa itu Moon.js? Moon js adalah salah satu library JavaScript yang masih sangat baru. Jadi Moon ini mengkombinasikan aspek-aspek positif dari libraries yang populer. Moon juga sangat ringan dan sudah include optimisasi yang akan membuat render time lebih cepat. Untuk lebih lengkap mengenai informasi dasar dari Moon.js bisa berkunjung ke Overview to Moon.js Part 1.

- Menampilkan Data dari Instance

`el` itu menunjukan bahwa bagian tersebut untuk id tertentu. Contohnya `el: "#app1"` maka yang terdapat pada `data` bisa diakses oleh <div> dengan id="app1".

- Merubah Nilai

untuk merubah value pada `msg` bisa menggunakan:

app1.set('msg', 'Hello Moon Changed!'); 

- Membuat Method

Mirip dengan yang ada pada Vue.js, membuat method/function cukup mudah, hanya dengan

namaFunction: function(parameter)

Berikut salah satu contoh membuat method/function yang me-return sebuah nilai

Khusus untuk yang me-return sebuah nilai, bisa dikeluarkan nilainya pada html, contoh untuk menampilkan hasil dari function diatas adalah dengan

- Menggunakan Fitur If (Untuk menampilkan nilai tertentu, jika value suatu nilai bernilai true)

Maka tulisan "The Condition is True!" akan tampil. Jika kita lakukan:

app5.set('condition', false);

Maka tidak ada yang ditampilkan.

- Menggunakan Fitur Loop
Cukup gunakan `m-for` untuk melakukan looping di Moon

Oke sekian dulu sharing pada kesempatan kali ini, semoga bisa memberikan gambaran bagaimana menggunakan Moon.js yaa!

Overview to Moon.js

Overview
Moon js adalah salah satu library JavaScript yang masih sangat baru. Jadi Moon ini mengkombinasikan aspek-aspek positif dari libraries yang populer. Moon juga sangat ringan dan sudah include optimisasi yang akan membuat render time lebih cepat.

Sebagai perbandingan, berikut adalah hasil minified dari library populer, dibandingkan dengan Moon:
   - Preact - 3kb
   - Moon - 7kb
   - Mithril - 8kb
   - Vue - 25.86kb
   - React + React DOM - 43kb
   - Angular 2 - 111kb

Sedangkan performanya:
   - Moon - 102 repaints/sec
   - Mithril - 95 repaints/sec
   - Angular 2 - 62 repaints/sec
   - Vue - 50 repaints/sec
   - React - 49 repaints/sec
   - Angular - 47 repaints/sec

Seperti yang sudah disinggung diatas, Moon mengkombinasikan aspek-aspek positif, seperti mengambil kemampuan untuk menggunakan JSX dan menggunakan Virtual DOM (mengikuti dari React), memberikan directive yang mudah digunakan (diambil dari Angular), dan menggunakan templating engine (seperti Ember).

Menggunakan Moon sangat mirip seperti Vue, karena Moon berbasis dari Vue. Berikut adalah salah satu contoh dari Moon:

Jika ingin merubah warna, tinggal lakukan:

app1.set('color', 'yellow')

Moon, seperti Vue, juga memiliki built-in directives, yang penggunaannya sangat mirip dengan yang ada pada Vue. Berikut beberapa directives bawaan Moon:

- m-if="condition"

     Penggunaannya mirip dengan v-if, jika kondisi yang diberikan bernilai true, maka tag tersebut akan ditampilkan. Sebaliknya, jika kondisi bernilai false, maka tag tersebut tidak akan ditampilkan.

- m-for="item in list"

     Penggunaannya mirip dengan v-for, isi yang ada didalam list akan dikeluarkan oleh m-for.

- m-on:click

     Penggunaannya seperti on-click pada JavaScript biasa, akan menjalankan fungsi jika tag tersebut ditekan.

Oke sekian dulu Overview dari Moon js nya, semoga kebayang dengan Moon yaa!

references:

http://moonjs.ga