#web socket

A.    Apa itu WebSocket

WebSocket merupakan sebuah protokol komunikasi dua arah yang dapat digunakan oleh browser. Jika pada AJAX kita hanya dapat melakukan komunikasi satu arah dengan mengirimkan request kepada server dan menunggu balasannya, maka menggunakan WebSocket kita tidak hanya dapat mengirimkan request kepada server, tetapi juga menerima data dari server tanpa harus mengirimkan request terlebih dahulu. Hal ini berarti ketika menggunakan WebSocket pengguna harus terus menerus terkoneksi dengan server, dan kita memerlukan sebuah server khusus untuk dapat menjalankan aplikasi WebSocket dengan benar. Sederhananya, perhatikan gambar berikut:

 Dari gambar di atas, kita dapat melihat bagaimana dalam kasus AJAX, setiap request dari pengguna maupun respon dari server dilakukan secara terpisah. Jika ingin mengirimkan request ke server, kita perlu membuka koneksi baru yang kemudian akan dibalas oleh server seperti ia membalas permintaan halaman HTML biasa. Server juga tidak dapat langsung melakukan pengiriman data ke klien tanpa ada permintaan terlebih dahulu. Hal ini berbeda dengan pola komunikasi WebSocket, di mana koneksi berjalan tanpa terputus dan server dapat mengirimkan data atau perintah tanpa harus ada permintaan dari pengguna terlebih dahulu. Dengan begitu, WebSocket bahkan juga memungkinkan server mengirimkan data atau perintah ke semua klien yang terkoneksi, misalkan untuk memberikan notifikasi global.

Untuk dapat melihat langsung bagaimana cara kerja WebSocket, kita akan langsung melakukan eksperimen. Objek yang diperlukan untuk menggunakan WebSocket dari browser adalah WebSocket. Tetapi sebelumnya, kita memerlukan sedikit persiapan terlebih dahulu, yaitu komponen server dari WebSocket.

 B.     Latar Belakang

WebSocket adalah standar baru untuk komunikasi realtime pada Web dan aplikasi mobile. WebSocket dirancang untuk diterapkan di browser web dan server web, tetapi dapat digunakan oleh aplikasi client atau server. 

WebSocket adalah protokol yang menyediakan saluran komunikasi full-duplex melalui koneksi TCP tunggal. Protokol WebSocket sudah di standarisasi oleh IETF sebagai RFC 6455 pada tahun 2011, dan API WebSocket di Web IDL sedang distandarisasi oleh W3C.

Aplikasi Yang Harus Menggunakan WebSocket

·         Aplikasi dengan banyak pengguna atau Multi-User Apps

·         Aplikasi langsung atau Realtime Apps

·         Aplikasi dimana data live sangat dibutuhkan, seperti pasar saham, atau kurs.

WebSocket Client

·         Di website, WebSocket didukung oleh browser seperti Google Chrome, Firefox, Opera

·         Pada ponsel, WebSocket support di iOS dan Android

·         WebSocket client menggunakan Javascript untuk meminta atau merequest ke server WebSocket, sebagai percobaan bisa ikuti tutorial di website w3schools atau tutorialspoint

WebSocket Server

Pada server, WebSocket sudah support di Ruby, Java, Objective-C, PHP, .NET, Node.js, ActionScript dan banyak bahasa lainnya, bisa dicoba pada website-website berikut ini Ruby, Java, Objective-C(iOS), PHP, .NET, node.js

Pengolahan / Processing

proses websocket

 C.    Cara Kerja Web Socket

Teknologi web berkembang dengan cepat. Beberapa tahun yang lalu baru saja booming mengenai Ajax, sekarang sudah ada leknologi baru lagi yang membuat aplikasi web semakin interaktif yaitu WebSockets. Dalam artikel ini akan dibahas

Mengapa     butuh WebSockets

Apa     itu WebSockets

Apa     yang bagus dari WebSockets

Apa     yang membuat WebSocket menjadi aplikasi web masa depan

Mengapa butuh WebSockets

