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

  E-ISSN : 2541 JURNAL J

• – 2469
• – CLICK
P-ISSN : 2355 <
• – 7958

  Jurnal Sistem Informasi Dan Manajemen Informatika 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 Game online multiplayer berbasis Latar Belakang Penelitian web membutuhkan komunikasi real time

  XMPP merupakan sebuah teknologi sehingga setiap pemain dapat langsung yang memungkinkan terjadinya pengiriman berintraksi tanpa perlu melakukan refresh pesan dan presence secara real time halaman secara manual. Refresh halaman menggunakan

  XML. Sifatnya yang diperlukan oleh aplikasi web untuk

  extensible menjadikan XMPP dapat mendapatkan informasi terbaru dari server.

  dikembangkan sesuai dengan kebutuhan. Hal tersebut tentu saja berdampak dengan Salah satu cara memperluas penggunaan kurang responsifnya aplikasi tersebut.

  XMPP adalah dengan melakukan Pendekatan yang lain yang dapat dilakukan perekayasaan XML. adalah melakukan refresh halaman secara

• – 2469
P-ISSN : 2355 <
• – CLICK
• – 7958

  platform independent . Berbeda dengan

  end-tags &lt;/section&gt; dan empty-element tags &lt;line-break/&gt;

  d) Tag, tag adalah markup yang bersifat deskriptif. Tag dapat dibagi menjadi tiga macam yaitu: start-tags &lt;section&gt;

  karakter yang dimulai dengan karakter “&lt;” dan diakhiri dengan karakter “&gt;”, atau dimulai dengan karakter “&amp;” dan diakhiri dengan karakter “;”. Untaian karakter selain markup adalah content.

  content . Markup adalah untaian

  XML dibagi dalam markup dan

  c) Markup dan Content, karakter- karakter yang membangun dokumen

  mengatur apa-apa saja yang boleh dan tidak boleh dilakukan processor.

  application . Sebuah spesifikasi

  b) Processor dan Application, processor menganalisa markup lalu menyerahkannya dalam bentuk dokumen terstruktur kepada

  Hampir semua karakter Unicode dapat tampil dalam dokumen XML.

  a) Karakter Unicode, sebuah statement

  Konsep dasar XML diantaranya:

  HTML, XML tidak mempunyai kosakata (berupa "tag") yang baku, sebaliknya dengan XML kita bebas merancang tag-tag sendiri, sesuai dengan kebutuhan aplikasinya.

  XML adalah karakteristiknya yang extensible dan

  JURNAL J

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

  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.

  Language ), sedangkan SGML merupakan sebuah standar ISO untuk format dokumen.

  XML (eXtensible Markup Language) adalah sebuah bahasa markah untuk mendeskripsikan data. XML merupakan turunan (subset) atau versi ringkas dari SGML (Standard Generalized Markup

  Extensible Markup Language (XML)

  memungkinkan komunikasi terjadi antar halaman web dengan server XMPP dan antar halaman web lainnya yang terhubung. Kombinasi dengan JQuery memungkinkan melakukan refresh halaman. Kombinasi ini dapat menghadirkan pengalaman real-time pada halaman web seolah —olah sedang mengakses aplikasi desktop.

  real time antar halaman web. BOSH

  dimanfaatkan oleh protocol XMPP dapat digunakan untuk menghadirkan komunikasi

  Over Synchronous HTTP (BOSH) yang

  Teknologi Bi-directional Stream

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

  Vol. 4 No. 2 Desember 2017 berkala untuk interval waktu tertentu.

  Jurnal Sistem Informasi Dan Manajemen Informatika ^{E-ISSN : 2541}

  e) Element, element adalah komponen logis terstruktur dari sebuah dokumen

