2012-12-12 16 views
5

Znalazłem kilka fajnych samouczków na kliencie/serwerze w Dart. Klient po prostu wysyła żądanie do serwera za pośrednictwem localhost na określonym porcie, a serwer po prostu odpowiada ciągiem.Serwer klienta w Dart

Jednak nie znalazłem żadnej pomocy w obsłudze zdjęć. Chcę być w stanie uzyskać serwer obrazów serwera do klienta. Na przykład, jeśli klient wykonuje żądanie takie jak: localhost: 1313/Images, serwer powinien odpowiedzieć stroną wyświetlającą wszystkie obrazy znajdujące się w folderze "images".

Oto kod mam tak daleko:

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); 
}); 
} 

nie zostały jeszcze wdrożone klienta, ale jest to konieczne do wdrożenia klienta? Czy przeglądarka nie jest wystarczająca jako klient?

Co muszę zrobić, aby serwer wyświetlał obrazy?

+0

Czy chcesz wyświetlić listę nazw plików obrazów lub same zdjęcia? W tym drugim przypadku musisz zrobić jakiś szablon HTML. – tjameson

Odpowiedz

1

Aby prawidłowo wyświetlać obrazy, musisz ustawić nagłówek Content-Type. Poza tym, kod, który masz, idzie w dobrym kierunku, ponieważ może już serwować pliki. Z drugiej strony łatwiej będzie użyć Apache lub Nginx, a następnie skonfigurować odwrotne proxy dla serwera Dart. W ten sposób Apache lub Nginx mogą wyświetlać ci pliki statyczne. Niestety, nie mamy jeszcze wszystkich tych dokumentów. Zastanawiam się również, czy używanie Heroku może być dla ciebie odpowiednie.

+0

Dzięki za odpowiedź. Zrobiłem stronę html, ale tak naprawdę nie powiem . Powoduje to odniesienie do pojedynczego obrazu, ale chcę, aby wszystkie obrazy na serwerze były wyświetlane. Czy to oznacza, że ​​muszę utworzyć div/span z "img src =" "" dynamicznie dla każdego obrazu? Nie ma miejsca dla mojej całej kodzie strony html, ale z grubsza wygląda tak:

Excercise4


MUSZĘ używać dart zarówno dla klienta, jak i serwera. Serwer jest tylko lokalnie – AomSet

+0

To jest takie samo w Dart jak w ogóle w HTML. Musisz mieć kod HTML z tagami dla każdego obrazu. Po prostu podczas korzystania z Apache itp., te serwery internetowe mogą wygenerować dla Ciebie te strony HTML. Jeśli naprawdę chcesz trzymać się z serwerem Dart, powinieneś napisać kod do pętli nad obrazami w katalogu i wygenerować stronę HTML z tagami dla każdego obrazu. –

5

Wkleiłem twój kod (i zredagowałem go delikatnie, myślę, że jest kilka literówek), i obsługuje obrazy w chrome - w chwili obecnej musiałbyś podać pełny adres URL obrazu, np .: http://localhost:1111/images/foo.png

aby uzyskać pełną stronę obrazów, to albo trzeba napisać na stronie HTML, np

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

I nie ma powodu, dlaczego nie można utworzyć tego html dynamicznie na serwerze, na na przykład w odpowiedzi na żądanie pliku o nazwie images.html. Spójrz na klasę DirectoryLister, aby przeglądać pliki i foldery po stronie serwera.

Komentarz JJ również jest poprawny - powinieneś również dodać odpowiednie nagłówki, (chociaż chrome wydaje się całkiem niezłe w interpretowaniu rzeczy bez odpowiednich nagłówków).

Dla odniesienia, tutaj jest kod po stronie serwera, który działa dobrze dla mnie (tylko po to, abym mógł przetestować ... - usunął 404 i opcje - służy z bieżącego folderu (tj. Własnej aplikacji)).

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("."); 
}