PEREKAYASAAN TEKNOLOGI XML DAN XMPP DALAM MEMBANGUN MULTIPLAYER ONLINE GAME “ULAR TANGGA”

(1)

PEREKAYASAAN TEKNOLOGI XML DAN XMPP DALAM

MEMBANGUN MULTIPLAYER ONLINE GAME “ULAR TANGGA”

Haddad Sammir

Sistem Informasi, STMIK Jayanusa Padang, Jl. Olo Ladang No. 1 Padang email: h.sammir@gmail.com

Abstract

This research manipulate Extensible Markup Language (XML) and Extensible Messaging and Presence Protocol (XMPP) to deliver real-time communication on the web application and oriented to create web based Snake and Ladder network application. Applications are designed to take advantage of the jQuery as a tool that manipulate XML and Strophe.js that implements XMPP protocol in JavaScript. Both are built using JavaScript. By using XMPP two or more web application can talk each other in realtime.

Keywords: web, XMPP, javascript, real time web

Abstrak

Penelitian ini merekayasa teknologi Extensible Markup Language (XML) dan Extensible Messaging and Presence Potocol (XMPP) untuk menghadirkan komunikasi realtime pada aplikasi web permainan ular tangga. Aplikasi dirancang dengan memanfaatkan software library jQuery sebagai alat bantu perekayasaan XML dan Strophe.js yang mengimplementasikan protokol XMPP dalam JavaScript yang keduanya dibangun menggunakan JavaScript. Protokol XMPP berhasil menghadirkan aplikasi web yang realtime dan responsif.

Kata Kunci: web, XMPP, javascript, real time web

PENDAHGULUAN Latar Belakang Penelitian

XMPP merupakan sebuah teknologi yang memungkinkan terjadinya pengiriman pesan dan presence secara real time

menggunakan XML. Sifatnya yang

extensible menjadikan XMPP dapat dikembangkan sesuai dengan kebutuhan. Salah satu cara memperluas penggunaan XMPP adalah dengan melakukan perekayasaan XML.

Game online multiplayer berbasis

web membutuhkan komunikasi real time

sehingga setiap pemain dapat langsung berintraksi tanpa perlu melakukan refresh

(2)

berkala untuk interval waktu tertentu. Pendekatan ini bisa menimbulkan kendala karena data terkini baru akan diterima setelah interval waktu terntentu meskipun data telah tersedia sebelum jeda waktu tercapai.

Teknologi Bi-directional Stream Over Synchronous HTTP (BOSH) yang dimanfaatkan oleh protocol XMPP dapat digunakan untuk menghadirkan komunikasi

real time antar halaman web. BOSH memungkinkan komunikasi terjadi antar halaman web dengan server XMPP dan antar halaman web lainnya yang terhubung. Kombinasi dengan JQuery memungkinkan pembaharuan halaman HTML tanpa melakukan refresh halaman. Kombinasi ini dapat menghadirkan pengalaman real-time

pada halaman web seolah—olah sedang mengakses aplikasi desktop.

Extensible Markup Language (XML)

XML (eXtensible Markup Language) adalah sebuah bahasa markah untuk mendeskripsikan data. XML merupakan turunan (subset) atau versi ringkas dari SGML (Standard Generalized Markup Language), sedangkan SGML merupakan sebuah standar ISO untuk format dokumen. SGML tidak berisi berupa tag-tag siap pakai seperti halnya bahasa HTML, melainkan berupa aturan-aturan standar dalam pembuatan tag-tag format dokumen. SGML banyak dipakai untuk mengelola dokumen dalam jumlah besar, frekuensi revisi tinggi dan dibutuhkan dalam beragam format tampilan. SGML jarang dipakai karena sangat rumit dan kompleks. XML dibuat dengan konsep yang lebih sederhana dan ringkas, tujuannya agar bisa dipakai

sebagai aplikasi desktop dan jaringan internet.