Mengapa kita butuh WebSocksts? Apa yang dapat diselesaikan dari WebSockets? Jawabannya mudah. Kita membutuhkan cara lebih baik pada aplikasi web yang membutuhkan komunikasi realtime antara browser dengan servernya. Saat ini ada dua cara yang umum dilakukan untuk menyelesaikan masalah ini.

Pertama     adalah aplikasi menarik data baru secara berkala dari server. Jika ada     data baru maka data tersebut akan dikirim ke klien, biasanya menggunakan     AJAX. Hal ini bisa diumpamakan saat dalam perjalanan dengan mengendarai     mobil, seorang anak tiap menit menanyakan ke orang tuanya “Apakah kita     sudah sampai?". Orang tuanya akan selalu menjawab “belum” hingga pada     saat sudah sampai ditujuan baru menjawab “sudah”. Mekanisme ini juga sama     dilakukan pada aplikasi yang tiap selang waktu tertentu selalu menanyakan     apakah ada data baru ke server dan server menjawab walaupun tidak ada data     baru.

Kedua     dinamakan “long polling”. Hal ini adalah variasi dari teknik pertama namun     daripada server menjawab dengan jawaban kosong dan memutuskan koneksi,     ketika tidak ada data yang perlu diberikan, koneksi antara klien dan sever     dijaga terbuka (dengan masa berlaku tertentu).

Kedua metode di atas memiliki kelebihan dan kekurangan masing-masing yang secara keseluruhan hampir sama, tapi masalah umum dari keduanya adalah.

Keduanya     menggunakan protokol HTTP untuk mengirim pesan ke server. Setiap paket     informasi dikirim dengan protokol ini dibungkus dalam informasi header     yang banyak seperti user agent, dari mana request berasal dan lain     sebagainya. Semua informasi header tersebut tidak berguna dan membebani     komunikasi secara realtime.

Keduanya     tidak memiliki metode komunikasi dua arah penuh, yang mana server dan     klien keduanya dapat saling mengirim dan menerima pesan dalam waktu yang     sama, seperti percakapan melalui telepon. Pada percakapan telepon kedua     orang bisa berbicara dan mendengarkan dalam waktu yang sama.

Kedua alasan di atas menjadikan teknik yang saat ini tidak cukup bagus untuk komunikasi  realtime pada web yang cepat dan scalable. Kita memerlukan solusi yang lebih baik, yaitu WebSockets solusinya.

D.    Implementasi pada FIREBASE

Firebase adalah platform aplikasi real time. Hal ini memungkinkan pengembang untuk membangun kaya, aplikasi kolaboratif dengan cepat dengan hanya menggunakan kode client-side. Aplikasi dibangun dengan Firebase:

 Dapat dibangun dengan cepat

Update secara realtime out-of-the-box

Tetap responsif bahkan ketika koneksi jaringan tidak tersedia

 a.     pengaturan Firebase

 Jika Anda tidak memiliki akun Firebase sudah, Anda dapat menavigasi ke halaman Signup dan membuat account. Jika Anda sudah memiliki satu, Anda dapat login.

 Setelah Anda berada pada halaman Account Anda, Anda akan memiliki pilihan untuk membuat aplikasi Firebase baru.

 Anda dapat membuat aplikasi baru seperti

Karena saya sudah mengambil sub-domain ini, Anda harus menggunakan nama lain. Setelah aplikasi dibuat, klik pada Manage App tombol.

Setelah pengalihan, ini adalah gambaran dari App Anda backend. Di sini, Anda akan mengkonfigurasi semua aturan dan pengaturan yang keluar-of-the-box. Pilihan ini cukup komprehensif dan semua yang Anda butuhkan untuk membangun aplikasi waktu cepat dan nyata.

 Ambil beberapa saat dan menelusuri melalui pengaturan sebelum melanjutkan.

 b.      Firebase Authentication

 Firebase memiliki sistem otentikasi out-of-the-box mengagumkan dan Anda dapat memilih dari salah satu penyedia bawah

 Facebook

Kegugupan

GitHub

Google

Persona

