Showing posts with label Socket. Show all posts

WebSocket (Real-time) HTML5 Chat in 5 minutes - node.js & partial.js



Web Socket

Sejarah HTML5 Websocket

Asal muasal dari diwujudkannya websocket adalah permintaan beberapa client yang mengharuskan developer bisa membuat aplikasi berbasis web secara real time / real-time apps, aplikasi dimana ketika ada perubahan data, maka saat itu juga website juga ada perubahan atau paling tidak ada notifikasi. Dulu, developer bisa membuatnya, tapi tidak se-real time yang dimaksudkan. Contohnya saja metodePolling. Metode ini adalah metode untuk request data dari server secara terus menerus. Kalau hanya satu client yang melakukan request berulang seperti itu, mungkin tidak masalah, tapi bagaimana jika ada beberapa client yang mengakses satu server dan berulangkali melakukan metode Polling. Maka server akan jadi sibuk dan rentan terkena serangan DDOS.
Akhirnya ada metode baru lagi yang dinamakan Long Polling. Metode ini adalah metode polling dengan interval waktu yang berkala. Jadi request tidak sesering metode Polling. Manfaatnya adalah server jauh lebih stabil dibandingkan dengan metode Polling. Namun permasalahannya sederhana, Long Polling tidak menjawab real time, karena ada interval waktu yang digunakan.
Kemudian, setelah sekian lama diinginkan, akhirnya dikembangkanlah WebSocket. Ide Websocket muncul pada tahun 2009 sebagai proposal, kemudian dikembangkan selama 3 tahun sehingga WebSocket sekarang jauh lebih stabil dan sudah banyak di-support oleh bermacam-macam browser.
Beberapa kelebihan dari websocket:
  1. Native Javascript, tidak perlu tambahan library
  2. Simple
  3. Low Latency (rentang waktu dalam kirim-terima data)
  4. Komunikasi dua arah
  5. Ringan
Beberapa faktor yang menyebabkan banyak developer masih meragukan keunggulan websocket:
  1. Hanya modern Browser yang support (bye, IE6)
  2. Membutuhkan port sendiri
Bahasa pemrograman dari server-side yang sudah support dengan WebSocket:
  1. PHP
  2. Ruby on Rails
  3. Java
  4. NodeJS
  5. Python

Pengertian Websocket

WebSocket merupakan sebuah protokol komunikasi dua arah yang dapat digunakan oleh browser. Jika pada AJAX kita hanya dapat melakukan komunikasi satu arah dengan mengirimkan request kepada server dan menunggu balasannya, maka menggunakan WebSocket kita tidak hanya dapat mengirimkan request kepada server, tetapi juga menerima data dari server tanpa harus mengirimkan request terlebih dahulu. Hal ini berarti ketika menggunakan WebSocket pengguna harus terus menerus terkoneksi dengan server, dan kita memerlukan sebuah server khusus untuk dapat menjalankan aplikasi WebSocket dengan benar. Sederhananya, perhatikan gambar berikut:
perhatikan gambar berikut:
_images/AJAXvsWebSocket.png
Dari gambar di atas, kita dapat melihat bagaimana dalam kasus AJAX, setiap request dari pengguna maupun respon dari server dilakukan secara terpisah. Jika ingin mengirimkan request ke server, kita perlu membuka koneksi baru yang kemudian akan dibalas oleh server seperti ia membalas permintaan halaman HTML biasa. Server juga tidak dapat langsung melakukan pengiriman data ke klien tanpa ada permintaan terlebih dahulu. Hal ini berbeda dengan pola komunikasi WebSocket, di mana koneksi berjalan tanpa terputus dan server dapat mengirimkan data atau perintah tanpa harus ada permintaan dari pengguna terlebih dahulu. Dengan begitu, WebSocket bahkan juga memungkinkan server mengirimkan data atau perintah ke semua klien yang terkoneksi, misalkan untuk memberikan notifikasi global.
Untuk dapat melihat langsung bagaimana cara kerja WebSocket, kita akan langsung melakukan eksperimen. Objek yang diperlukan untuk menggunakan WebSocket dari browser adalah WebSocket. Tetapi sebelumnya, kita memerlukan sedikit persiapan terlebih dahulu, yaitu komponen server dari WebSocket.

