• Home
  • About
  • Portfolio
  • Link Exchange
  • Contact
02 Aug 2012
4

HTML5 WebSockets : Pengganti Protokol HTTP

by cssweaver
Roleartikel, html5

Selama lima belas tahun terakhir, aplikasi Web telah secara bertahap diganti yang didasarkan pada protokol jaringan. Tapi ada kesenjangan besar dalam transfer protokol HTTP (Hypertext Transfer Protocol) yang digunakan untuk berkomunikasi di Web. Memang, pada awalnya dirancang untuk menyediakan dokumen sederhana dan file untuk web browser, tetapi tidak untuk interaksi yang kompleks secara real time.

Sebagai bagian dari protokol HTTP, client seperti Web browser, membuka koneksi ke server, berlaku, menunggu tanggapan, dan menutup koneksi. Jika pelanggan ingin informasi, maka harus membuka koneksi baru. Ini seperti menutup telepon dan memanggil ulang nomor setelah percakapan. Dan jika server memiliki informasi baru untuk klien, harus menunggu permintaan pelanggan dari pada mengirimnya langsung.

Redundansi ini tidak menghemat bandwidth. Lebih buruk lagi, membuat hampir tidak mungkin untuk klien Web menyimpan maksimum informasi untuk yang kedua. Dalam beberapa situasi, seperti keuangan, milidetik hilang dapat berarti hilangnya kesempatan, dan bahkan membuang-buang uang.

Selama bertahun-tahun, developer web tidak ragu-ragu untuk menghack protokol, dan mengurangkan keterbatasan teknik pemrograman HTTP seperti Comet. Ini merupakan keterlambatan yang menutup koneksi HTTP untuk mengirimkan lebih banyak data, dan server web dapat mengirimkan informasi ke web browser tanpa yang kedua telah diminta secara eksplisit.

Tapi apa yang developer inginkan adalah koneksi antara klien dan server dibiarkan terbuka tanpa batas waktu, sehingga kedua belah pihak untuk mengirimkan data bolak-balik jika diperlukan.

Standar HTML5, memungkinkan untuk aplikasi Web yang ada, untuk mendukung protokol baru yang disebut WebSockets. Hal ini memungkinkan klien untuk membuat koneksi Web, tetap terbuka selama yang dia inginkan, dan keduanya mengirim dan menerima data secara terus menerus.

Protokol WebSockets

Spesifikasi ini memungkinkan untuk membuka koneksi dua arah permanen antara klien dan server, untuk memecahkan beberapa masalah yang ditimbulkan oleh sifat searah HTTP dan offline seperti yang kita lihat sebelumnya.

Untuk tujuan apa? Perkembangan protokol ini memungkinkan pengembangan aplikasi nyata melakukan real-time (bursa informasi, chatting, game online …).

Spesifikasi WebSockets, yang didefinisikan dalam standar HTML5, yang dikembangkan oleh W3C, sedangkan protokol komunikasi standar oleh IETF (Internet Engineering Task Force).

Browser anda mengakses suatu halaman Web dan beban, katakanlah, sebuah aplikasi JavaScript. Ini memutuskan perlu aliran data yang konstan. Jenis “upgrade” query  harus dikirim oleh klien, untuk meminta update dari modus TCP / HTTP untuk WebSocket saat ini, seperti ini:

GET /text HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: www.example.com
Origin: http://example.com
WebSocket-Protocol: sample
Sec-WebSocket-Version: 6
…

Server yang anda temui:

HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://example.com
WebSocket-Location: ws://example.com/demo
WebSocket-Protocol: sample
…

Ini pertukaran request, demand dan response, bernama “handshake” dan hanya membuat komunikasi antara server dan client. Rincian Protokol sedang berada di situs IETF.

Note : ini mengatakan bahwa publikasi ini berada dalam keadaan “draft” dan terus berubah.

Klien dan server secara bebas dapat mengirim data ke lain dengan protokol ini. Berbagi port HTTP dengan konten yang ada, dengan mudah melintasi firewall yang berbeda, router, proxy, dll … Teknologi ini biasa disebut metode Push. Server mendorong (push) data ke klien dan tidak wajib menunggu sampai pemohon adalah mencari informasi.

Menggunakan WebSocket API

API dikembangkan oleh W3C, memperkenalkan interface WebSocket berikut:


