Memperkenalkan WebSockets - Membawa Socket ke Web

Eiji Kitamura
Malte Ubl

Masalah: Koneksi klien-server dan server-klien berlatensi rendah

Web sebagian besar telah dibuat berdasarkan paradigma permintaan/respons HTTP. Klien memuat halaman web dan kemudian tidak ada yang terjadi sampai pengguna mengklik ke halaman berikutnya. Sekitar tahun 2005, AJAX mulai membuat web terasa lebih dinamis. Namun, semua komunikasi HTTP diarahkan oleh klien, yang memerlukan interaksi pengguna atau polling berkala untuk memuat data baru dari server.

Teknologi yang memungkinkan server mengirimkan data ke klien tepat pada saat server mengetahui bahwa data baru telah tersedia sudah cukup lama. Tombol tersebut memiliki nama seperti 'Push' atau 'Comet'. Salah satu peretasan paling umum untuk membuat ilusi koneksi yang dimulai server disebut long polling. Dengan polling panjang, klien membuka koneksi HTTP ke server yang membuatnya tetap terbuka hingga mengirim respons. Setiap kali server benar-benar memiliki data baru, server akan mengirimkan respons (teknik lainnya melibatkan permintaan Flash, multibagian XDR, dan disebut juga file html). Polling panjang dan teknik lainnya bekerja dengan cukup baik. Anda menggunakannya setiap hari dalam aplikasi seperti obrolan Gmail.

Namun, semua solusi ini memiliki satu masalah: Mereka membawa overhead HTTP, yang tidak membuatnya cocok untuk aplikasi berlatensi rendah. Coba mainkan game tembak-menembak orang pertama multiplayer di browser atau game online lainnya dengan komponen realtime.

Memperkenalkan WebSocket: Membawa soket ke web

Spesifikasi WebSocket menentukan API yang membuat koneksi "socket" antara browser web dan server. Dengan kata sederhana: Terdapat koneksi persisten antara klien dan server dan kedua pihak dapat mulai mengirim data kapan saja.

Memulai

Anda membuka koneksi WebSocket hanya dengan memanggil konstruktor WebSocket:

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

Perhatikan ws:. Ini adalah skema URL baru untuk koneksi WebSocket. Ada juga wss: untuk koneksi WebSocket aman, sama seperti https: digunakan untuk koneksi HTTP yang aman.

Melampirkan beberapa pengendali peristiwa dengan segera ke koneksi memungkinkan Anda mengetahui kapan koneksi dibuka, menerima pesan masuk, atau terjadi error.

Argumen kedua menerima sub-protokol opsional. Nilai bisa berupa string atau array string. Setiap string harus mewakili nama sub-protokol dan server hanya menerima satu dari sub-protokol yang diteruskan dalam array. Sub-protokol yang diterima dapat ditentukan dengan mengakses properti protocol dari objek WebSocket.

Nama sub-protokol harus berupa salah satu nama sub-protokol yang terdaftar di registry IANA. Saat ini hanya ada satu nama sub-protokol (soap) yang terdaftar per Februari 2012.

// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};

Berkomunikasi dengan server

Segera setelah kita memiliki koneksi ke server (saat peristiwa open diaktifkan), kita dapat mulai mengirim data ke server menggunakan metode send('your message') pada objek koneksi. Dahulu hanya mendukung string, tetapi dalam spesifikasi terbaru server ini sekarang juga dapat mengirim pesan biner. Untuk mengirim data biner, Anda dapat menggunakan objek Blob atau ArrayBuffer.

// Sending String
connection.send('your message');

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

Server dengan cara yang sama mungkin juga mengirimkan pesan kepada kami. Setiap kali hal ini terjadi, callback onmessage diaktifkan. Callback menerima objek peristiwa dan pesan sebenarnya dapat diakses melalui properti data.

WebSocket juga dapat menerima pesan biner dalam spesifikasi terbaru. Frame biner dapat diterima dalam format Blob atau ArrayBuffer. Untuk menentukan format biner yang diterima, tetapkan properti binaryType objek WebSocket ke 'blob' atau 'arraybuffer'. Format defaultnya adalah 'blob'. (Anda tidak perlu menyelaraskan parameter binaryType saat mengirim.)

// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer object if binary
};