XML dengan cepat diadopsi sebagai standar pertukaran data, khususnya untuk penggunaan lintas aplikasi dan platform. Kelebihan dari XML adalah karakteristiknya yang extensible dan

platform independent. Berbeda dengan HTML, XML tidak mempunyai kosakata (berupa "tag") yang baku, sebaliknya dengan XML kita bebas merancang tag-tag

sendiri, sesuai dengan kebutuhan aplikasinya.

Konsep dasar XML diantaranya:

a) Karakter Unicode, sebuah statement

XML merupakan sekumpulan karakter. Hampir semua karakter Unicode dapat tampil dalam dokumen XML.

b) Processor dan Application, processor

menganalisa markup lalu menyerahkannya dalam bentuk dokumen terstruktur kepada

application. Sebuah spesifikasi mengatur apa-apa saja yang boleh dan tidak boleh dilakukan processor. c) Markup dan Content,

karakter-karakter yang membangun dokumen XML dibagi dalam markup dan

content. Markup adalah untaian karakter yang dimulai dengan karakter “<” dan diakhiri dengan karakter “>”, atau dimulai dengan karakter “&” dan diakhiri dengan karakter “;”. Untaian karakter selain markup adalah content. d) Tag, tag adalah markup yang bersifat deskriptif. Tag dapat dibagi menjadi tiga macam yaitu: start-tags <section>

end-tags </section> dan empty-element tags <line-break/>

(3)

XML yang dimulai oleh start-tag dan diakhiri dengan end-tag, maupun sebuah empty-element tag. Untaian karakter yang berada di dalam start-tag

dan end-tag dinamakan content.

Content dapat berisi markup atau berisi

element lain yang disebut child element. Contoh element: <nama>Haddad Sammir</nama> dan: <line-break/>

f) Attribute, setiap element XML dapat memiliki attribute yang berfungsi untuk memberikan informasi tambahan terhadap element tersebut. Contoh: <file type="gif">computer.gif</file> g) XML Declaration, sebuah dokumen

XML dapat dimulai dengan mendeklarasikan beberapa informasi. Contoh declaration: <?xml version="1.0" encoding="UTF-8" ?>

Extensible Messaging and Presence Protocol (XMPP)

Extensible Messaging and Presence Protocol (XMPP) adalah protokol komunikasi berstandar terbuka untuk

message oriented middleware berbasis XML. Protokol ini pada awalnya bernama Jabber dan dikembangkan oleh komunitas

opensource Jabber pada tahun 1999 untuk menciptakan near-real time, extensible instant messaging (IM), informasi presence

dan contact list.

Kekuatan protokol XMPP terletak pada: a) Desentralisasi, protokol XMPP

memungkinkan siapa saja untuk menjalankan server XMPP dan tidak diperlukan satu server utama terpusat. b) Memiliki standar terbuka, tidak ada

royalti yang harus dikeluarkan untuk

menggunakan dan

mengimplementasikan protokol dan spesifikasi XMPP, serta tidak harus terkunci pada vendor tertentu.

c) Matang, teknologi XMPP telah digunakan sejak tahun 1998, memiliki banyak sekali implementasi server,

client dan software libraries.

d) Keamanan, server XMPP mendukung enkripsi dan certificate authority. e) Fleksibilitas, beragam fungsionalitas

tambahan dapat dikembangkan diatas protokol XMPP.

Stanza XML

Stanza XML adalah unit semantik berupa dokumen terstruktur yang dikirim dari satu entitas ke entitas lain dalam sebuah XML Stream. Stanza dapat dilihat sebagai unit dasar komunikasi dalam XMPP. Spesifikasi XMPP mendefinisikan tiga tipe stanza yaitu “message”, “iq” dan “presence”. Masing-masing stanza

diarahkan secara berbeda pada sisi server

dan ditangani secara berbeda pada sisi

client.

Bi-directional Stream Over Synchronous HTTP (BOSH)

Bi-directional Stream Over Synchronous HTTP (BOSH) adalah

