Ivan Bachtiar

jangan lakukan apabila hatimu tak senang

Home · About · Contact · Music · Galery · Template

HTML5 Web Socket

Membahas HTML5 terkesan hambar jika tidak membahas Teknologi yang melekat dengannya, yaitu WebSocket.
Menurut Wiki, WebSocket adalah Teknologi yang menyediakan kanal komunikasi bi-directional, full-duplex melalui socket Transmission Control Protocol (TCP), dan dirancang untuk diimplementasikan di web browser serta web server, dan tidak terlepas kemungkinan untuk dimanfaatkan oleh aplikasi native client-server.
SEJARAH
Membuat aplikasi web yang membutuhkan komunikasi bi-directional antara client dan server (mis. Instant Messaging dan aplikasi game) membutuhkan resource yang besar bagi protokol HTTP.
Hal tersebut menimbulkan permasalahan sebagai berikut:
  • Server dipaksa untuk menggunakan sejumlah koneksi TCP ke setiap client, satu untuk mengirim informasi ke client dan satunya lagi untuk pesan yang akan datang.
  • Protokol dengan media kabel memiliki potensi overhead yang tinggi, karena masing-masing pesan client-server memiliki HTTP-Header.
  • Script di sisi client dipaksa untuk mempertahankan proses mapping dari koneksi yang dikeluarkan ke koneksi yang datang untuk melacak balasan.
KEUNGGULAN
Dengan permasalahan di atas, solusi terbaik adalah dengan menggunakan koneksi single-TCP untuk melayani lalu-lintas dua arah.
HTML5 Web Socket dapat mengurangi secara signifikan gangguan pada lalu lintas jaringan. HTML5 Web Socket juga dapat diimplementasikan dengan proxy dan firewall, memungkinkan streaming untuk berjalan di koneksi apapun., dan dengan kemampuan untuk melayanani komunikasi upstream dan downstream dengan satu koneksi, aplikasi yang menggunakan HTML5 Web Socket dapat mengurangi beban pada server yang berimplikasi dengan kemampuan server untuk melayani lebih banyak lagi koneksi konkuren. Gambar di bawah ini menunjukan arsitektur WebSocket dimana Browser menggunakan sebuah koneksi WebSocket untuk full-duplex, terhubung langsung dengan remote hosts.
HTML5 Web Socket
Apakah browser Anda sudah mendukung WebSocket?
Ketikkan javascript berikut di halaman HTML Anda untuk melihat apakah browser yang Anda gunakan sudah mendukung WebSocket.
if (window.WebSocket) {
  alert("WebSockets is supported in your browser.");
} else {
  alert("WebSockets is NOT supported in your browser.");
}
atau
if ("WebSocket" in window) {
    var ws = new WebSocket("ws://echo.websockets.org/");
    ws.onopen = function() {
        console.log("WebSockets connection opened");
        ws.send("a test message");
    }
    ws.onmessage = function(e) {
        console.log("Got WebSockets message: " + e.data);
    }
    ws.onclose = function() {
        console.log("WebSockets connection closed");
    }
} else {
    alert("No WebSockets support");
}
Server Websocket
NodeJS

NodeJS adalah framework Javascript yang mengimplementasikan multiple WebSocket Servers, dengan menggunakan server-side JavaScript dengan model asynchronous event-driven. Hal tersebut memungkinkan Node.js memiliki performance terbaik untuk mendukung arsitektur di semua aplikasi internet.
Felix Geisendörfer menjelaskan dengan sederhana apa itu NodeJS:
  • Sebuah command line tool. Anda mengunduh tarball, melakukan proses compile dan install.
  • Berkerja pada program Javascript dengan mengetikkan ‘node my_app.js’ di Terminal Anda.
  • JS dieksekusi oleh V8 javascript engine (mesin yang membuat Google Chrome berkerja cepat).
  • Node menyediakan sebuah JavaScript API untuk mengakses Network dan File System.
Selain Node.js, ada beberapa pilihan Server WebSocket, antara lain:
Anda dapat menemukan contoh-contoh script untuk mengimplementasikan NodeJs ataupun framework lainnya yang mendukung WebSocket, bahkan Anda bisa memulainya dengan Native Script dari Websocket.org :D
Demikian tulisan singkat ini sebagai pendahuluan WebSocket, berharap akan ada tulisan berikutnya mengenai implementasi NodeJS dengan contoh yang sederhana.
Selamat malam temans.
Referensi:
Gambar:
  • Ilustrasi arsitektur dasar WebSocket => http://websocket.org/
  • Logo NodeJS => http://nodejs.org/

4 komentar untuk "HTML5 Web Socket"

  1. permisi pak, saya ada sedikit tulisan mengenai websocket di nodejs, silahkan jika ingin mengoprek: http://datacomlink.blogspot.com/2015/11/script-nodejs-websocket-rfc-6455-server.html ditunggu feedback'nya, semoga menambah wawasan bersama pak..

    BalasHapus