Fitur lain dari WebSocket yang baru ditambahkan adalah ekstensi. Dengan ekstensi, Anda dapat mengirim frame yang dikompresi, di-multipleks, dll. Anda dapat menemukan ekstensi yang diterima server dengan memeriksa properti ekstensi objek WebSocket setelah peristiwa terbuka. Belum ada spesifikasi ekstensi yang dipublikasikan secara resmi sejak Februari 2012.

// Determining accepted extensions
console.log(connection.extensions);

Komunikasi lintas origin

Sebagai protokol modern, komunikasi lintas origin dimasukkan langsung ke dalam WebSocket. Meskipun Anda tetap harus memastikan untuk hanya berkomunikasi dengan klien dan server yang Anda percayai, WebSocket memungkinkan komunikasi antar pihak di domain apa pun. Server memutuskan apakah akan menyediakan layanannya untuk semua klien atau hanya bagi yang berada di kumpulan domain yang terdefinisi dengan baik.

Server proxy

Setiap teknologi baru disertai dengan serangkaian masalah baru. Pada kasus WebSocket, kompatibilitasnya adalah dengan server proxy yang memediasi koneksi HTTP di sebagian besar jaringan perusahaan. Protokol WebSocket menggunakan sistem upgrade HTTP (yang biasanya digunakan untuk HTTP/SSL) untuk 'mengupgrade' koneksi HTTP ke koneksi WebSocket. Beberapa server proxy tidak menyukai cara ini dan akan memutuskan koneksi. Jadi, meskipun klien tertentu menggunakan protokol WebSocket, kemungkinan tidak mungkin untuk membuat koneksi. Hal ini membuat bagian berikutnya menjadi lebih penting :)

Gunakan WebSockets sekarang

WebSocket masih merupakan teknologi muda dan belum sepenuhnya diterapkan di semua browser. Namun, saat ini Anda dapat menggunakan WebSocket dengan library yang menggunakan salah satu penggantian yang disebutkan di atas setiap kali WebSocket tidak tersedia. Library yang menjadi sangat populer di domain ini adalah socket.io yang dilengkapi dengan klien dan implementasi server protokol dan menyertakan fallback (socket.io belum mendukung pengiriman pesan biner sejak Februari 2012). Ada juga solusi komersial seperti PusherApp yang dapat diintegrasikan dengan mudah ke dalam lingkungan web mana pun dengan menyediakan API HTTP untuk mengirim pesan WebSocket ke klien. Karena permintaan HTTP tambahan, akan selalu ada overhead tambahan dibandingkan WebSocket murni.

Sisi server

Menggunakan WebSocket akan menciptakan pola penggunaan yang benar-benar baru untuk aplikasi sisi server. Meskipun {i>stack server<i} tradisional seperti LAMP dirancang berdasarkan siklus permintaan/respons HTTP, mereka sering tidak berurusan dengan baik dengan sejumlah besar koneksi WebSocket terbuka. Tetap membuka banyak koneksi secara bersamaan memerlukan arsitektur yang menerima konkurensi tinggi dengan biaya performa rendah. Arsitektur semacam itu biasanya dirancang untuk threading atau disebut sebagai IO non-pemblokiran.

Implementasi sisi server

Versi protokol

Protokol wire (handshake dan transfer data antara klien dan server) untuk WebSocket sekarang menjadi RFC6455. Chrome dan Chrome untuk Android terbaru sepenuhnya kompatibel dengan RFC6455 termasuk pengiriman pesan biner. Selain itu, Firefox akan kompatibel pada versi 11, Internet Explorer pada versi 10. Anda masih dapat menggunakan versi protokol lama tetapi hal ini tidak disarankan karena diketahui rentan. Jika Anda memiliki implementasi server untuk protokol WebSocket versi lama, sebaiknya upgrade protokol tersebut ke versi terbaru.

Kasus penggunaan

Gunakan WebSocket setiap kali Anda membutuhkan latensi yang benar-benar rendah, koneksi mendekati realtime antara klien dan server. Perlu diingat bahwa hal ini mungkin melibatkan pemikiran ulang tentang cara Anda membangun aplikasi sisi server dengan fokus baru pada teknologi seperti antrean peristiwa. Beberapa contoh kasus penggunaannya adalah:

  • Game online multiplayer
  • Aplikasi obrolan
  • Jadwal olahraga live
  • Memperbarui streaming media sosial secara real time

Demo

Referensi