transport protocol yang mengemulasikan komunikasi dua arah antar dua entitas dengan menggunakan beberapa pasang koneksi request/response synchronous

HTTP tanpa membutuhkan penggunaan

polling.

Strophe.js

(4)

aplikasi XMPP berbasis web bekerja secara

real time pada browser apapun.

METODE PENELITIAN

Metode penelitian yang penulis gunakan dalam peneltian adalah sebagai berikut:

1. Perancangan Aplikasi Game Online

Merancang tampilan dan peraturan

game online yang pada penelitian ini mengambil kasus ular tangga. Game ular tangga dibatasi dengan dua pemain (player) dan satu referee (aplikasi yang mengatur jalannya pertandingan) dengan total tiga user.

2. Peracangan Komunikasi.

Komunikasi antar pemain dirancang berdasarkan peraturan game online ular tangga.

3. Implementasi Komunikasi Dalam Stanza.

Komunikasi antar pemain diterjemahkan dalam bentuk stanza

XMPP.

4. Instalasi Server.

Server HTTP (web server) dan server

XMPP di-install. Server ini adalah komponen utama aplikasi XMPP berbasis web.

5. Implementasi Game Online.

Game online diprogram menggunakan HTML dan JavaScript. Pada bagian ini BOSH diimplementasikan mengunakan library sthrope.js.

6. Pengujian.

Game online diuji dan dilihat apakah dapat memberikan pengalaman menggunakan permainan web seolah menggunakan permainan desktop.

HASIL

Pertukaran Sinyal Antar Aplikasi

Tabel 1. Pertukaran Sinyal Antar Aplikasi

Player 1 Player 2 Referee

Register Register

Start Game (Turn Player 1) (Winner Player 2)

Pertukaran sinyal merupakan implementasi alur permainan yang dimulai dengan masing-masing pemain mendaftarkan dirinya dan referee akan melacak dan mengkoordinasikan giliran permainan.

Stanza

A. Stanza Register.

<message to="referee@im.lab" from=juliet@im.lab

xmlns="urn:snl:init"> <register></register> </message>

Stanza ini dugunakan oleh player untuk bergabung ke dalam permainan.

B. Stanza Start Game.

(5)

Stanza Start Game digunakan oleh

refree setelah player melakukan

register. Stanza ini akan memberi tahu

player permainan dapat segera dimulai dan daftar player yang tergabung dalam permainan.

C. Stanza Draw

<message xmlns="urn:snl:control" to="referee@im.lab"

from="juliet@im.lab/f45a0559"> <draw/>

</message>

Stanza Draw digunakan oleh player

yang sedang mendapat giliran untuk melempar dadu.

D. Stanza Status

<posisi> <player

jid="juliet@im.lab">0</player> <player

jid="romeo@im.lab">0</player> </posisi>

</snl> </message>

Stanza status merupakan respon dari

referee terhadap sinyal Draw. Stanza

ini berisi pesan yang memberitahukan setiap player angka dadu yang dilemparkan dan posisi terkini setiap

player pada papan permainan.

E. Stanza End Game

<winner>juliet@im.lab</winner>

</status> </snl> </message>

Stanza end game dikirimkan oleh

referee kepada setiap player yang memberitahukan bahwa permainan telah berakhir sekaligus memberitahukan siapa player

pemenangnya.

Output

A. Tampilan Referee

Gambar 1. Tampilan Referee

Referee bertugas sebagai “juri” dan pengendali permainan.

B. Tampilan Player

(6)

Aplikasi player menampilkan papan permainan sekaligus catatan (log) selama permainan berlangsung.

C. Pengujian Jaringan Aplikasi Referee

Gambar 3. Tampilan Jaringan Aplikasi Referee

Pada pengujian jaringan aplikasi referee

terlihat bahwa koneksi BOSH yang bernama http-bind berjalan dengan baik. Koneksi HTTP dibuka untuk waktu yang lama sehingga data dapat segera diterima seketika tersedia tanpa perlu melalui mekanisme polling.

