Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Perl: разработка для Web > технология плавного вывода на экран

Автор: Materium 19.12.2006, 16:20

korob2001 подскажи плиз такую вещь:
мой чат пишет в файл сообщения, а потом файл выводится. Скрипт обновляется заданное кол-во секунд указанное в <meta>, и выводит файл с сообщениями. Таким образом страница постоянно передёргивается, но хуже того то, что анимированные картинки длинной анимации также передёргиваются на половине и начинаются сначала!!! Посмотрев другие чаты, никакого обновления страницы я в них не нашёл. Сообщения в них спокойно вставляются, и соответсвенно картинки спокойно работают по своему циклу.
По крайней мере как это сделано, при помощи чего? JavaScript?
Кликнув по свойствам фрейма вывода тех чатов работает вывод идёт из .cgi

Автор: korob2001 19.12.2006, 21:35

Ты хочешь выводить контент без перезагрузки страницы?
Если да, то тебе помогут XMLHttpRequest и ActiveXObject из JavaScript. Посмотри вот http://forum.vingrad.ru/index.php?showtopic=86759&view=findpost&p=689016. Как-то писал я бегущую строку, которая основана на XMLHttpRequest и ActiveXObject.

Если я не верно понял тебя, поясни задачу подробнее.

ЗЫ: А почему вопрос задаёшь индивидуально, мне? Здесь же есть и другие участники, которые знакомы с Perl не хуже меня. smile

Автор: Materium 19.12.2006, 23:05

Спросил именно тебя так, из уважения. больше не буду ))) точнее лично писать )))
В общим ссылку я посмотрел, но там вроде немного не то что мне нужно. Или то, но в сложном для меня контексте. Сейчас я выделю упрощённый код со своего скрипта и всё будет прозрачнее::
Итак, есть набор фремов .cgi, создаваемых некоторым .cgi
Один такой фрейм как обычно - текстовая область. другой .cgi фрейм получает напечатанный текст, пишет это в файл, а в конце скрипта формируется <html> и файл выводится.
В полной упрощёнке так выглядит::

Пишем полученный текст в файл::

Код


open(FL, ">> file.dat") or die "Не могу открыть data-файл для записи: $!\n";
flock(FL, 2);
print FL "<font color=green>${t1}:${t2}:$t3</font> [${count}] ${ima}: ${text}<BR><script>S()</script>\n";
close FL;

В тексте есть команда, к примеру *1, которая заменяется на <IMG> картинку. Всё это пишется в file.dat

Далее, в конце скрипта, формируется html::

# Вывод чата

Код


print <<HHTM1;
<HTML>
<HEAD><TITLE>tdv-чат</title></head>
<meta http-equiv="Pragma" CONTENT="no-cache">
<META http-equiv="refresh" content="8">
<BODY>
<script>
function S(){
scroll(1,10000000);
}
</script>
HHTM1
open(RDT, "< file.dat") or die "Не могу открыть data-файл для чтения: $!\n";
flock(RDT, 2);
chomp(@vivod=<RDT>);
close RDT;
    foreach my $viv (@vivod) {
                if ($viv =~ m#^$ima2|^<|\w+ Вам приват от $ima#) {print $viv;}
                }

# Конец вывода чата

Если сообщение из фрейма не поступило, следовательно идёт вывод в заданное кол сек.
Всё прекрасно работает.
Вопрос в том, как всё организовать, весь вывод без <META http-equiv="refresh" content="8">?
Как юзеры будут получать сообщения из file.dat без обновления скриптового фрейма?
Тогда фрейм не будет "передёргиваться", и картинки будут отрабатывать весь свой анимационный цикл.
А так после 8 сек они начинаются, соответственно, сначала.
Какой JavaScript нужно вставить в этот сценарий .cgi, чтобы всё было "статично", а сообщения выводились в конец, при этом фрейму не нужно было бы пробегать весь скролл сверха до низу???

Спасибо за внимание

Автор: nitr 20.12.2006, 00:17

Цитата(Materium @ 19.12.2006, 23:05

)

Какой JavaScript нужно вставить в этот сценарий .cgi, чтобы всё было "статично", а сообщения выводились в конец, при этом фрейму не нужно было бы пробегать весь скролл сверха до низу???

Materium, вам на форум JS (JavaScript) =)