Komponen Server WebSocket

Teknologi WebSocket membutuhkan cara penggunaan yang sama sekali berbeda dibandingkan dengan AJAX. Jika pada AJAX kita dapat mengguankan komponen server yang sama dengan server HTTP pada umumnya, untuk WebSocket kita memerlukan komponen server khusus. Hal ini disebabkan oleh model komunikasi WebSocket yang mengharuskan pengguna terkoneksi dengan server sepanjang aplikasi masih digunakan. Arsitektur server yang diperlukan untuk melayani banyak koneksi terbuka seperti ini tentu berbeda dengan arsitektur yang dibutuhkan untuk koneksi satu arah seperti pada HTTP. Ketika menggunakan WebSocket, biasanya kita akan memerlukan komponen server (beserta kode sisi server) khusus.
Adapun beberapa contoh komponen server untuk WebSocket yaitu:
  1. Socket.IO (Javascript)
  2. SignalR (.Net)
  3. Jetty (JVM)
  4. Event Machine (Ruby)
  5. Tornado (Python)
Bahasa yang disebutkan pada daftar di atas adalah bahasa yang digunakan pada sisi server.

Persiapan Eksperimen WebSocket

Sebelum kita dapat mencoba menggunakan WebSocket, terlebih dahulu kita akan perlu membangun komponen server yang dapat mengerti protokol WebSocket, dan dapat mengerti pesan yang akan kita kirimkan kepada mereka. Untuk memudahkan pembaca, sebuah komponen server khusus telah disiapkan. Silahkan download sampel komponen server (websocket-sample) ini terlebih dahulu.
Terdapat dua buah server yang diberikan, yaitu:
  1. index.js merupakan komponen yang dirancang sebagai server dari sistem chatting sederhana.
  2. zero.js merupakan komponen yang dirancang sebagai server sistem menonton game (seperti twitch.tv) sederhana.
Kita akan membangun klien dari index.js dari awal, sementara klien untuk zero.js akan dimodifikasi dari contoh permainan sederhana yang sudah dipersiapkan sebelumnya. Silahkan download juga kode untuk permainan serderhana tersebut, dan coba pelajari cara kerjanya.
Menjalankan server WebSocket dari kedua kode tersebut juga sangat mudah, cukup eksekusi kode dengan NodeJS:
1
2
$ node index.js
$ node zero.js
Setelah memilki semua komponen dasar yang diperlukan, kita akan mulai mempelajari WebSocket dengan menelaah objek WebSocket terlebih dahulu.

Membuat Objek WebSocket

Pembuatan objek WebSocket (selanjutnya dirujuk sebagai ws saja) sangat mudah. Kita dapat langsung memanggilconstructor dari objek tanpa perlu melakukan pengecekan tambahan. Berikut adalah contoh pembuatan objek WebSocket baru:
1
var ws = new WebSocket("ws://www.example.com/socketserver");
Dan kita telah membuat sebuah objek WebSocket, sekaligus mencoba melakukan koneksi ke alamat yang diberikan padaconstructorConstructor dari ws juga memiliki parameter kedua yang bersifat opsional. Parameter kedua ini dapat berupa sebuah string ataupun array dari string, yang berisi nama dari subprotokol WebSocket yang akan kita gunakan. Subprotokol merupakan “pesan” tambahan yang dapat kita kirimkan ke server agar server mendapatkan informasi tambahan yang dibutuhkan untuk memberikan respon. Subprotokol ini dibuat oleh pengembang sendiri, dan baik klien maupun server harus dapat mengerti subprotokol yang dikirimkan. Kegunaan utama dari subprotokol adalah agar baik klien maupun server dapat yakin bahwa lawan bicaranya benar-benar mengerti pesan yang dikirimkan maupun diterima. Kita tidak ingin server Dota2 versi 1 berkomunikasi dengan klien Dota2 versi 2 misalnya.
Penambahan subprotokol pada constructor WebSocket tidak rumit sama sekali:
1
2
var ws1 = new WebSocket("ws://www.example.com/socketserver", "dota2v1");
var ws2 = new WebSocket("ws://www.example.com/socketserver", ["dota2v1", "dota2v2"]);
Ketika kita mengirimkan array sebagai parameter kedua, berarti kita memberitahukan ke server bahwa klien yang dibangun dapat mengerti semua protokol yang ada di dalam array tersebut. Begitupun, pada akhirnya server lah yang menentukan protokol mana yang akan digunakan. Klien kemudian dapat mengelola data atau perintah sesuai dengan protokol yang digunakan server.