• – 2469
P-ISSN : 2355 <
• – CLICK
• – 7958

  XML adalah unit semantik dari satu entitas ke entitas lain dalam sebuah

  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 Stream. Stanza dapat dilihat sebagai unit dasar komunikasi dalam XMPP. Spesifikasi XMPP mendefinisikan tiga tipe stanza yaitu “message”, “iq” dan “presence”. Masing-masing

  Kekuatan protokol XMPP terletak pada:

  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

  a) Desentralisasi, protokol

  instant messaging (IM), informasi presence dan contact list.

  JURNAL J

  XML Declaration, sebuah dokumen

  Jurnal Sistem Informasi Dan Manajemen Informatika ^{E-ISSN : 2541}

  Vol. 4 No. 2 Desember 2017

  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 :

  &lt;nama&gt;Haddad Sammir&lt;/nama&gt; dan: &lt;line-break/&gt;

  f) Attribute, setiap element XML dapat memiliki attribute yang berfungsi untuk memberikan informasi tambahan terhadap element tersebut. Contoh: &lt;file type="gif"&gt;computer.gif&lt;/file&gt;

  XML dapat dimulai dengan mendeklarasikan beberapa informasi. Contoh declaration : &lt;?xml version="1.0" encoding="UTF-8" ?&gt;

  menciptakan near-real time, extensible

  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

  Strophe.js merupakan pustaka XMPP pada JavaScript yang memungkinkan

  E-ISSN : 2541 JURNAL J

• – 2469
• – CLICK
P-ISSN : 2355 <
• – 7958

  Jurnal Sistem Informasi Dan Manajemen Informatika

  aplikasi XMPP berbasis web bekerja secara Pertukaran Sinyal Antar Aplikasi real time pada browser apapun.

  Tabel 1. Pertukaran Sinyal Antar Aplikasi Player 1 Player 2 Referee Register Register

METODE PENELITIAN

  Start Game (Turn

  Metode penelitian yang penulis

  Player 1) Draw

  gunakan dalam peneltian adalah sebagai

  Status (Turn

  berikut:

  Player 2, Dice, Posisi)

1. Perancangan Aplikasi Game Online

  Draw

  Merancang tampilan dan peraturan

  Status (Turn Player 1, Dice, game online yang pada penelitian ini

  Posisi)

  mengambil kasus ular tangga. Game

  End Game (Winner Player 2)

  ular tangga dibatasi dengan dua pemain (player) dan satu referee (aplikasi yang

  Pertukaran sinyal merupakan mengatur jalannya pertandingan) implementasi alur permainan yang dimulai dengan total tiga user. dengan masing-masing pemain

  

Peracangan Komunikasi. mendaftarkan dirinya dan referee akan

  Komunikasi antar pemain dirancang melacak dan mengkoordinasikan giliran permainan. berdasarkan peraturan game online ular tangga.

  Stanza 3. Implementasi Komunikasi Dalam A. Stanza Register. Stanza.

  &lt;message to="referee@im.lab" Komunikasi antar pemain from=juliet@im.lab diterjemahkan dalam bentuk stanza ns="urn:snl:init"&gt;

  XMPP.

  &lt;register&gt;&lt;/register&gt; &lt;/message&gt; 4.

   Instalasi Server.

  Server HTTP (web server) dan server Stanza ini dugunakan oleh player untuk

  XMPP di-install. Server ini adalah bergabung ke dalam permainan. komponen utama aplikasi XMPP berbasis web.

  B. Stanza Start Game.

  5.

  &lt;message ns="urn:snl:init" Implementasi Game Online. from="referee@im.lab/3c5058d1"

  Game online diprogram menggunakan

  to="juliet@im.lab"&gt; HTML dan JavaScript. Pada bagian ini

  &lt;snl type="startGame" BOSH diimplementasikan turn="juliet@im.lab"&gt; mengunakan library sthrope.js.

  &lt;players&gt; 6. Pengujian.

  &lt;player&gt;juliet@im.lab&lt;/player&gt;

  Game online diuji dan dilihat apakah

  &lt;player&gt;romeo@im.lab&lt;/playe dapat memberikan pengalaman r&gt;

  &lt;/players&gt; menggunakan permainan web seolah &lt;/snl&gt; menggunakan permainan desktop. &lt;/message&gt;

  HASIL Vol. 4 No. 2 Desember 2017

  E-ISSN : 2541 JURNAL J

