WebSockets - Berkomunikasi dengan Server

Web sebagian besar dibangun dengan paradigma request / response HTTP. Seorang 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 membutuhkan interaksi pengguna atau polling berkala untuk memuat data baru dari server.

Teknologi yang memungkinkan server untuk mengirim data ke klien pada saat ia mengetahui bahwa data baru tersedia telah ada selama beberapa waktu. Mereka menggunakan nama seperti"Push" atau “Comet”.

Dengan long polling, klien membuka koneksi HTTP ke server, yang membuatnya tetap terbuka hingga mengirim respons. Setiap kali server benar-benar memiliki data baru, ia mengirimkan respons. Polling panjang dan teknik lainnya bekerja dengan cukup baik. Namun, semua ini berbagi satu masalah, mereka membawa overhead HTTP, yang tidak membuatnya cocok untuk aplikasi latensi rendah. Misalnya, game penembak multipemain di browser atau game online lainnya dengan komponen waktu nyata.

Membawa Soket ke Web

Spesifikasi Web Socket mendefinisikan API yang membentuk koneksi "socket" antara web browser dan server. Dalam istilah awam, ada koneksi yang terus-menerus antara klien dan server dan kedua belah pihak dapat mulai mengirim data kapan saja.

Koneksi soket web dapat dengan mudah dibuka menggunakan konstruktor -

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

wsadalah skema URL baru untuk koneksi WebSocket. Ada jugawss, untuk koneksi WebSocket aman dengan cara yang sama https digunakan untuk koneksi HTTP yang aman.

Melampirkan beberapa event handler segera ke koneksi memungkinkan Anda untuk mengetahui kapan koneksi dibuka, menerima pesan masuk, atau ada kesalahan.

Argumen kedua menerima opsional subprotocols. Ini bisa berupa string atau array string. Setiap string harus mewakili asubprotocol nama dan server hanya menerima satu yang lulus subprotocolsdalam larik. Diterimasubprotocol dapat ditentukan dengan mengakses properti protokol dari objek WebSocket.

// 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 kami memiliki koneksi ke server (ketika acara terbuka diaktifkan) kami dapat mulai mengirim data ke server menggunakan metode send (pesan Anda) pada objek koneksi. Dulunya hanya mendukung string, tetapi dalam spesifikasi terbaru, sekarang dapat mengirim pesan biner juga. Untuk mengirim data biner, objek Blob atau ArrayBuffer digunakan.

// 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);

Demikian pula, server mungkin mengirimi kami pesan kapan saja. Setiap kali ini terjadi, panggilan balik onmessage akan diaktifkan. Callback menerima objek acara dan pesan sebenarnya dapat diakses melalui dataproperti.

WebSocket juga dapat menerima pesan biner dalam spesifikasi terbaru. Frame biner dapat diterima dalam format Blob atau ArrayBuffer. Untuk menentukan format biner yang diterima, setel properti binaryType objek WebSocket ke 'blob' atau 'arraybuffer'. Format defaultnya adalah 'blob'.

// 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 yang baru ditambahkan dari WebSocket adalah ekstensi. Menggunakan ekstensi, dimungkinkan untuk mengirim bingkai yang dikompresi, dimultipleks, dll.

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

Komunikasi Lintas Asal

Menjadi protokol modern, komunikasi lintas sumber dimasukkan langsung ke WebSocket. WebSocket memungkinkan komunikasi antar pihak di domain apa pun. Server memutuskan apakah akan menyediakan layanannya untuk semua klien atau hanya mereka yang berada di sekumpulan domain yang ditentukan dengan baik.

Server Proxy

Setiap teknologi baru hadir dengan serangkaian masalah baru. Dalam kasus WebSocket, ini adalah kompatibilitas dengan server proxy, yang memediasi koneksi HTTP di sebagian besar jaringan perusahaan. Protokol WebSocket menggunakan sistem peningkatan HTTP (yang biasanya digunakan untuk HTTP / SSL) untuk "meningkatkan" koneksi HTTP ke koneksi WebSocket. Beberapa server proxy tidak menyukai ini dan akan memutuskan koneksi. Jadi, bahkan jika klien tertentu menggunakan protokol WebSocket, itu mungkin tidak dapat dilakukan untuk membuat sambungan. Ini membuat bagian selanjutnya menjadi lebih penting :)

Sisi Server

Menggunakan WebSocket membuat pola penggunaan baru untuk aplikasi sisi server. Meskipun tumpukan server tradisional seperti LAMP dirancang di sekitar siklus permintaan / respons HTTP, tumpukan tersebut sering tidak berfungsi dengan baik dengan sejumlah besar koneksi WebSocket terbuka. Menjaga sejumlah besar koneksi tetap terbuka pada saat yang sama membutuhkan arsitektur yang menerima konkurensi tinggi dengan biaya kinerja rendah.