D. Pengujian Jaringan Aplikasi Player

Gambar 4. Tampilan Jaringan Aplikasi Player

Koneksi http-bind berjalan dengan baik. Antara client dan server, koneksi dibuka dalam waktu yang lama sehingga dapat segera memberikan data seketika tersedia.

SIMPULAN

Penelitian mengenai perekayasaan teknologi XML dan XMPP dalam membangun aplikasi jaringan multiplayer online game “ular tangga” dapat ditarik

kesimpulan sebagai berikut: 1. Penggunaan teknik

Bi-directional Stream Over Synchronous HTTP meningkatkan respon dan kinerja jaringan dimana aplikasi

web bekerja tanpa melakukan

refreshing halaman. 2. Kinerja aplikasi jaringan

berbasis web dapat ditingkatkan menggunakan BOSH dengan memanfaatkan Strophe.js untuk berhubungan dengan XMPP

server yang melayani koneksi antar aplikasi.

3. Stanza XML direkayasa dengan menggunakan utilitas Strophe Builder yang tersedia pada

library Strophe.js. Stanza XML direkayasa dengan mengacu kepada protokol permainan yang telah didefinisikan.

DAFTAR PUSTAKA

Saint-Andre, Peter, dkk (2009). XMPP: The Definitive Guide, United States of America: Oreilly.

Moffitt, Jack (2010). Professional XMPP Programming with Javascript and jQuery. Indianapolis: Wiley.

Alamsyah, Andry (2003). Pengantar JavaScript. From http://ikc.dinus.ac.id/umum/andry-javascript.php, 5 Maret 2012.

(7)

http://xmpp.org/rfcs/rfc6120.html, 20 Maret 2012.

Saint-Andre, Peter, Ed (2004). Extensible Messaging and Presence Protocol (XMPP): Instant Messaging and Presence. From http://xmpp.org/rfcs/rfc6121.html, 20 Maret 2011.

Saint-Andre, Peter (2011). Extensible Messaging and Presence Protocol (XMPP): Address Format. From http://xmpp.org/rfcs/rfc6122.html, 20 Maret 2012.

Paterson, Ian, dkk (2010). XEP-0124: Bidirectional-streams Over Synchronous HTTP (BOSH). From http://xmpp.org/extensions/xep-0124.html, 20 Maret 2012.

Wright, William (2003). Jabber

Developer’s Handbook, United States of America: Sams.

Fielding, Roy, dkk (1999). Hypertext Transfer Protocol – HTTP/1.1. From http://www.ietf.org/rfc/rfc2616.txt, 20 Maret 2011.

Loreto, S., dkk (2011). Known Issues and Best Practices for the Use of Long Polling and Streaming in Bidirectional HTTP. From

http://www.rfc-editor.org/rfc/rfc6202.txt, 20 Maret 2012.

Flanagan, David (2001). JavaScript: The Definitive Guide, 4th Edition. United States of America: O’Reilly.

York, Richard (2009). Beginning JavaScript and CSS Development with jQuery. United States of America: Wrox.

Saint-Andre, Peter (2007). A Uniform Resource Name (URN) Namespace for Extension to the Extensible Messaging and Presence Protocol (XMPP). From http://www.rfc-editor.org/rfc/rfc4854.txt, 23 Maret 2012.

Thomas, Stephen A (2001). HTTP Essentials: Protocols for Secure, Scalable Web Sites. United States of America: Wiley.

Ray, Erik T (2003). Learning XML, Second edition. United States of America: O’Reilly.

Harold, Elliotte Rusty (2004). XML in a Nutshell. United States of America: O’Reilly.

Sikos, Leslie (2011). Web Standards: Mastering HTML5, CSS3, and XML. United States of America: Apress. Walmsley, Priscilla (2001). Definitive XML

Schema. United States of America: Prentice Hall.

McFarland, David Sawyer (2011).

JavScript & jQuery: The Missing Manual. United States of America: Pogue Press.