• – 2469
• – CLICK
P-ISSN : 2355 <
• – 7958

  Jurnal Sistem Informasi Dan Manajemen Informatika

  Stanza Start Game digunakan oleh &lt;/status&gt;

  refree setelah player melakukan &lt;/snl&gt; register . Stanza ini akan memberi tahu &lt;/message&gt; player permainan dapat segera dimulai

  dan daftar player yang tergabung Stanza end game dikirimkan oleh dalam permainan. referee kepada setiap player yang memberitahukan bahwa permainan telah berakhir sekaligus

  C. Stanza Draw

  &lt;message ns="urn:snl:control" memberitahukan siapa player to="referee@im.lab" pemenangnya. from="juliet@im.lab/f45a0559"&gt;

  &lt;draw/&gt; Output &lt;/message&gt; A.

   Tampilan Referee Stanza Draw digunakan oleh player

  yang sedang mendapat giliran untuk melempar dadu.

  D. Stanza Status

  &lt;message ns="urn:snl:control" from="referee@im.lab/3c5058d1" to="juliet@im.lab"&gt;

  &lt;snl dice="5" turn="juliet@im.lab"&gt; &lt;posisi&gt;

  &lt;player jid="juliet@im.lab"&gt;0&lt;/player&gt; &lt;player Gambar 1. Tampilan Referee jid="romeo@im.lab"&gt;0&lt;/player&gt;

  &lt;/posisi&gt; Referee bertugas sebagai “juri” dan &lt;/snl&gt; pengendali permainan. &lt;/message&gt; B.

   Tampilan Player 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

  &lt;message ns="urn:snl:init" from="referee@im.lab/3c5058d1" to="juliet@im.lab"&gt;

  &lt;snl type="endGame"&gt; &lt;status status="win"&gt;

  &lt;winner&gt;juliet@im.lab&lt;/winner&gt;

  Gambar 2. Tampilan Palyer Vol. 4 No. 2 Desember 2017

  E-ISSN : 2541 JURNAL J

• – 2469
• – CLICK
P-ISSN : 2355 <
• – 7958

  Jurnal Sistem Informasi Dan Manajemen Informatika Aplikasi player menampilkan papan Koneksi http-bind berjalan dengan baik.

  permainan sekaligus catatan (log) selama Antara client dan server, koneksi dibuka permainan berlangsung. dalam waktu yang lama sehingga dapat segera memberikan data seketika tersedia.

  C. Pengujian Jaringan Aplikasi Referee 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

  Gambar 3. Tampilan Jaringan Aplikasi Referee

  memanfaatkan Strophe.js untuk berhubungan dengan XMPP Pada pengujian jaringan aplikasi referee

  server yang melayani koneksi

  terlihat bahwa koneksi BOSH yang antar aplikasi. bernama http-bind berjalan dengan baik.

  3. Koneksi HTTP dibuka untuk waktu yang Stanza XML direkayasa dengan menggunakan utilitas Strophe lama sehingga data dapat segera diterima

  Builder yang tersedia pada

  seketika tersedia tanpa perlu melalui

  library Strophe.js. Stanza XML mekanisme polling.

  direkayasa dengan mengacu kepada protokol permainan

  D. Pengujian Jaringan Aplikasi Player 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. Saint-Andre, Peter (2011). Extensible

  Messaging and Presence Protocol Gambar 4. Tampilan Jaringan Aplikasi Player

  (XMPP): Core . From Vol. 4 No. 2 Desember 2017

• – 2469
P-ISSN : 2355 <
• – CLICK
• – 7958

  Harold, Elliotte Rusty (2004). XML in a

  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.

  Nutshell . United States of America: O’Reilly.

  Sikos, Leslie (2011). Web Standards: Mastering HTML5, CSS3, and XML .

• – HTTP/1.1. From

  United States of America: Apress. Walmsley, Priscilla (2001). Definitive XML

  Schema . United States of America: Prentice Hall.

  McFarland, David Sawyer (2011).

  JavScript &amp; jQuery: The Missing Manual . United States of America:

  Pogue Press. Flanagan, David (2011). jQuery Pocket

  Reference . United States of America:

  JavaScript and CSS Development with jQuery . United States of

  Definitive Guide, 4th Edition . United States of America: O’Reilly.

  York, Richard (2009). Beginning

  Messaging and Presence Protocol (XMPP): Address Format . From

  JURNAL J

  Jurnal Sistem Informasi Dan Manajemen Informatika ^{E-ISSN : 2541}

  Vol. 4 No. 2 Desember 2017

  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

  http://xmpp.org/rfcs/rfc6122.html, 20 Maret 2012. Paterson, Ian, dkk (2010). XEP-0124:

  http://www.rfc- editor.org/rfc/rfc6202.txt, 20 Maret 2012. Flanagan, David (2001). JavaScript: The

  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://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

  O’Reilly