з.ы.: "много воды"

Автор: korob2001 20.12.2006, 10:02

Я уже написал, что тебе нужно. Если разберёшься, то твой фрейм не только не будет передёргиваться, он вообще не будет перезагружаться. Попробуй с этим вопросом обратиться в раздел JS, поищи там темы по ключевым словам, которые я указал и выделил выше.

Цитата

Спросил именно тебя так, из уважения. больше не буду ))) точнее лично писать )))

Спасибо.

Если ты обращаешься лично к кому-то, некоторые не захотят влазить в чужой разговор, по крайней мере я бы так и поступил. Страшного в этом ничего нет, просто тебе наверняка сможет помочь кто-то ещё.

PS: У меня сейчас проблемы с временем, запускаю проект в сеть. ;(((((( Если не разберёшься до выходных, попробую пояснить подробнее.

Автор: Materium 20.12.2006, 19:02

Уважаемые, я понимаю что мне придётся изучить более-менее JavaScript, без него видно плохо совсем. Пойду я на форум JS и что? Мне же не голый JS интересует, а именно, самое главное, как этот чёртов JS связать с Perl в моём случае, приведённом выше. Попробую конечно )))

Автор: korob2001 20.12.2006, 19:08

Проэкт запустил, так что сынишку спать положу и попробую написать.

Автор: Materium 20.12.2006, 19:15

korob2001 если б у меня уже было 100 постов я бы те поднял репутацию, несколько задач я уже научился решать с твоей помощью. smile

Жаль пока отплатить нечем, но всё впереди.

Автор: korob2001 21.12.2006, 19:51

Привет!
Вобщем написал небольшой пример, простейшего чата которому не нужна перезагрузка для вывода сообщений.

1. В каталоге /www создадим каталог chat, т.е. должен получиться такой путь /www/chat.

2. Этот код сохрани в каталог, который создал на первом шаге, в файле request.js

Код


var msgstr = "";
var req;
function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
        req.send(null);
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
            req.send();
        }
    }
}

function processReqChange() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            msgstr = req.responseText;
        }
    }
}

function checkMessage(dvx,url) {
    loadXMLDoc(url);
    document.getElementById(dvx).innerHTML = msgstr;
        setTimeout("checkMessage('" + dvx + "','" + url + "')", 5000);
}

3. Теперь в каталоге /cgi-bin создай каталог ch, в итоге должен получиться путь /cgi-bin/ch

4. В каталоге, который был создан на третьем шаге, создай пустой текстовый файл base.txt

5. Этот код помести в тот же каталог, где расположил пустой файл base.txt на шаге 4, в файле с именем chrequest.pl

Код


#!/usr/bin/perl -w
use strict;
my $limit = 20; # Максимально допустимое кол-во сообщений, на странице.

open(F, "< base.txt") or die $!;
chomp(my @result = <F>);
close(F);

print "Content-type: text/html\n\n";
if (@result <= $limit) {
    print join("<br/>", reverse @result);
} else {
    print join("<br/>", reverse @result[-$limit..-1]);
}

С этим кодом будет работать JavaScript

Теперь в тот же /cgi-bin/ch сохрани следующий код, в файле с именем chat.pl

Код


#!/usr/bin/perl -w
use strict;
use CGI;

my $limit = 20;                   # Сколько показывать последних сообщений
my $js    = "/chat/request.js";   # Путь к файлу JavaScript
my $base  = "base.txt";         # Путь к файлу с сообщениями

my $cgi = new CGI();

sub frameSet {
    print <<"    HTML";
    <html>
    <frameset rows="*,0" cols="*" frameborder="no" border="0" framespacing="0">
        <frame src="$ENV{SCRIPT_NAME}?show=1" name="shFrame" scrolling="no" noresize>
        <frame name="hdFrame" scrolling="no" noresize>
    </frameset>
    </html>
    HTML
}

