2016-05-02 6 views
0

Node(とTS btw)を使って訓練していて、複数のリクエスト/レスポンスオプションを持つ簡単なサーバーを作ろうとしました。しかし、私は問題を抱えています.Expressを使わなければ解決する方法がわかりません(少なくとも今のところは使いたくありません)。Node.js:私のHTMLに画像が必要です

イメージファイルをリクエストするHTMLファイルがあります。 IDEでは、すべてが機能するように見えますが、サーバーが稼働しているときはイメージが見つかりません。理由は分かります.HTMLは、サーバーが処理方法を知らないという要求を出します。つまり、私はドキュメントがサーバーと話す必要なく他のファイルを参照できると思った。

私の問題にはどのようなエレガントで実用的な解決策がありますか?

ありがとうございます。

import * as http from 'http' 
import * as fs from 'fs' 

fs.readFile('doc/kmCNHkq.jpg', function (err, data) { 
    let binaryimg = new Buffer(data).toString('base64'); 
    if (err) throw err; 

    http.createServer(function (req, res) { 
     res.writeHead(200, {'Content-Type': 'image/jpeg'}); 
     res.end(data); 
     console.log("Delivered the jpeg"); 
    }).listen(8000); 

    http.createServer(function(req, res) { 
     res.writeHead(200, {'Content-Type': 'text/plain'}); 
     res.end(binaryimg); 
     console.log("Delivered base64 string"); 
    }).listen(8124); 

    console.log("Unless bug, both servers are listening"); 
}); 

fs.readFile('doc/index.html', function(err, data) { 
    http.createServer(function(req,res) { 
     res.writeHead(200, {'Content-Type': 'text/html'}); 
     res.end(data) 
    }).listen(80); 
    console.log("HTML server is running") 
}) 

(main.ts;ターゲットES6)

<html> 
    <head> 

    </head> 

    <body> 
     <img src="doc/kmCNHkq.jpg"/> 
    </body> 
</html> 

(index.htmlを)

観察:私は '../doc/' でHTMLファイルを残すために使用され、リソース'../img/'ではHTMLが相対パスを使用しているようですので、イメージをHTMLのフォルダにコピーしました。解決策がそれを作ったならば、彼らのそれぞれのフォルダにリソースを残すことができました。それは非常に高く評価されます。

@Edit: このスイッチ/ケース要求ハンドラを使用しています。期待どおりに動作し、画像に対するHTMLの要求は通常の要求と解釈されます。どうもありがとう!

import * as http from 'http' 
import * as fs from 'fs' 

var stream: fs.ReadStream, 
    folder = __dirname.substr(0, __dirname.length - 3); 

http.createServer(function(req,res) { 
    switch (req.url){ 
     case('/jpeg'): 
      stream = fs.createReadStream(folder + 'img/kmCNHkq.jpg'); 
      stream.pipe(res); 

      console.log("Delivering the jpeg"); 
      break; 

     case('/base64'): 
      fs.readFile('img/kmCNHkq.jpg', function (err, data) { 
       let img64 = new Buffer(data).toString('base64'); 
       if (err) throw err; 
       res.end(img64); 

       console.log("Delivered base64 string"); 
      }) 

      break; 

     case('/html'): 
      stream = fs.createReadStream(folder + 'doc/index.html'); 
      stream.pipe(res); 

      console.log("Sending the docs"); 
      break; 

     default: 
      console.log("Shit happens"); 
    } 
}).listen(80) 

(main.ts)

<html>  
    <body> 
     <img src="jpeg"/> 
    </body> 
</html> 

(index.htmlを)

答えて

1

短い答え:

あなたは上の特定のリソースを参照することができませんあなたのサーバーがそのコンテンツに対する要求にどのように応答するかを知っていない場合はあなたはおそらく簡単にただすぐに画像srcをhttp://localhost:8000に変更することで、あなたのサンプルを簡単に動作させることができるようです。

長い答え:あなたのイメージのためのsrcが、それはページをロードするとき、それはそれはからページを得たサーバーに行く必要があることを、あなたのブラウザに指示として「DOC/kmCNHkq.jpg」を使用して

をし、 'doc/kmCNHkq.jpg'リソースを求めてください。プロトコル(http://)を含む完全なURLを指定した場合は、相対ではなく絶対値になりますので、ページを提供したサーバーとは異なるサーバーからリクエストできます。

あなたが書いたサーバーは、実際には(req.url)要求されたファイルのパスを調べることはなく、実際には常に同じ内容を返します。 http://localhost:80(上記で作成した3番目のサーバ)に接続し、jpgに依頼すると、ページの同じHTMLデータが得られます。なぜなら、最後のcreateServerコールの2行しか実行しないからですあなたの例のしかし、上記のイメージ(最初のサーバー)を常に返すサーバーを作成しただけで、別のポートで実行しているので、上記の解決策が機能します。

最も単純な解決策は、既存のサーバーをそのまま使用することです。しかし従来のアプローチでは、1つのHTTPサーバーを1つのポート(3つのポートではなく)で実行し、req.urlを使用して返すデータを決めることです。

伝統的に静的コンテンツの場合、要求されたパスをディスク上のファイルのレイアウトに直接マッピングするので、doc/abc.jpgを要求するとサーバーのディレクトリ内のdocフォルダが検索され、abc.jpgそこに。ただし、必ずしも必要なわけではありません。サーバーは、好きなようにこれらのパスを解釈して、どこからでもコンテンツを返すことができます。

(これはTypeScriptとはまったく関係がありませんし、Node.jsとはまったく関係ありません)これは実際にHTTPサーバーとブラウザがどのようにやりとりするかの要点です。その他のバッキング技術。これについての詳細を知りたい場合は、一般的なHTTPとブラウザの詳細をご覧ください)

+0

まさに私が探していたものです。参照してください、私はTSとノードを引用したので、人々はコードの読み方を知ることができます。しかし、その解決策は構造的なものでした。私は、複数のポートがかなり不器用だったことを知っていたので、 'IncomingMessage.url'のアドバイスが本当に役に立ちました。コードがどのように終わったかをお見せしましょう。まだ改善の余地がありますが、確かに良いです。 – eduardogbg

関連する問題