§5. CGI-Flash программирование.
Появление технологии Flash компании Macromedia в значительной степени преобразило мир Web. Flash, без особой шумихи (что было свойственно распространению в Web языка Java), быстро занял свою нишу и эволюционировал от внешних plug-in к встроенным в броузеры IE и NN и является в настоящее время полноценной частью инструментов Web-дизайна и Web-программирования. Применение Macromedia Flash избавляет от проблемы совместимости между броузерами, Flash одинаково работает как в IE, так и в NN. В Macromedia Flash 5 применяется специальный событийно-управляемый язык, который поддерживает условные переходы, циклы, массивы, функции и классы, которые можно наследовать. Процедуры ввода-вывода данных, как мы увидим ниже, могут быть реализованы с помошью всего лишь одного оператора этого языка.
Задача.
Создать в статической HTML-странице on-line котировщик валюты EUR/USD рынка Forex и обеспечить запрос на обновление информации через каждые N секунд без перезагрузки HTML-страницы. В качестве ресурса котировок валют использовать ресурс партнерского сервера (www.my_partner.com).
Решение.
Создать файл Flash, обеспечивающий прием информации от сценария CGI. CGI-сценарий должен создавать сокет и устанавливать соединение для приема информации от удаленного сервера. Этот сервер содержит ресурс котировок валют рынка Forex (ресурс обновляется каждые 5 секунд). Из полученного ресурса (HTML-страницы) извлечь численные значения спроса (bid) и предложения (ask) EUR/USD. Полученные значения передать в поток вывода. Использовать элемент OBJECT для включения Flash в статическую HTML-страницу:
<HTML> <HEAD> <TITLE>TheWebProduction</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <h1>CGI-Flash programming:</h1> <hr> <TABLE border='0' WIDTH='640' align='left' valign='top' cellpadding="0" cellspacing="0"> <TR> <TD align='left' valign='top'> Any text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ....... </TD> <TD align='left' valign='top'> <table border='1' WIDTH='372' HEIGHT='54' align='left' valign='top' cellpadding="0" cellspacing="0"> <tr> <td align='left' valign='top'> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=370 HEIGHT=52> <PARAM NAME=movie VALUE="finan_group4_2.swf"> <PARAM NAME=quality VALUE=autolow> <PARAM NAME=salign VALUE=LT> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="finan.swf" quality=autolow salign=LT bgcolor=#FFFFFF WIDTH=370 HEIGHT=52 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"> </EMBED> </OBJECT> </td></tr> </table> </TD></TR> <TR> <TD align='center' valign='top' colspan=2> <b>Copyriht © 2002 TheWebProduction</b> </TD></TR> </TABLE> </BODY> </HTML>
Как мы видим (рис.6), файл Flash finan.swf выводит в HTML-страницу информационную вставку и идеология разделения CGI-программы и дизайна не нарушена.
Рис. 4.
Программа CGI показана ниже:
#!/usr/bin/perl use IO::Socket; print "Pragma: no-cache\nCache-control: no-cache\nContent-type: text/plain\n"; $port="80"; my $host="www.my_forex.com"; my $file; $valuta="EURUSD"; $file = "/rate/simulation.html"; socket(SOCK, PF_INET, SOCK_STREAM, getprotobyname('tcp')); $iaddr = inet_aton($host); $paddr = sockaddr_in($port, $iaddr); connect(SOCK, $paddr); send (SOCK, "GET $file HTTP/1.0\nHOST:$host\n\n", 0); @data=<SOCK>; close(SOCK); $answer = join("",@data); ($etc,$iter1)=split(/$valuta/,$answer); $met='</SPAN>'; @iter2=split(/$met/,$iter1); @iter3=split(/>/,$iter2[0]); @iter4=split(/>/,$iter2[1]); ($sec, $min, $hour, $day, $month, $year, $wday, $yday, $isdst) = gmtime(time); if($sec < 10){$sec="0".$sec;} if($min < 10){$min="0".$min;} if($hour < 10){$hour="0".$hour;} $my_time=$hour.":".$min.":".$sec; print "\nmy_bid=".$iter3[3].'&my_ask='.$iter4[3].'&my_time='.$my_time; exit;
Функция socket() создает сокет, тип которого определен как потоковый - SOCK_STREAM. После конвертации имени сокета (более удобного представления для сервера), создается соединение с помощью функции connect( ). Предварительно с помощью переменных $host и $file задаются имя сервера и имя ресурса, соответственно. Для передачи данных через сокет используется функция send( ), а для приема данных через сокет - известная процедура: @data=<SOCK>. После закрытия сокета идет разбор принятых данных ресурса simulation.html:
<html> <head> <title>Rates</title> </HEAD> <SPAN class="textP" style="font:bold 11px">My Forex Group</SPAN> <BODY leftmargin="2" topmargin="0"> <SPAN id="tRates"> <TABLE width='265' height='84' border='0'cellspacing='0' cellpadding='0'> <TR><td valign='top' background='/images/home/rateb.gif'> <table class='rate' width='260' border='0' cellspacing='1' cellpadding='1' height='2'> <TR><TD class='rLeft'>Rate</TD><TD class='rLeft'>Bid</TD> <TD class='rLeft'>Ask</TD><TD class='rLeft'>Time</TD> </TR> <TR><TD class='rLeft' bgcolor='#41638A'>EURUSD</TD> <TD bgcolor=#CCD2DA><SPAN class='up'>0.9807</SPAN></TD> <TD bgcolor=#CCD2DA><SPAN class='up'>0.9812</SPAN></TD> <TD nowrap bgcolor=#CCD2DA><span class='rTime'>07/31/02 11:03:04</SPAN></TD> </TR> <TR><TD class='rLeft' bgcolor='#41638A'>USDJPY</TD> <TD><SPAN class='down'>119.65</SPAN></TD> <TD><SPAN class='down'>119.70</SPAN></TD> <TD nowrap><span class='rTime'>07/31/02 11:03:04</SPAN></TD> </TR> <TR><TD class='rLeft' bgcolor='#41638A'>GBPUSD</TD> <TD bgcolor=#CCD2DA><SPAN class='up'>1.5628</SPAN></TD> <TD bgcolor=#CCD2DA><SPAN class='up'>1.5633</SPAN></TD> <TD nowrap bgcolor=#CCD2DA><span class='rTime'>07/31/02 11:03:54</SPAN></TD> </TR><TR><TD class='rLeft' bgcolor='#41638A'>USDCHF</TD> <TD><SPAN class='up'>1.4815</SPAN></TD> <TD><SPAN class='up'>1.4820</SPAN></TD> <TD nowrap><span class='rTime'>07/31/02 11:03:52</SPAN></TD></TR></Table></TD> </TR></TABLE> </SPAN> </Body> </html>
Для разбора HTML- кода используется образ EURUSD, который задается переменной $valuta. Данные относящиеся к спросу (bid) помещаются в переменную $iter3[3], а данные относящиеся к предложению (ask) в переменную $iter4[3]. В конце программы фиксируется местное время и заносится в переменную $my_time. И наконец создается стандартный вывод, эмулирующий метод POST протокола HTTP (необходимо для Flash).
Теперь обратимся к Flash. Прежде всего создадим форму с тремя полями ввода - рис.5.
Рис. 5.
Создадим два слоя и растянем их на 20 кадров. При скорости кадров 8 fps, полное время цикла из 20 кадров составит 2.5 секунды, т.е. этот промежуток времени будет равен половине времени обновления ресурса курса валют. Затем в оконе Text Options (рис.6) зададим имя текстовой переменной Variable равой my_bid.
Рис. 6.
Аналогичную процедуру выполним для создания имен двух других текстовых переменных: my_ask и my-time. Для верхнего слоя (рис.5) откроем окно Frame Actions и займемся программированием:
loadVariablesNum ("http://www.mycgi.com/cgi-bin/java_applet/finan.cgi", 0);
Процедура loadVariablesNum загрузит CGI-ресурс, а полученные данные от CGI-скрипта разместит в текстовых переменных: my_bid, my_ask и my-time, соответственно.