Menanggapi Server WebSocket

Setelah membuka koneksi, tentunya kita ingin berinteraksi dengan server. Pertama-tama, mari kita lihat terlebih dahulu bagaimana cara menangani perintah maupun data yang diberikan oleh server kepada kita.
Terdapat empat method utama yang dapat kita gunakan untuk menangani data dan perintah yang dikirimkan server:
  1. ws.onerrormethod yang dijalankan ketika terjadi kesalahan pada koneksi dengan server. Bersifat opsional.
  2. ws.onclosemethod yang dijalankan ketika koneksi dengan server telah ditutup. Bersifat opsional. Memiliki satu parameter, CloseEvent yang menyimpan detil pesan kesalahan yang terjadi.
  3. ws.onopenmethod yang dijalankan pertama kali ketika telah tersambung dengan server. Bersifat opsional.
  4. ws.onmessagemethod yang dijalankan ketika menerima pesan dari server. Memiliki satu parameter yang berisiMessageEvent, sebuah objek event yang juga menyimpan data berupa pesan dari server melalui propertiMessageEvent.data.
Keempat method yang ada di atas dapat digunakan semuanya ataupun hanya ws.onmessage saja. Karena model pemrograman yang bersifat *event based*, kita cukup hanya menspesifikasikan fungsi yang dijalankan pada setiap eventdi atas saja. Browser akan secara otomatis mengeksekusi kode ketika event terjadi. Berikut adalah contoh penggunaan keempat fungsi di atas:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var ws = new WebSocket("ws://www.example.com/socketserver");

ws.onopen = function() {
    console.log("Koneksi berhasil!");
};

ws.onerror = function () {
    console.log("Koneksi gagal.");
};

ws.onclose = function (event) {
    console.log("Koneksi telah ditutup. Pesan penutupan: " + event.code);
};

ws.onmessage = function (message) {
    var data = JSON.parse(message.data);

    // lakukan sesuatu dengan data
};
Perhatikan bagaimana kita menggunakan JSON.parse untuk melakukan pembacaan data pada ws.onmessage. Meskipun kita dapat menggunakan format lain seperti XML atau bahkan Blob untuk data yang diberikan server, JSON merupakan format yang paling umum. Intinya adalah kita dapat menggunakan format apapun untuk bertukar data, selama klien dan server mengerti format tersebut.

Berbicara dengan Server

Mengirimkan data atau perintah ke server WebSocket dapat dilakukan dengan menggunakan method ws.send. Penggunaannya sangat gamblang:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ws.send("Data Server"); // mengirimkan string

// atau bahkan
var obj = {
    message: "Sebuah Pesan Rahasia",
    key: "F5-A1-00-32-E4",
    command: "Run"
};

ws.send(JSON.stringify(obj));
ws.send menerima hanya satu parameter, yang dapat berisi DOMStringArrayBuffer, maupun Blob. Pada kode di atas kita hanya menggunakan string (DOMString) saja, bahkan untuk objek yang akan dikirimkan ke server.

Studi kasus

Sekilas penggunaan WebSocket terlihat cukup mudah dan sederhana. Untuk lebih mendalami pengertian akan WebSocket, kita akan langsung mencoba membangun aplikasi klien WebSocket. Ingat, terlebih dahulu kita perlu server khusus dalam ujicoba ini. Silahkan lihat bagian Persiapan Eksperimen WebSocket untuk detail aplikasi server yang dibutuhkan dalam eksperimen ini.

Kasus 1: Aplikasi Chatting

Aplikasi yang paling pertama akan kita kembangkan adalah aplikasi chatting sederhana. Agar dapat berfokus pada pengiriman dan penerimaan pesan saja, kita akan menggunakan kode HTML yang sangat sederhana, sebagai berikut:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Websocket test</title>
    </head>
    <body>
            <ul id="chat"></ul>
            <input type="text" id="chatinput">

            <script type="text/javascript" src="chat.js"></script>
    </body>
    </html>