Email

Anonim

Dan mengintegrasikan penyedia ini ke dalam aplikasi Anda juga cukup sederhana. Anda dapat memeriksa ini tentang bagaimana menerapkan otentikasi.

 Dalam posting ini, kita akan berhadapan dengan hanya operasi CRUD pada koleksi.

  c.       jsFire App

 Kami akan memulai dengan membangun "Murni" aplikasi Javascript dan kemudian kami akan mengintegrasikan Firebase ke dalamnya.

 Membuat folder baru bernama myFirebaseApp dan di dalam folder itu, membuat folder baru bernama jsFire.

 Berikutnya, membuat app.html, app.js dan app.css pada akar folder jsFire. Kami akan membangun UI sederhana, yang akan memberikan textbox untuk memasukkan nama film. Dan kami memiliki tampilan daftar item, di mana kita menampilkan semua film yang masuk.

 Buka app.html dalam editor favorit Anda dan tambahkan bawah markup

 <!DOCTYPE html>

<html>

 <head>

    <title>Movie Fire</title>

    <link rel="stylesheet" type="text/css" href="app.css">

</head>

 <body>

    <h1>Movie Fire</h1>

    <h3>Save all your Favorite Movies here</h3>

    <hr />

    <input type="text" id="movieName" placeholder="Enter your Favorite Movie Name" onkeypress="return saveToList(event)" />

    <h4>My Favorite Movies</h4>

    <ol id="favMovies">

    </ol>

    <script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>

    <script type="text/javascript" src="app.js"></script>

</body>

 </html>

Berikutnya, app.css terbuka dan menambahkan

body {

     font-family: "calibri";

    background: #efefef;

    padding: 32px;

    padding-top: 16px;

    color: #333;

}

h1,h3 {

     text-align: center;

     color: #787878;

}

 #movieName