sub frame {
    my $result = show_file($limit);
    print <<"    HTML";
        <html>
            <head>
                <script type="text/javascript" src="$js"></script>
            </head>
            <body bgcolor="#ffffff" onload="checkMessage('content','/cgi-bin/ch/chrequest.pl')">
                <table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr>
                        <td style="vertical-align: top">
                            <form action="/cgi-bin/ch/chat.pl" method="post" target="hdFrame">
                            <input type="text" name="mess"/>
                            <input type="submit" value="Send"/>
                            </form>
                        </td>
                        <td style="vertical-align: top; width: 100%"><div id="content" style="display: block">$result</div></td>
                    </tr>
                </table>
            </body>
        </html>
    HTML
}

sub show_file {
    my $limit = shift;
    open(F, "< $base") or die $!;
        chomp(my @result = <F>);
    close(F);
    
    if (@result <= $limit) {
        return join("<br/>", reverse @result);
    } else {
        return join("<br/>", reverse @result[-$limit..-1]);
    }
}

sub save_mess {
    my $mess = $cgi->param('mess');
    open my $fh, ">>", "$base" or die "Can't open file '$base': $!";
        print $fh "$mess\n";
    close($fh);
}

print "Content-type: text/html\n\n";
if (defined $cgi->param('show')) {
    &frame();
} else {
    if (defined $cgi->param('mess')) {
        &save_mess();
    }
    &frameSet();
}

Теперь запусти браузер и введи адрес http://localhost/cgi-bin/ch/chat.pl. Вводи строки в поле формы и жми кнопку OK.

PS: Чуть позже я прокоментирую весь код, сейчас должен отлучиться.
PSS: Это простейший пример, потому он без блокировок файлов, без обработок ошибок и прочего. Вобщем тебе ещё самому придётся над всем этим поработать.

Автор: Materium 21.12.2006, 20:23

Спасибо Короб я начну его анализировать и потом сообщу что и как у меня получилось!
Сам Чат у меня готов со всеми делами, блокировками, обработками, аутентификацией и администрированием. Самый большой ступор был с сессиями, на которые ты меня сподвиг и которые я освоил, и теперь вот осталось вывод нормальный, так как это JavaScript в котором я вообще пока и ни туды, и ни сюды ))) пошёл заниматься кодом... )))

Автор: Materium 21.12.2006, 22:39

Итак, Короб2001, ))) тема становится горячее. Я напряг отсутствие своего мозга, и модифицировал свой код выше на основе твоего кода::
Вот так:

Код


# Вывод чата
my $js="/chat/request.js";
my $result = show_file();
sub show_file {
    open(RDT, "< chh.dat") or die "Не могу открыть data-файл для чтения: $!\n";
flock(RDT, 2);
chomp(@vivod=<RDT>);
close RDT;
    foreach my $viv (@vivod) {
        if ($viv =~ m#^$ima2|^<|\w+ Вам приват от $ima#) {return $viv;}
    }
}
print <<HHTM1;
<HTML>
<HEAD><TITLE>tdv-чат</title></head>
<script type=\"text/javascript\" src=\"$js\"></script>
<BODY onload=\"checkMessage('content','/cgi-bin/chat/chrequest.pl')\">
<script>
function S(){
scroll(1,10000000);
}
</script>
<div id="content" style="display: block">$result</div>
HHTM1
# Конец вывода чата

модифицировал chrequest.pl, запихав его в cgi-bin/chat

Код


#!/usr/bin/perl -w
use CGI;
$co=new CGI;
print "Content-type: text/html\n\n";
$ima=$co->cookie('grayn');
$ima2=$ima;
$ima2=~s%<Font color=.+>|</font>%%gi;
open(RDT, "< chh.dat") or die "Не могу открыть data-файл для чтения: $!\n";
flock(RDT, 2);
chomp(@vivod=<RDT>);
close RDT;
    foreach my $viv (@vivod) {
if ($viv =~ m#^$ima2|^<|\w+ Вам приват от $ima#) {print $viv;}
}

ИТАК, в путь, сейчас перечислю плюсы и минусы (странно что у меня вообще всё заработало ))) )::

+-ы - только один
1)Всё стало конечно приятнее, пропало передёргивание страницы!!!

- -ы к сожалению их много

1)Наш с тобой код, точнее твой код, када я его запустил, када пишешь по русски - печатает на выходе ???? знаки вопроса. И ладно бы ещё знаки вопроса, попадаются обрывки разных тэгов, из-за чего у меня в чате например, вылеВзши что-то типа ??? ??ont> соответственно полетел видимо тэг <font>, так как цвета текстовые сразу изменились в чате. )))))) Это раз.

2)Скорость ужасно упала, проходит пара секунд с тех пор, когда отправляешь мессагу и потом видишь её на экране, при этом при отправке экран очищается и заполняется. Ну это может мелочи, согласен, издержки конструкций и т.д.. Всё бы ничего, но, третий минус -

3)Анимационный период картинок попрежнему сразу же начинается при релоаде страницы. (во всех чатах сообщения валят а картинки играют своё) Как я понял в яве таймаут установлен в 5 сек, то есть и анимация gif срезается и начинается вновь с каждым релоадом.

4)Почему-то теперь перестал работать мой скроллинг вниз!!! Он торчит всегда посередине теперь!!!
Куда вставить код скроллинга, чтобы он торчал внизу???
Код

Код


<script>S()</script> который я добавлял в конец всех сообщений и т.д. теперь бесполезен!!!

Уважаемый Короб2001, если вы поможете хотя бы по пунктам 1) и 4) я буду счастлив. smile

Автор: Materium 21.12.2006, 23:03

Короб2001 проблема №1 решена заменой

Код


print "Content-type: text/html\n\n";

на

Код


print $co->header(-type=>"text/html; charset=windows-1251");

То есть

Код


print "Content-type: \"text/html; charset=windows-1251\"\n\n";

Автор: korob2001 22.12.2006, 04:25

2 и 3) Задержка в JavaScript стоит 5 секунд, т.е. он конектится к серверу каждые 5 секунд.

Код


setTimeout("checkMessage('" + dvx + "','" + url + "')", 5000);

Попробуй измени значение на 500. Текст будет появляться примерно в 10 раз быстрее, но в тоже время картинки будут обновляться тоже в 10 рыстрее. Избавиться от этого, означает отказаться от того, что бы старые сообщения удалялись, а соответственно и размер страницы будет расти.

Код


document.getElementById(dvx).innerHTML = msgstr;

На такую:

Код


document.getElementById(dvx).innerHTML += msgstr;

Здесь мы не обновляем контент, а добавляем к нему. Но теперь у нас будут повторяться сообщения и страница будет расти с неимоверной скоростью. Единственный выход, это использовать такую анимацию в чаете, что бы её скорость была >= скорости обновления, либо вообще не анимированные, что на мой взгляд ещё лучше.
Можно конечно написать апплет Java и сделать на его основе чат, это с одной сторы усложнит задачу, но зато и результат будет на лицо. Только не путай Java, с JavaScript, это абсолютно разные языки.

4. Думаю проблема в этой строке:

Код


<frame src="$ENV{SCRIPT_NAME}?show=1" name="shFrame" scrolling="no" noresize>

Автор: Materium 22.12.2006, 15:02

Спасибо я ща пойду попробую поменять в JS. Дело в том что у меня стоит файл счётчик, который обновляет base.txt каждые 50 записей в него, поэтому мне сразу пришло сейчас в глову что

Код


document.getElementById(dvx).innerHTML += msgstr;

то что мне и нужно! ))) пойду проверю.

Автор: korob2001 22.12.2006, 16:04

Нет, это не то, что тебе нужно. Это я тебе для примера привёл. Возьми для примера работу с файлом. Что ты делаешь, что бы очистить файл от старых записей? Правельно, сначала читаешь файл, затем по каким-то критериям отсеиваешь старые записи, затем открываешь файл для записи, тем самым очищая его и заносишь в него не отсеяную информацию.
Примерно тоже самое происходит и с HTML документом.

Автор: Materium 22.12.2006, 16:28

УУУ нет не то это что я подумал, плодаятся как тараканы. В общем меня усё устраивает, я тоже реверс взял с твоего кода массива и вывожу сообщения наверх. Скролинг так и не работает. во фрейме моём у меня scrolling="auto" всегда стояло. Пробовал функцию скрола запихать в request JS и PL. 0 эффект.
Всё равно спасибо за код )))