Selanjutnya, kita akan mengisikan chat.js dengan kode koneksi ke server WebSocket, sesuai dengan yang kita pelajari sejauh ini:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var chat      = document.querySelector("#chat"),
        chatinput = document.querySelector("#chatinput"),
        websocket = new WebSocket("ws://127.0.0.1:8080"), // #1
        addChat   = function (data) {                     // #2
                    var newChat = document.createElement("li"),
                        newText = document.createTextNode(data);

                    newChat.appendChild(newText);
                    chat.appendChild(newChat);
        };

    // #3
    websocket.onmessage = function (event) {
            addChat(event.data);
    }

// #4
    chatinput.addEventListener("keydown", function (evt) {
            if (evt.keyCode === 13) {
                    addChat(chatinput.value);
                    websocket.send(chatinput.value); // #5
                    chatinput.value = "";

                    return false;
            }
    });
Penjelasan kode (sesuai dengan nomor yang diberikan pada komentar):
  1. Pembuatan objek WebSocket untuk membuka koneksi dengan server. Pastikan IP dan port yang digunakan benar pada bagian ini.
  2. Fungsi addChat merupakan fungsi yang akan kita gunakan untuk menambahkan chat baru ke elemen #chatinput.
  3. Setelah membuat semua variabel dan fungsi yang dibutuhkan, kita kemudian mengikatkan WebSocket.onmessagekepada satu fungsi anonim. Fungsi ini tugasnya sangat sederhana: menambahkan chat baru dengan data yang didapatkan dari server. Hal ini berarti chat baru yang ditambahkan melalui WebSocket.onmessage selalu adalah chat yang dikirimkan oleh pengguna lain.
  4. Pada langkah ini kita menambahakn pemantau event keydown pada #chat, yang akan mengirimkan data ke server ketika pengguna menekan tombol Enter (key code 13).
  5. Mengirimkan data ke server sangat sederhana, cukup dengan satu baris perintah ini saja.
Seperti yang dapat kita lihat, implementasi WebSocket, baik dari sisi pengiriman data ke server maupun pengolahan data yang diterima dari server cukup mudah. Yang menjadi tantangan dalam penggunaan WebSocket biasanya adalah kapan pengiriman data dilakukan, dan apa yang harus dilakukan terhadap data yang dikirimkan oleh server.
Berikut adalah tampilan akhir dari aplikasi yang kita kembangkan:
_images/ChatAppSample.gif

Sumber : 
http://mediabisnisonline.com/liputan-workshop-femaledev-surabaya-html5-websocket/
http://bertzzie.com/knowledge/javascript-lanjut/WebSocket.html

TCP Sockets Programming Part2 - Class Socket

Socket(InetAddress address, int port)
Membuat sebuah stream socket dan koneksi ke suatu nomor port pada suatu komputer yang memiliki alamat IP.
Socket(String Host, int port)

Membuat stream socket dan juga koneksi ke suatu port komputer berdasarkan nama komputernya.