{

           width: 98%;

           padding: 9px;

           font-size: 16px;

}

 Dan akhirnya app.js terbuka dan tambahkan script di bawah ini

 function saveToList(event) {

    if (event.which == 13 || event.keyCode == 13) { // as the user presses the enter key, we will attempt to save the data

        var movieName = document.getElementById('movieName').value.trim();

        if (movieName.length > 0) {

            var li = '<li>' + movieName + '</li>';

            document.getElementById('favMovies').innerHTML += li;

        }

        document.getElementById('movieName').value = '';

        return false;

    }

}

 Itu adalah semua yang Anda butuhkan untuk menjalankan aplikasi.

 Anda dapat host aplikasi ini pada server * AMP dan arahkan ke app.html atau app.html terbuka sederhana di browser Anda (dengan file: /// ...), Anda akan melihat

Anda dapat memasukkan nama film dan tekan kembali dan Anda akan melihat

 Sederhana dan manis kan? Tapi jika Anda me-refresh, semua data akan hilang. Di sinilah kita membawa Firebase.

 Terbuka app.html dan menambahkan referensi script di bawah ini di atas referensi app.js.

  <script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>

 Ini semua kita perlu mengimpor kebaikan Firebase di app kami. Berikutnya, membuka app.js dan informasi sebagai berikut

var favMovies  = new Firebase('https://moviefire.firebaseio.com/movies');

 function  saveToList(event) {

    if  (event.which == 13 || event.keyCode == 13) { // as the user presses the enter  key, we will attempt to save the data

        var  movieName = document.getElementById('movieName').value.trim();

        if  (movieName.length > 0) {

            saveToFB(movieName);

        }

        document.getElementById('movieName').value  = '';

        return  false;

    }

};

 function  saveToFB(movieName) {

    //  this will save data to Firebase

    favMovies.push({

        name:  movieName

    });

};

 function  refreshUI(list) {

    var  lis = '';

    for  (var i = 0; i < list.length; i++) {

        lis  += '<li data-key="' + list[i].key + '">' + list[i].name +  '</li>';

    };

    document.getElementById('favMovies').innerHTML  = lis;

};

 // this will  get fired on inital load as well as when ever there is a change in the data

favMovies.on("value",  function(snapshot) {

    var  data = snapshot.val();

    var  list = [];

    for  (var key in data) {

        if  (data.hasOwnProperty(key)) {

            name  = data[key].name ? data[key].name : '';

            if  (name.trim().length > 0) {

                list.push({

                    name:  name,

                    key:  key

                })

            }

        }

    }

    //  refresh the UI

    refreshUI(list);

});

 Kami telah mengubah kode sedikit sejak versi pertama. Hal untuk melihat

 Line 1: Kami akan membuat referensi untuk koleksi hadir pada Firebase Data Store. Jika referensi tidak ada, Firebase akan membuat satu untuk Anda segera setelah Anda menyimpan potongan pertama dari data. Memperbarui link ini dengan contoh Firebase Anda.

 Baris 6: Jika pengguna hits tombol enter dan ada data yang valid dalam kotak masukan, kami melewati isi textbox untuk saveToFB ().

 Baris 14: Di sini kita lihat contoh buat sebelumnya dari favMovies dan mengakses push () untuk mendorong nama film untuk koleksi film. Setelah data disimpan, FB akan memecat acara nilai, memohon Jalur 30.

 Baris 30: Begitu contoh baru dari koleksi film dibuat, FB klien API akan mengambil semua item dalam koleksi untuk Anda dan akan api peristiwa nilai. Kami akan mengambil keuntungan dari acara ini untuk mengisi UI dengan daftar yang sudah disimpan pada beban halaman. Dan kode yang sama ini akan digunakan untuk memperbarui data pada Simpan.

 Baris 31: Ini adalah bagaimana data akan terlihat ketika datang dari server

Kami akan iterate atas setiap objek dan menampilkan nama. Kami juga akan menghemat kunci dari objek. Ini akan digunakan untuk melakukan kegiatan Updation dan Penghapusan.

 Baris 37: Setelah data dipangkas, kami akan membangun sebuah objek dengan nama film dan kunci dan menyebarkannya ke refreshUI ().

 Line 21: Di sini, kami mengambil objek dan membangun daftar item.

Sekarang, Anda bisa menyegarkan UI dan menambahkan beberapa nama. Ini harus bekerja seperti sebelumnya. Refresh halaman lagi dan Anda akan melihat nama-nama film sebelumnya disimpan Anda. Bam !!

 Bukankah ini mengagumkan atau apa? Kami bahkan tidak menulis satu baris kode server!

 realtime Update

 Sekarang, buka 2 browser dan meluncurkan app.html.

Dan memperbarui nama film dalam satu browser dan Anda akan melihat update data dalam satu lainnya tanpa menyegarkan

Dan sekarang, jika Anda kembali ke halaman Mange App Anda pada Firebase dan klik pada tab data, Anda akan melihat

Data akan diperbarui pada semua klien serta menyimpan data FB pada saat yang sama.

 Bertanya-tanya Bagaimana?

 Firebase menggunakan Socket untuk mencapai pengelolaan data real time. Anda dapat memulai krom, membuka alat dev dan kemudian meluncurkan halaman Anda. Anda akan melihat sesuatu seperti

 Dan ketika Anda menambahkan film baru (dan melakukan klik ulang atas permintaan wss) Anda akan melihat

Mengagumkan bukan?

 Memperbarui dan Hapus

 Sejauh ini, kami telah mengimplementasikan Membuat dan Baca. Sekarang kita akan menerapkan Update dan Delete. Terbuka app.js dan memperbarui kode seperti di bawah ini

var favMovies  = new Firebase('https://moviefire.firebaseio.com/movies');

 function  saveToList(event) {

    if  (event.which == 13 || event.keyCode == 13) { // as the user presses the enter  key, we will attempt to save the data

        var  movieName = document.getElementById('movieName').value.trim();

        if  (movieName.length > 0) {

            saveToFB(movieName);

        }

        document.getElementById('movieName').value  = '';

        return  false;

    }

};

 function  saveToFB(movieName) {

    //  this will save data to Firebase

    favMovies.push({

        name:  movieName

    });

};

 function  refreshUI(list) {

    var  lis = '';

    for  (var i = 0; i < list.length; i++) {

        lis  += '<li data-key="' + list[i].key + '">' + list[i].name + '  [' + genLinks(list[i].key, list[i].name) + ']</li>';

    };

    document.getElementById('favMovies').innerHTML  = lis;

};

 function  genLinks(key, mvName) {

    var  links = '';

    links  += '<a href="javascript:edit(\'' + key + '\',\'' + mvName +  '\')">Edit</a> | ';

    links  += '<a href="javascript:del(\'' + key + '\',\'' + mvName +  '\')">Delete</a>';

    return  links;

};

 function  edit(key, mvName) {

    var  movieName = prompt("Update the movie name", mvName); // to keep  things simple and old skool :D

    if  (movieName && movieName.length > 0) {

        //  build the FB endpoint to the item in movies collection

        var  updateMovieRef = buildEndPoint(key);

        updateMovieRef.update({

            name:  movieName

        });

    }

}

 function  del(key, mvName) {

    var  response = confirm("Are certain about removing \"" + mvName +  "\" from the list?");

    if  (response == true) {

        //  build the FB endpoint to the item in movies collection

        var  deleteMovieRef = buildEndPoint(key);

        deleteMovieRef.remove();

    }

}

 function  buildEndPoint (key) {

           return new  Firebase('https://moviefire.firebaseio.com/movies/' + key);

}

 // this will  get fired on inital load as well as when ever there is a change in the data

favMovies.on("value",  function(snapshot) {

    var  data = snapshot.val();

    var  list = [];

    for  (var key in data) {

        if  (data.hasOwnProperty(key)) {

            name  = data[key].name ? data[key].name : '';

            if  (name.trim().length > 0) {

                list.push({

                    name:  name,

                    key:  key

                })

            }

        }

    }

    //  refresh the UI

    refreshUI(list);

});

Baris 24: Kami menambahkan Edit dan Hapus link ke li.

Baris 29: Akan menghasilkan link untuk kami dan kembali markup yang akan diperbarui di Jalur 24. genLinks () akan mengambil kunci dan teks film dan menghasilkan 2 link yang memanggil baik mengedit () atau update () dengan parameter ini pada mengklik mereka.

Baris 36: ini akan dipicu ketika Anda klik pada link edit. Pertama kita membuang prompt meminta pengguna untuk memperbarui nama. Setelah selesai, kami memeriksa apakah data tersebut valid dan kemudian kami memperbarui data dengan menciptakan sebuah instance dari item dalam koleksi.

 Baris 56: Akan membuat FB contoh baru dari nama film menggunakan kunci berlalu untuk itu. Referensi ini dapat digunakan lebih lanjut untuk melakukan operasi pada item tertentu dalam koleksi.

 Baris 41: Kami menggunakan referensi baru dibuat dan memanggil update () di atasnya melewati nilai yang akan diperbarui. Setelah data diperbarui, FB akan memicu event nilai dan daftar akan menyegarkan otomatis.

 Baris 47: Ketika pengguna mengklik pada link delete, kami meminta pengguna untuk mengkonfirmasi keputusannya. Setelah menegaskan pengguna, kami membuat sebuah instance dari nama film dan mengeluarkan perintah hapus. Dan lagi FB akan mengurus memicu peristiwa nilai.

 Sekarang, simpan file dan kembali ke browser dan menyegarkan

Sekarang klik pada link edit dan memperbarui nilai seperti

dan UI akan mendapatkan update

Sekarang ketika Anda klik pada Delete

Dan mengkonfirmasi, nama film akan dihapus

E.     Sumber- Sumber

 http://bertzzie.com/knowledge/javascript-lanjut/WebSocket.html

http://www.jurnalweb.com/sekilas-tentang-websocket/

最近實作Web-Socket 的server端跟client端遇到蠻多問題的. 雖然使用別人套件,但修了許多小細節. 還有... red is pub/sub有雷...

You can use this to benchmark socket.io app for example, using this cmd: