Wie man mit
Indy HTTP Server und JavaScript (
jQuery) eine dynamische Aktualisierung eines Teilbereichs einer
HTML Seite realisiert, zeigt das folgende Beispielprojekt. Weitere Informationen sind auf meiner Blogseite unter
How to: update HTML pages dynamically using jQuery and “Long Polling” zu finden.
Entwickelt und getestet ist es mit Delphi 2009 und
Indy 10.5.9.
Es soll nur eine Anregung sein, zum Beispiel für webbasierte Administrationsoberflächen die mit wenig Traffic stets aktuelle Statistiken anzeigen. Viel Spass damit!
Delphi-Quellcode:
program IndyLongPollingDemo;
{$APPTYPE CONSOLE}
uses
IdHTTPServer, IdCustomHTTPServer, IdContext, IdSocketHandle, IdGlobal,
SysUtils, Classes;
type
TMyServer =
class(TIdHTTPServer)
public
procedure InitComponent;
override;
procedure OnGet(AContext: TIdContext;
ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
end;
procedure Demo;
var
Server: TMyServer;
begin
Server := TMyServer.Create(
nil);
try
try
Server.Active := True;
except
on E:
Exception do
begin
WriteLn(E.ClassName + '
' + E.
Message);
end;
end;
WriteLn('
Hit any key to terminate.');
ReadLn;
finally
Server.Free;
end;
end;
procedure TMyServer.InitComponent;
var
Binding: TIdSocketHandle;
begin
inherited;
OnCommandGet := OnGet;
Bindings.Clear;
Binding := Bindings.Add;
Binding.IP := '
127.0.0.1';
Binding.Port := 8080;
KeepAlive := True;
end;
procedure TMyServer.OnGet(AContext: TIdContext;
ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
begin
AResponseInfo.CharSet := '
UTF-8';
AResponseInfo.ContentType := '
text/html';
if ARequestInfo.Document = '
/'
then
begin
AResponseInfo.ContentText :=
'
<html>' + #13#10
+ '
<head>' + #13#10
+ '
<title>Long Poll Example</title>' + #13#10
+ '
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"> ' +
#13#10
+ '
</script> ' + #13#10
+ '
<script type="text/javascript" charset="utf-8"> ' + #13#10
+ '
$(document).ready(function(){ ' + #13#10
+ '
(function poll(){' + #13#10
+ '
$.ajax({ url: "getdata", success: function(data){' + #13#10
+ '
$("div.time").replaceWith(data);' + #13#10
+ '
}, dataType: "html", complete: poll, timeout: 30000 });' + #13#10
+ '
})();' + #13#10
+ '
});' + #13#10
+ '
</script>' + #13#10
+ '
</head>' + #13#10
+ '
<body> ' + #13#10
+ '
<div>Server time is: <div class="time"></div></div>' + #13#10
+ '
' + #13#10
+ '
</body>' + #13#10
+ '
</html>' + #13#10;
end
else
begin
Sleep(1000);
AResponseInfo.ContentText := '
<div class="time">'+DateTimeToStr(Now)+'
</div>';
end;
end;
begin
Demo;
end.