Socket(String host, int port, InetAddress localAddr, int localPort):

  • Membuat sebuah socket dan mengkoneksikannya ke port yang dituju pada alamat IP yang disebutkan pada parameter address atau nama host.
  • Melakukan bind socket ke alamat lokal dan port lokal. (Jika koneksi antara client dan server membutuhkan nomor port yang sudah ditentukan.

getInetAddress()
Untuk mendapatkan nama host yang dituju dan alamat Ipnya
getPort()
Untuk mendapatkan nomor remote host
getLocalPort()
Untuk mendapatkan nomor port localhost
getLocalAddress()
Untuk mendapatkan alamat local dimana socket digunakan
getInputStream()
Mengembalikan objek input stream dari socket
getOutputStream()
Mengembalikan objek output stream ke socket
setSoTimeout(int timeout)

getSoTimeOut()
  • Kedua method tersebut digunakan untuk memberi (set) dan mengambil (get) nilai opsi Socket untuk time out block (dalam milidetik) reading dari socket (SO_TIMEOUT). Jika dalam waktu timeout tidak mendapat suatu nilai maka, akan dilemparkan ke exception java.net.SocketTimeoutException.
  • Nilai default timeoutnya adalah 0, yang berarti tanpa batas.
setTCPNoDelay(boolean on)

getTCPNoDelay()
  • Kedua method ini digunakan untuk memberi dan mengambil nilai opsi Socket TCP_NODELAY
  • TCP_NODELAY yaitu untuk mengaktifkan atau menonaktifkan Algoritma Nagle (RFC 896)
  • Algoritma Nagle (RFC 896), yaitu algoritma yang membuat TCP lebih efisien dalam konsumsi bandwidth dengan cara memperlambat penulisan data dalam ukuran yang kecil sehingga data-data yang ada dapat terkirimkan dalam suatu paket dengan ukuran besar.
  • Nilai default opsi ini adalah aktif. Namun jika diinginkan adanya pengurangan network latency (waktu delay dalam pengiriman paket) dan meningkatkan unjuk kerja, maka opsi ini harus di nonaktifkan (di set dengan nilai false), namun akibatnya konsumsi bandwidth akan bertambah besar.
setSoLinger(boolean on, int linger)

getSoLinger()
Method tersebut akan mengaktifkan (true) atau menonaktifkan (false) opsi SO_LINGER dengan nilai waktu linger dalam milidetik. Opsi ini berpengaruh ketika socket ditutup, yaitu menentukan nilai waktu maksikum koneksi yang masih akan dipertahankan sampai socket koneksi benarbernar ditutup. Hal ini berguna untuk mengirim dan memberikan ACK (acknowledge) terhadap data yang belum terkirim.
setSendBufferSize(int size)
 
getSendBufferSize()
Method ini akan mengatur dan mengambil informasi tentang ukuran buffer SO_SNDBUF, yaitu buffer untuk mengiriman. Ukuran ini juga harus disesuaikan ukuran buffer pada level network.
setReceiveBufferSize(int size)

getReceiveBufferSize()
  • Method ini digunakan jika Anda ingin mengatur ukuran buffer SO_RCVBUF
  • SO_RCVBUF yaitu buffer yang digunakan untuk menampung paket yang masuk. Ukuran buffer ini juga digunakan untuk mengatur ukuran window yang diterapkan oleh TCP untuk flow controlnya (sliding window). Dalam pemanfaatan opsi ini, perlu dipastikan antara RCVBUF client dengan server ada sinkronisasi, sehingga sebelum server membind port yang akan digunakan ke socket (TCP) ataupun sebelum client membuka koneksi ke server, terlebih dahulu opsi ini harus di atur, jika Anda ingin mengaturnya.

Kelas-kelas Exception yang dibangkitkan Socket, ketika ada kesalahan :

SocketException
Kelas ini merupakan kelas yang diturunkan dari kelas IOException. Kelas exception ini dipanggil atau dipicu ketika ada kegagalan dalam pemakaian socket,
Contoh adalah kegagalan dalam protokol TCP.
BindException
Exception ini akan dipanggil ketika ada port lokal yang akan digunakan sudah terpakai oleh yang lain, atau ada kegagalan dalam permintaan untuk menggunakan alamat.

ConnectException
Exception ini akan dipanggil ketika sebuah koneksi ditolak oleh host yang dituju, oleh karena tidak ada proses yang siap menerima data pada port yang dituju.
NoRouteToHostException
Koneksi yang akan dibangun tidak dapat dipenuhi oleh karena melebihi waktu timeout yang tersedia atau host yang dituju tidak dapat dicapai (unreachable).

TCP Sockets Programming Part1

TCP socket adalah sebuah soket yang memiliki sifat antara lain :

  • Connection-oriented

Sebelum data dapat ditransmisikan antara dua host, dua proses yang berjalan pada lapisan aplikasi harus melakukan negosiasi untuk membuat sesi koneksi terlebih dahulu.

  • Full-duplex
Data dapat secara simultan diterima dan dikirim.
  • Reliable
Data yang dikirimkan ke sebuah koneksi TCP akan diurutkan dengan sebuah nomor urut paket dan akan mengharapkan paket positive acknowledgment dari penerima.
  • Byte stream
TCP melihat data yang dikirimkan dan diterima melalui dua jalur masuk dan jalur keluar TCP sebagai sebuah byte stream yang berdekatan (kontigu).

Java Socket

Socket adalah sebuah abstraksi perangkat lunak yang digunakan sebagai suatu "terminal" dari suatu hubungan antara dua mesin atau proses yang saling berinterkoneksi.

Socket biasa digunakan untuk pemrograman berbasis client-server yang dapat menggunakan socket TCP/I atau socket UDP

Pada J2SE telah disediakan package java.net

  • berisi kelas-kelas dan interface yang menyediakan API(Application Programming Interface), level rendah (Socket, ServerSocket, DatagramSocket) dan level tinggi (URL, URLConnection).
  • Memungkinkan programmer membuat program yang dapat mengakses server di Internet
  • Memungkinkan programmer membuat server Internet (jaringan) sendiri

INGAT:
Socket akan membangun komunikasi antar proses yang sama-sama aktif.


Java Socket class digunakan di server maupun di client
- Java program yang biasanya digunakan dalam socket client memperlihatkan beberapa kebiasaan yaitu :
  1. Membuat socket baru dengan constructor
  2. Socket membuat koneksi ke remote machine
  3. Sekali koneksi dibangun maka antara host yang satu dengan yang lainnya

ARSITEKTUR CLIENT-SERVER

Client/Server dapat diartikan sebagai kemampuan komputer untuk meminta layanan request data kepada komputer lain.  Komputer yang meminta layanan disebut sebagai client, sedangkan yang menyediakan layanan disebut sebagai server


Pengertian lain, client melakukan permintaan suatu informasi atau mengirim perintah ke server. Server akan menerima permintaan dan perintah client. Kemudian server akan memproses memproses berdasarkan permintaan tersebut, dan mengembalikan kepada client sebagai hasil pemrosesan yang sudah dilakukan.
Arsitektur Model Client/Server

Service Request adalah permintaan dari client baik berupa permintaan data  maupun perintah ke server. 
Service Response berupa balasan dari server atas permintaan dari client berupa hasil proses. 
Data yang diminta oleh client dapat diambil dari database pada sisi server yang sering disebut database server, seperi misalnya MySQL, PostgreSQL, Oracle, atau SQL Server.

Karakteristik Client-Server:
v  Client dan Server merupakan item proses (logika) terpisah yang bekerja sama pada suatu jaringan komputer untuk mengerjakan suatu tugas
v  Service : Menyediakan layanan terpisah yang berbeda
v  Shared resource : Server dapat melayani beberapa client pada saat yang sama dan mengatur pengaksesan resource
v  Asymmetrical Protocol : antara client dan server merupakan hubungan one-to-many. Client memulai komunikasi dengan mengirim request ke server. Server menunggu permintaan dari client. Kondisi tersebut juga memungkinkan komunikasi callback.
v  Transparency Location : proses server dapat ditempatkan pada mesin yang sama atau terpisah dengan proses client. Client/server akan menyembunyikan lokasi server dari client.
v  Mix-and-match : tidak tergantung pada platform
v  Message-based-exchange : antara client dan server berkomunikasi dengan mekanisme pertukaran message.
v  Encapsulation of service : message memberitahu server apa yang akan dikerjakan
v  Scalability : sistem C/S dapat dimekarkan baik vertikal maupun horisontal
v  Integrity : kode dan data server diatur secara terpusat, sedangkan pada client tetap pada komputer tersendiri

MIDDLEWARE
Software yang berfungsi sebagai lapisan konversi atau penerjemah. Juga sebagai konsolidator dan integrator. Middleware saat ini dikembangkan untuk memungkinkan satu aplikasi berkomunikasi dengan lainnya walaupun berjalan pada platform yang berbeda.

ARSITEKTUR SOFTWARE
-         Data, menyediakan struktur dan fungsi untuk manipulasi informasi, yang terdiri dari banyak objek data. Sebagai contoh : relational Database, file grafik, file suara atau multimedia data stream
-         Processing, terfokus pada pemrosesan objek data, yang biasanya disebut sebagai middleware.
-    Presentation, terfokus untuk membuat data tersedia untuk user dan menangani interaksi dengan user. Ada dua level :
Ø User interface
Ø Presentation management, menyediakan operasi dasar untuk membangun dan mengontrol user interface di bawah kontrol aplikasi. Meliputi : layanan tampilan, kontrol dialog dan API. Contoh : X-Windows, MS Windows