Tag

, , ,


Kenapa gw bikin tutorial ini ? karena di kantor gw lagi-lagi berhubungan dengan aplikasi client-server buat suatu acara nasional dan gw milih pakai flash karena gampang untuk desain dan maintenance. Sebetulnya pakai Java or PHP bisa cuma kalo PHP minimal harus web-based atau kalo gak desktop application pake PHP (PHP-CLI), Java juga bisa dua-duanya tapi effortnya mungkin lebih berat daripada pakai Flash. Flash ini gw buat sebagai desktop application, jadi gak perlu install Flash Player. Udah lebih dari 3 tahun gw gak pernah sentuh-sentuh yang namanya Flash, dalam arti bikin aplikasi yang berat-berat.

Oke deh, langsung aja. Gw disini gak jelasin soal apa itu Socket atau Flash atau bagaimana cara menggunakan Adobe Flash. Kita akan membuat aplikasi Chat room. Kita harus tau beberapa hal sebelum memulai :

  1. Mengerti PHP, kalau ngerti socket lebih baik
  2. Mengerti konsep Adobe Flash
  3. Sedikit bisa Actionscript

Aplikasi yang dibutuhkan adalah :

  1. Web Server yang sudah dikonfigurasi dengan PHP
  2. Editor text
  3. Adobe Flash 8

Mungkin ada yang bertanya, “kok gak pake database sih ?”, kita gak perlu database karena sebenernya gw disini mau memperlihatkan membuat aplikasi client-server yang high-performance, hemat bandwidth dan elegan.. cie hahaha..

Arsitektur sistemnya begini, Client -> Socket Server -> Client, jadi gak ada yang namanya frequently-pooling dari client. Kalo kita tiap detik request ke server buat liat ada message baru ato gak, itu namanya boros bandwidth. Coba kalo aplikasinya gak kita pake, tapi cuma di run aja, udah lumayan tuh đŸ™‚ nah kalo pake socket, ntar socket servernya yang push ke client.. gitu lho.

Pertama kita bikin dulu socket servernya pake PHP. Copas skrip ini ke text editor trus save dengan nama yang kalian mau. Misal, chat.php.

#!/usr/bin/php -q
<?php
error_reporting(E_ALL);
set_time_limit(0);
ob_implicit_flush();
$address = ‘172.16.34.170’; //ganti dengan localhost atau ip komputer kamu
$port = 9999; //terserah berapa aja, asal diatas 1024. Karena flash membaca port > 1024
function send_Message($allclient, $socket, $buf) {
foreach($allclient as $client) {
socket_write($client, “$socket wrote: $buf”);
}
}

if (($master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) < 0) {
echo “socket_create() failed, reason: ” . socket_strerror($master) . “n”;
}

socket_set_option($master, SOL_SOCKET,SO_REUSEADDR, 1);
if (($ret = socket_bind($master, $address, $port)) < 0) {
echo “socket_bind() failed, reason: ” . socket_strerror($ret) . “n”;
}
if (($ret = socket_listen($master, 5)) < 0) {
echo “socket_listen() failed, reason: ” . socket_strerror($ret) . “n”;
}
$read_sockets = array($master);
while (true) {
$changed_sockets = $read_sockets;
$num_changed_sockets = socket_select($changed_sockets, $write = NULL, $except = NULL, NULL);
foreach($changed_sockets as $socket) {
if ($socket == $master) {
if (($client = socket_accept($master)) < 0) {
echo “socket_accept() failed: reason: ” . socket_strerror($msgsock) . “n”;
continue;
} else {
array_push($read_sockets, $client);
}
} else {
$bytes = socket_recv($socket, $buffer, 2048, 0);
if ($bytes == 0) {
$index = array_search($socket, $read_sockets);
unset($read_sockets[$index]);
socket_close($socket);
}else{
$allclients = $read_sockets;
array_shift($allclients);
send_Message($allclients, $socket, $buffer);
}
}

}
}
?>

kita menjalankan skrip diatas bukan sebagai web, tapi sebagai aplikasi shell. Buka command line trus masuk kedalam folder dimana file PHP.EXE berada, trus ketik

php.exe -q <PATH_SKRIP_DIATAS>chat.php

nah… harusnya commandline nya diem aja… itu berarti kita berhasil membuat socket server. Gw gak akan jelasin baris-perbaris skrip diatas, skrip diatas sebenernya gw kompilasi dari beberapa sumber setelah baca PHP Manual đŸ™‚

Tahap pertama berhasil, sekarang tinggal bikin aplikasi desktopnya deh..

buka Adobe Flash 8 trus bikin seperti gambar dibawah.

objek2nya adalah dynamictext (kasih nama msgArea), inputtext (kasih nama inputMsg), trus sama Component Button (kasih nama pushMsg). disitu ada 2 layer, 1 buat action, 1 buat object2 tadi.

Trus klik di frame 1 pada layer 1, pencet F9 buat buka Actionscript editor. copas aja kode dibawah

mySocket = new XMLSocket();
mySocket.onConnect = function(success) {
if (success) {
msgArea.htmlText += “<b>Server connection established!</b>”;
} else {
msgArea.htmlText += “<b>Server connection failed!</b>”;
}
};
mySocket.onClose = function() {
msgArea.htmlText += “<b>Server connection lost</b>”;
};
XMLSocket.prototype.onData = function(msg) {
msgArea.htmlText += msg;
};
mySocket.connect(“172.16.34.170”, 9999); //IP address socket server yang dibuat tadi

function msgGO() {
if (inputMsg.htmlText != “”) {
mySocket.send(inputMsg.htmlText+”n”);
inputMsg.htmlText = “”;
}
}
pushMsg.onRelease = function() {
msgGO();
};

jadi deh hehehe… gampang khan ? ya iyalah, Flash udah membungkus fungsi2 socket ke dalam method2 yang gampang digunain. Di Flash ada 4 method yang digunakan untuk socket:

  1. onConnect, method ini dipanggil ketika koneksi ke server dan bisa kita override
  2. onClose, method ini dipanggil kalau koneksi ke server putus, dan bisa kita override juga
  3. onData, method ini dipanggil ketika server mengirimkan data ke client. data yang dikirim oleh server harus diakhiri dengan chr(0) atau zero byte, kalau gak gitu, flashnya gak akan nerima
  4. onXML, kalau yang ini dipanggil kalau ada xml yang datang dengan koneksi XMLSocket

setelah itu coba deh di publish flashnya, trus jalanin deh file .swf nya atau file .exe nya. Simpel banget khan ? masih banyak aplikasi yang bisa dibikin pake socket dan flash… kebayang donk, flash gak cuma sebagai animation-tool tapi bisa sebagai RIA / Rich Internet Application. Ide-ide aplikasi lain :

  1. Messenger
  2. Monitoring Data
  3. Online Games
  4. Portable shell window
  5. dsb
  6. dsb
  7. dsb