[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
 readonly attribute DOMString url;

 const unsigned short CONNECTING = 0;
 const unsigned short OPEN = 1;
 const unsigned short CLOSING = 2;
 const unsigned short CLOSED = 3;

 readonly attribute unsigned short readyState;
 readonly attribute unsigned long bufferedAmount;

 attribute Function onopen;
 attribute Function onmessage;
 attribute Function onerror;
 attribute Function onclose;

 readonly attribute DOMString protocol;

 void send(in DOMString data);
 void close();
};
WebSocket implements EventTarget;

Dengan menyediakan API asli yang tidak memerlukan “hack” berbasis Ajax request atau iframe untuk menangani pemberitahuan dari server, WebSocket karena itu berusaha untuk menyediakan kerangka kerja standar untuk aplikasi Comet.

Dan untuk membuat sebuah instance dari WebSocket, satu-satunya argumen adalah bahwa kita harus memberikan URL dari server yang ingin Anda link. Ini harus mulai dengan ws :/ / (atau wss :/ / untuk koneksi aman).

  • WebSocket– ws://www.websocket.org/text
  • WebSocket Secure – wss://www.websocket.org/encrypted-text

Kemudian, antarmuka termasuk atribut fungsional untuk mengelola acara terkait:

  • OnOpen: membuka sebuah WebSocket
  • OnMessage: menerima pesan
  • OnError: error (s) terjadinya (s)
  • OnClose: WebSocket penutupan

Pesan yang dikirim oleh server akan diberitahu oleh onmessage event yang berisi pesan dari server sebagai string. Event  OnError, OnOpen OnClose dan dapat melacak secara real time status koneksi.

WebSocket menyediakan dua metode:

  • send (data_string) untuk mengirim pesan ke server
  • close () untuk menutup soket

Setelah sambungan dibuat modus WebSocket, data dapat dikirim dan diterima antara klien dan server dalam modus full-duplex.

Data yang dikirim dalam iframe, masing-masing iframe yang dimulai dengan byte 0 × 00 dan berakhir dengan 0xFF byte. Antara awal dan akhir, berisi UTF-8 data, seperti:

\x00Bonjour, bienvenue dans le monde des WebSockets\0xff

Tidak ada batas ditetapkan untuk ukuran data yang dapat dikirim, dan ini, selama klien dapat mengelola. Dalam JavaScript, batas tersebut ditetapkan oleh bahasa, yang tidak mengirimkan lebih dari 4 GB data.
Dengan WebSocket protokol, setiap paket data memiliki anggaran hanya 2 byte, sehingga biaya overhead kecil dibandingkan dengan header dalam permintaan HTTP dan header respon.

Security

Sejumlah penelitian telah dilakukan oleh para ahli security pada penggunaan WebSockets. Setelah studi ini laporan dibuat menunjukkan bahwa kelemahan signifikan yang ditemukan, termasuk kemungkinan keracunan tembolok URL (cache-keracunan) dalam kasus adanya proxy transparan. Tujuan dari kesalahan ini adalah untuk memalsukan URL dari situs rentan dengan menampilkan halaman berbahaya tetap menjaga url target situs yang sama.

Setelah studi ini, Opera dan browser Firefox telah memutuskan untuk menonaktifkan dukungan mereka untuk WebSockets (yang dapat diaktifkan kembali dalam pilihan) untuk mengatasi masalah ini dalam versi masa depan.

Kesimpulan

