2012-12-12 6 views
5

Ich habe ein paar nette Tutorials auf dem Client/Server in Dart gefunden. Der Client sendet nur eine Anfrage an den Server über localhost am angegebenen Port und der Server antwortet nur mit einem String.Client-Server in Dart

Allerdings habe ich keine Hilfe gefunden, wie Bilder zu dienen. Ich möchte in der Lage sein, den Server zu Serverbildern zum Client zu bekommen. Zum Beispiel, wenn der Client eine Anfrage wie: localhost: 1313/Bilder macht, sollte der Server mit einer Seite antworten, die alle Bilder anzeigt, die sich im Ordner "images" befinden.

Hier ist der Code, den ich bisher habe:

import 'dart:io'; 

class Server { 

_send404(HttpResponse res){ 
    res.statusCode = HttpStatus.NOT_FOUND; 
    res.outputStream.close(); 
} 


void startServer(String mainPath){ 
HttpServer server = new HttpServer(); 
server.listen('localhost', 1111); 
print("Server listening on localhost, port 1111"); 

server.defaultRequestHandler = (var req, var res) { 
    final String path = req.path == '/' ? '/index.html' : req.path; 
    final File file = new File('${mainPath}${path}'); 

    file.exists().then((bool found) { 
    if(found) { 
     file.fullPath().then((String fullPath) { 
     if(!fullPath.startsWith(mainPath)) {    
      _send404(res); 
     } else { 
      file.openInputStream().pipe(res.outputStream); 
     } 
     }); 
    } else { 
     _send404(res); 
    } 
    }); 
}; 


void main(){ 
Server server = new Server(); 
File f = new File(new Options().script); 
f.directory().then((Directory directory) { 
server.startServer(directory.path); 
}); 
} 

Ich habe noch nicht den Client implementiert, aber ist es notwendig, einen Client zu implementieren? Ist der Browser nicht genug als Client?

Was muss ich tun, damit der Server die Bilder liefert?

+0

Möchten Sie also eine Liste mit Bilddateinamen oder Bildern selbst anzeigen? Für Letzteres müssen Sie eine Art HTML-Vorlage erstellen. – tjameson

Antwort

1

Um Bilder ordnungsgemäß zu liefern, müssen Sie einen Content-Type-Header festlegen. Ansonsten läuft der Code, den Sie haben, in die richtige Richtung, da er bereits Dateien bereitstellen kann. Auf der anderen Seite könnte es einfacher sein, Apache oder Nginx zu verwenden und dann einen Reverse-Proxy für den Dart-Server einzurichten. Auf diese Weise können Apache oder Nginx statische Dateien für Sie bereitstellen. Entschuldigung, wir haben noch nicht alles dokumentiert. Ich frage mich auch, ob die Verwendung von Heroku gut zu dir passt.

+0

Danke für die Antwort. Ich habe eine HTML-Seite gemacht, aber es wird nicht wirklich zu sagen . Dies bezieht sich auf ein einzelnes Bild, aber ich möchte, dass alle Bilder auf dem Server angezeigt werden. Bedeutet das, dass ich ein div/span mit einem 'img src = ""' dynamisch für jedes Bild erstellen muss? Es gibt keinen Platz für meine gesamte HTML-Seite Code, aber es sieht ungefähr wie folgt aus:

Excercise4


ich dart sowohl für Client- und Server verwenden. Server ist nur lokal – AomSet

+0

Dies ist das gleiche in Dart wie es in HTML im Allgemeinen ist. Sie müssen HTML mit Tags für jedes Bild haben. Es ist nur, wenn Sie Apache verwenden, usw.Diese Webserver können diese HTML-Seiten für Sie generieren. Wenn Sie wirklich mit einem Dart-Server bleiben möchten, sollten Sie einen Code schreiben, um die Bilder in einem Verzeichnis zu durchlaufen und eine HTML-Seite mit Tags für jedes Bild zu erzeugen. –

5

Ich habe Ihren Code eingefügt (und leicht bearbeitet, ich denke, es gibt ein paar Tippfehler), und es liefert Bilder in Chrom - derzeit müssten Sie die volle URL des Bildes übergeben, zB: http://localhost:1111/images/foo.png

um eine Seite voller Bilder zu bekommen, würden Sie benötigen entweder eine hTML-Seite, zum Beispiel schreiben:

<html><body> 
    <img src="http://localhost:1111/images/foo.png"/> 
    <img src="http://localhost:1111/images/bar.png"/> 
</body></html> 

Und es gibt keinen Grund, warum Sie nicht, dass hTML dynamisch auf dem Server erstellen können, für B. als Antwort auf eine Anfrage nach einer Datei mit dem Namen images.html zum Beispiel. Werfen Sie einen Blick auf die Klasse DirectoryLister, um Dateien und Ordner auf der Serverseite zu iterieren.

Auch JJs Kommentar ist korrekt - Sie sollten auch richtige Header hinzufügen, (obwohl Chrome scheint ziemlich gut zu interpretieren Zeug ohne die richtigen Header).

Als Referenz, hier ist die serverseitige Code, der für mich funktioniert (nur so dass ich es testen konnte ...) hat die 404 und Optionen entfernt - es dient aus dem aktuellen (dh App eigenen) Ordner).

import 'dart:io'; 

void startServer(String mainPath){ 
    HttpServer server = new HttpServer(); 
    server.listen('127.0.0.1', 1111); 
    print("Server listening on localhost, port 1111"); 

    server.defaultRequestHandler = (var req, var res) { 
    final String path = req.path == '/' ? '/index.html' : req.path; 
    final File file = new File('${mainPath}${path}'); 

    file.exists().then((bool found) { 
     if(found) { 
     file.fullPath().then((String fullPath) { 
      file.openInputStream().pipe(res.outputStream); 
     }); 
     } 
    });  
    }; 
} 

main(){ 
    startServer("."); 
}