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

Di akhir artikel ini, saya berharap Anda mengerti kegunaan WebSockets dan bagaimana memulai membuat aplikasi WebSockets.

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.

Apa itu WebSockets

WebSocket adalah cara baru untuk komunikasi antara klien dan server tanpa mengirimkan informasi tambahan yang tidak perlu melalui protokol HTTP. WebSockets menggunakan protokolnya sendiri yang dipaparkan oleh IETF, yang mana versi terakhirnya adalah RFC 6455.

Selain memiliki protokol sendiri, WebSockets juga memiliki API yang dapat digunakan oleh aplikasi web untuk membuka dan menutup hubungan dan untuk mengirim dan menerima pesan yang disebut sebagai WebSockets API yang dipaparkan dalam Spesifikasi W3c.

Dengan WebSockets Anda dapat melakukan komunikasi dua arah penuh antara server dan klien yang lebih ringan dibandingkan dengan metode HTTP tradisional.

Bagaimana WebSockets Bekerja

WebSockets API adalah teknologi yang berbasis pada JavaScript untuk mengirim dan menerima kesan ke dan dari server.

Untuk menggunakan protokol WebSockets diperlukan jabat tangan terlebih dahulu. Jabat tangan dari klien mungkin bisa seperti di bawah ini

GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: WebSocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Origin: http://example.com
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13

dan jawaban dari jabat tangan oleh server harusnya seperti ini

HTTP/1.1 101 Switching Protocols
    Upgrade: WebSocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Protocol: chat

Di sini klien akan mengirim kunci pada header Sec-WebSocket-Key yang dikodekan base64. Dari server akan memberikan jawaban berupa string ajaib 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 yang kemudian dikalkulasi untuk mendapatkan hash SHA-1. Hasilnya dikodekan dengan base64, dan akan dimasukkan dalam header sec-WebSocket-Accept sebagai jawaban dari server.

WebSockets API

Pengembang web menggunakan API berbasis JavaScript untuk berkomunikasi antara klien dan server.

Untuk menggunakan API WebSocket bisa dideteksi dengan script berikut

if ('WebSocket' in window){
    /* WebSocket is supported. You can proceed with your code*/
} else {
    /*WebSockets are not supported. Try a fallback method like long-polling etc*/
}

Penggunaan WebSockets cukup dengan deklarsi berikut

var connection = new WebSocket('ws://example.org:12345/myapp');

Jika koneksi sudah berhasil, event onopen akan dipanggil di sisi klien. Anda bisa tangani dengan kode berikut.

connection.onopen = function(){
    /*Send a small message to the console once the connection is established */
    console.log('Connection open!');
}

Jika koneksi ditolak oleh server, atau karena alasan lain koneksi terputus, event onclose akan dipanggil.

connection.onclose = function(){
    console.log('Connection closed');
}

Jika ada error, event onerror akan dipanggil.

connection.onerror = function(error){
console.log('Error detected: ' + error);
}

Untuk mengirim pesan ke server, bisa perintah send.

connection.send('Hey server, whats up?');

Ketika klien menerima pesan dari server, event onmessage akan dipanggil.

connection.onmessage = function(e){
    var server_message = e.data;
    console.log(server_message);
}