WebSocket protokol merupakan langkah besar dalam komunikasi client-server. HTTP, tidak terhubung dan tidak ada state, yang secara historis belum disediakan untuk membangun hubungan permanen atau mendorong data, tampaknya akan terlampaui … Nah, tentu saja, beberapa teknik telah dikembangkan untuk menghindari masalah ini dan memungkinkan penerimaan Data update hampir seketika ((polling, long polling ….), tetapi tetap membanjiri jaringan dengan HTTP header yang tidak perlu. Maka WebSocket akan segera memperbaiki.

Dengan kontra, spesifikasi masih muda dan tidak belum dukungan besar di antara browser. Selain browser, WebSockets juga masalah infrastruktur karena hanya untuk menyediakan server HTTP melainkan sebuah WebSocket. Sudah ada beberapa server sebagai solusi Kazzing, tetapi pasokan masih sangat terbatas dan eksperimental. Para WebSockets tidak eksklusif untuk Kaazing. Google adalah pembela awal. Selain membangun teknologi ke dalam browser Chrome , perusahaan mendukung situs yang menunjukkan bagaimana developer untuk menerapkannya.

Ini akan memakan waktu lama sebelum mereka bisa mendapatkan keuntungan dari server WebSocket terbukti. Selain itu, pelaksanaan rendah WebSockets memanfaatkan sulitnya mereka untuk saat ini. Akhirnya, kesimpulan yang sama dengan masalah dan kekurangan mengangkat pengingat bahwa spesifikasi tersebut masih dalam keadaan draft …

Apa pendapat anda adalah masa depan dari protokol ini? Apakah mampu bersaing dengan HTTP?

Related Posts

  • WYSIWYG dan WYSIWYM: Keuntungan dan Kerugian dari Editor Teks
  • WP Theme Generator : Membuat Tema WordPress Tanpa Coding
  • WordPress Anti-Spam Plugins
  • Website Layouts: 50 Photoshop Tutorial Profesional
  • Website Design Inspiration Daftar Game Terbaik Desain Situs Web #34
Share This
4 Responses to HTML5 WebSockets : Pengganti Protokol HTTP
  1. POINGAME.COM

    August 13, 2012 at 12:24 pm
    Reply

    BACA2 DULU NI SOB….LAMA GA MAMPIR,GIMANA NI KBRNYA?APA UDA MERDEKA

    • CSSweaver

      August 15, 2012 at 8:46 am
      Reply

      hahhaha blom merdeka ini sob…

  2. Klanat

    December 3, 2012 at 11:55 am
    Reply

    Kirain HTML5 tuh diciptain khusus buat anak2 desainer aja, eh gak taunya mendukung webSocket juga.. Thanx alot mas brow :)

  3. wkurniadhi

    January 10, 2013 at 3:43 am
    Reply

    yap sama2 brow…

Cancel Reply
Leave a Reply





Categories

  • Article
  • CSS
  • CSS3
  • Dictionary
  • Download
  • Freebies
  • Graphic Design
  • HTML5
  • Infographic
  • jQuery
  • PSD Web Design
  • User Interface
  • Web Design
  • Web Design Inspiration
  • Website Tool
  • Wordpress

Archives

  • May 2013 (14)
  • April 2013 (24)
  • March 2013 (26)
  • February 2013 (25)
  • January 2013 (33)
  • December 2012 (27)
  • November 2012 (21)
  • October 2012 (25)
  • September 2012 (21)
  • August 2012 (35)
  • July 2012 (44)
  • June 2012 (42)
  • May 2012 (37)
  • April 2012 (59)
  • March 2012 (45)

Recent Posts Widget

Kumpulan Resource CSS3 Animasi dan Transisi
April 19, 2013
Contoh Website Musik Unik untuk Band dan Musisi #46
April 11, 2013
Membuat Animasi Tab Konten dengan CSS3
March 28, 2013
Website Tools untuk Membatu Membuat Web Design Responsive
March 26, 2013
Merancang Website yang Fleksibel
March 20, 2013

Popular Posts

Cara Buat Slider Gambar menggunakan jQuery dan CSS3
57 Comments
Kumpulan Blogger Theme Anime [Freebies]
42 Comments
30 Design Keren untuk Halaman 404 Error
42 Comments
Kumpulan Plugin jQuery Image dan Sliders [Tutorial and Freebies]
36 Comments
25+ Contoh Website HTML5 dan CSS3 Terbaru #015
26 Comments

Recent Comments

  • rifki on Kumpulan Resource CSS3 Animasi dan Transisi
  • cssweaver on HTML5 : Kumpulan Tutorial Dasar untuk Pemula, dan Daftar Semua Tag HTML5
  • cssweaver on Membuat Audio Player dengan Menggunakan JQuery, HTML5 dan CSS3 [Tutorial]
  • Basyiri Rahmanto on Membuat Audio Player dengan Menggunakan JQuery, HTML5 dan CSS3 [Tutorial]
  • arman on HTML5 : Kumpulan Tutorial Dasar untuk Pemula, dan Daftar Semua Tag HTML5

Backlink




Top Web-Design Sites


© Copyright 2012, Designed by CSS-weaver wkurniadhi@gmail.com